waitForSelector on id AND class*=?

Question

FYI This is in a script being run by puppeteer. Note: Just updated the css tag and changed it to await bframe.$...

Can anyone tell me the right way to make this match a selector that has "recaptcha-verify-button" who's class list includes "rc-button-disabled" ?

await bframe.waitForSelector('button[id="recaptcha-verify-button"]');

The selector above works to identify the button but I can't figure out how to include the classlist filter. I believe this would normally do it...

 el.classList.contains('rc-button-default-disabled')

This is the element I'm trying to identify which is added to the DOM after the initial load.

<div class="verify-button-holder">
 <button class="rc-button-default goog-inline-block rc-button-default-disabled" title="" value="" id="recaptcha-verify-button" disabled="">Verify</button>
</div>

NOTE: I have tried this which works to get the element BUT it matches on ID and ANY css element, when it should match on the ID AND the css element.

await bframe.$('button#recaptcha-verify-button.rc-button-default-disabled');

Also you don't need the `id=`, just `'#recaptcha-verify-button.rc-button-disabled'` — Pointy, Jul 20 '21 at 19:19
@Pointy It just ignore's the .rc-... part completely. If I change it to await bframe.$('button[id="recaptcha-verify-button"].asdfasrcasdfasdfsaf'); it still matches. — regan, Jul 20 '21 at 19:37
The HTML you added uses the class `rc-button-default-disabled`, not `rc-button-disabled`. Does `rc-button-disabled` get applied later via JS? — Samathingamajig, Jul 20 '21 at 19:44
BTW, recaptcha is a tool sites use to prevent webscraping and other forms of automation. Make sure you're aware of this since you're using puppeteer — Samathingamajig, Jul 20 '21 at 19:45
@Samathingamajig It doesn't matter what CSS selector I add in there it just gets ignored and always matches on the ID only, not the ID AND the class as "must have both". — regan, Jul 20 '21 at 19:48
Obligatory: [puppeteer-extra-plugin-recaptcha](https://github.com/berstend/puppeteer-extra/tree/master/packages/puppeteer-extra-plugin-recaptcha) — ggorlen, Jul 20 '21 at 20:48
Does this answer your question? [How to deal with the captcha when doing Web Scraping in Puppeteer?](https://stackoverflow.com/questions/55493536/how-to-deal-with-the-captcha-when-doing-web-scraping-in-puppeteer) — ggorlen, Jul 20 '21 at 20:50

Samathingamajig · Answer 1 · 2021-07-20T19:51:13.440

2

Just use normal CSS selector syxtax:

# == id
. == class

await bframe.waitForSelector('button#recaptcha-verify-button.rc-button-disabled');
// or with the class that's actually there (rc-button-default-disabled)
await bframe.waitForSelector(`button#recaptcha-verify-button.rc-button-default-disabled`);

const myButton = document.querySelector(`button#recaptcha-verify-button.rc-button-default-disabled`);

console.log(myButton);
console.log(myButton.innerText);

<div class="verify-button-holder">
 <button class="rc-button-default goog-inline-block rc-button-default-disabled" title="" value="" id="recaptcha-verify-button" disabled="">Verify</button>
</div>

edited Jul 20 '21 at 19:51

answered Jul 20 '21 at 19:19

Samathingamajig

11,839
3
12
34

Nope doesn't work it just gets ignored. I will paste the element I'm trying to match into my question above. – regan Jul 20 '21 at 19:40
Based off of the [Puppeteer docs](https://devdocs.io/puppeteer/index#framewaitforselectorselector-options), it uses normal CSS queries when using `.waitForSelector`, so this should work – Samathingamajig Jul 20 '21 at 19:52
When I try the document.querySelector code inside await page.evaluate(() => {}); it is returning null with this error... Error: Evaluation failed: TypeError: Cannot read property 'innerText' of null – regan Jul 20 '21 at 20:10

waitForSelector on id AND class*=?

1 Answers1