15

I'm using puppeteer and jest to test some stuff on the front end, and I'm having a small issue - I think there is some concept I'm missing.

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);
  });

According to the puppeteer docs, page.$ runs document.querySelector. When I run the following on the browser, I get what I want:

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

but the code in jest results in CHECKED: undefined

Why is this the case --> what concept am I missing?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Asool
  • 13,031
  • 7
  • 35
  • 49

1 Answers1

28

You are trying to read a value of ElementHandle, it is not the same as pure JS Element.

You have to use this syntax to get checked value:

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

Here is working example:

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();
})();
Everettss
  • 15,475
  • 9
  • 72
  • 98