How to click on a link that has a certain content in puppeteer?

css-selectors browser-automation puppeteer
Totty.js picture Totty.js · Dec 14, 2017 · Viewed 12.1k times · Source

If I have some content in my page such as:

<a>Hi!</a>

How can I use Google's Puppeteer to automate the clicking of that element?

I need to be able to select it based on its contents alone, not id, class or attribute.

Is there something like $('a:contains("Hi!")') that I can leverage to select this element?

How can I do this with https://github.com/GoogleChrome/puppeteer

thanks

Answer

Thomas Dondorf picture Thomas Dondorf · Apr 3, 2019

Alternative approach using XPath

There is a much easier way to do it using an XPath expression:

const aElementsWithHi = await page.$x("//a[contains(., 'Hi!')]");
await aElementsWithHi[0].click();

Using page.$x, this code finds all a elements with the text Hi! inside. The result will be an array containing the matching a element handles. Using the elementHandle.click function, we can then click on the element.

Related questions

Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing …

Read More
CSS selector for first element with class

I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule: What is wrong in this selector and how do I correct …

Read More
not:first-child selector

I have a div tag containing several ul tags. I'm able to set CSS properties for the first ul tag only: div ul:first-child { background-color: #900; } However, my following attempts to set CSS properties for each other ul tag except the …

Read More