Puppeteer - checkbox.checked is undefined - why?
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?
Answer
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();
})();