select a button by its text in Pyppeteer (Python Puppeteer)

Question

I want to click the following button using pyppeteer

<button class="r3f3s" tabindex="0">Text here</button>

I am trying to do it using Jquery like suggested here:

btn = await page.querySelector('button[text=\'Text here\']')

or here:

btn = await page.querySelector('button:contains(text(), 'Text here'))

But it doesn't seem to work. I also noticed that a lot of examples published online in Jquery doesn't seem to work it Google chrome's console, thus doesn't work on pyppeteer.

My question is how can I select button by its text, and also, can anyone direct me to a guide explaining what Jquery selector syntax is the right one to work on Google chrome's console (puppeteer)? because this one doesn't seem correct and this error is not really indicative:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': is not a valid selector.
at <anonymous>:1:10

Answer 1

CSS selector contains text is not currently supported, but you can use Xpath.

Exact match text

btn = await page.Jx('//button[text()="Text here"]')

Contains text

btn = await page.Jx('//button[contains(text(), "Text he")]')

Answer 2

I had a similar problem, and solved it by using await page.waitForSelector(selector)

Answer 3

[] is the css attribute selector. Square brackets in CSS

:contians() is a jQuery selector. https://api.jquery.com/contains-selector/

The button element doesn't have a text attribute. It would be textContent. But in practice, it usually doesn't work for me. I also don't recommend :contains() as it will return all selectors that contain that text. (ex. 'text here', 'text here now', 'text here then', 'was text here').

When I want to find something by text, I use .filter(). http://api.jquery.com/filter/

$('button').filter(function() { return this.textContent === 'Text here'; });

Not familiar with pyppeteer or how this would work with that, but hope it helps.