How to click on a link that has a certain content in puppeteer?
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.
First, we have to find element by text.
/**
* findElemByText - Find an Element By Text
*
* @param {String} str case-insensitive string to search
* @param {String} selector = '*' selector to search
* @param {String} leaf = 'outerHTML' leaf of the element
* @return {Array} array of elements
*/
function findElemByText({str, selector = '*', leaf = 'outerHTML'}){
// generate regex from string
const regex = new RegExp(str, 'gmi');
// search the element for specific word
const matchOuterHTML = e => (regex.test(e[leaf]))
// array of elements
const elementArray = [...document.querySelectorAll(selector)];
// return filtered element list
return elementArray.filter(matchOuterHTML)
}
// usage
// findElemByText({str: 'Example', leaf: 'innerHTML', selector: 'title'});
// findElemByText({str: 'Example', selector: 'h1'});
// findElemByText({str: 'Example'});
Save it in same folder as your puppeteer script, name it script.js
.
Now, we can use this in our puppeteer script. We can use ElementHandle, but for simplicity of understanding, I'll use .evaluate()
function provided with puppeteer.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// expose the function
await page.addScriptTag({path: 'script.js'});
// Find Element by Text and Click it
await page.evaluate(() => {
// click the first element
return findElemByText({str: 'More'})[0].click();
});
// Wait for navigation, Take Screenshot, Do other stuff
await page.screenshot({path: 'screenshot.png'});
await browser.close();
})();
Do not copy paste the code above, try to understand it and type them yourself. If the code above fails, try to find why it's failing.