How can I add a css class to an element with Puppeteer

Question

tried code below returned Error: Evaluation failed: TypeError: Cannot read properties of undefined (reading 'add'). The class 'form-control' is on all inputs

const forms = ".form-control";
if (device.name === "Panel") {
    await page.evaluate((s) => {
        let dom = document.querySelectorAll(s);
        dom.classList.add("_has_error");
    }, forms);
}

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Ethan, Apr 14 '22 at 20:36

score 2 · Answer 1 · answered Apr 14 '22 at 18:09

querySelectorAll returns an array of elements. You can try dom.classList is undefined indeed as the error says, but dom[0].classList gives valid DOM token list.

You need to iterate over the dom array, e.g. with Array.forEach() if you want to apply your class on every matching elements:

let dom = document.querySelectorAll(s);
dom.forEach(el => el.classList.add("_has_error"));

How can I add a css class to an element with Puppeteer

1 Answers1