web-dev-qa-db-fra.com

Marionnettiste - checkbox.checked n'est pas défini - pourquoi?

J'utilise des marionnettistes et des plaisanteries pour tester des trucs sur le front-end, et j'ai un petit problème - je pense qu'il y a un concept qui me manque.

test("Assert that when checkbox isn't checked, dropdown menu is visible", async () => {
    let checkbox = await page.$('input[ng-model="user.managed.timezone"]');
    console.log("Checking if checkbox checked");
    console.log("CHECKED: ", checkbox.checked);
  });

Selon les documents du marionnettiste, la page. $ Exécute document.querySelector. Lorsque j'exécute ce qui suit sur le navigateur, j'obtiens ce que je veux:

let m = document.querySelector('input[ng-model="user.managed.timezone"]') console.log(m.checked) // results in true or false

mais le code en plaisantant résulte en CHECKED: undefined

Pourquoi est-ce le cas -> quel concept me manque?

jestjspuppeteer
9
Asool

Vous essayez de lire une valeur de ElementHandle , ce n'est pas la même chose que pure JS Element .

Vous devez utiliser cette syntaxe pour obtenir la valeur checked:

await (await checkbox.getProperty('checked')).jsonValue()

Voici un exemple de travail:

const puppeteer = require('puppeteer');

const html = `
    <html>
        <body>
            <input ng-model="user.managed.timezone" type="checkbox" />
        </body>
    </html>`;

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(`data:text/html,${html}`);

    const checkbox = await page.$('input[ng-model="user.managed.timezone"]');

    console.log(await (await checkbox.getProperty('checked')).jsonValue());
    await checkbox.click();
    console.log(await (await checkbox.getProperty('checked')).jsonValue());

    await browser.close();
})();
19
Everettss