Puppeteer 19.7.1 added "p" (pseudo) selectors, so text/
is deprecated in favor of ::-p-text
, which selects on a substring. For example:
const el = await page.waitForSelector("::-p-text(Button text)");
Pseudoselectors can work in conjunction with CSS selectors, like
const el = await page.$(".elements button::-p-text(Button text)");
In Puppeteer >= 18.0.0, selectors have a text/
prefix that selects on a substring of element text:
const el = await page.waitForSelector("text/Button text");
With regards to XPath specifically, most relevant to pre-18.0.0 Puppeteer:
Since OP's use case appears to be an exact match on the target string "Button text"
, <button>Button text</button>
, text()
seems like the correct method rather than the less-precise contains()
.
Although Thomas makes a good argument for contains
when there are sub-elements, avoiding false negatives, using text()
avoids a false positive when the button is, say, <button>Button text and more stuff</button>
, which seems just as likely a scenario. It's useful to have both tools on hand so you can pick the more appropriate one on a case-by-case basis.
const xp = '//*[@class="elements"]//button[text()="Button text"]';
const [el] = await page.$x(xp);
await el?.click();
Note that many other answers missed the .elements
parent class requirement.
Another XPath function is [normalize-space()="Button text"]
which "strips leading and trailing white-space from a string, replaces sequences of whitespace characters by a single space" and may be useful for certain cases.
Also, it's often handy to use waitForXPath
which waits for, then returns, the element matching the XPath or throws if it's not found within the specified timeout:
const xp = '//*[@class="elements"]//button[text()="Button text"]';
const el = await page.waitForXPath(xp);
await el.click();
Another flexible approach that works in all environments is to use browser JS to .find()
or .filter()
out the element(s) you want by text:
// untrusted click (ignores visibility, sometimes useful):
await page.$$eval(".elements *", els =>
els
.find(el => el.textContent.trim().toLowerCase() === "button text")
.click()
);
// trusted click:
const el = await page.evaluateHandle(() =>
[...document.querySelectorAll(".elements *")]
.find(el => el.textContent.trim().toLowerCase() === "button text")
);
await el.click();
or:
// untrusted clicks
const els = await page.$$eval(".elements *", els =>
els
.filter(el => el.textContent.trim().toLowerCase() === "button text")
.forEach(el => el.click())
);
// trusted clicks (not ideal)
const els = await page.evaluateHandle(`
[...document.querySelectorAll(".elements *")]
.filter(el => el.textContent.trim().toLowerCase() === "button text")
`);
const length = await els.evaluate(els => els.length);
for (let i = 0; i < length; i++) {
const el = await els.evaluateHandle((els, i) => els[i], i);
await el.click();
}
If you need to wait for this text, you can use waitForFunction
:
const el = await page.waitForFunction(`
[...document.querySelectorAll(".elements *")]
.find(el => el.textContent.trim().toLowerCase() === "button text")
`);
await el.click();
Note that the above querySelectorAll
strategy will include parent nodes, so <div><div>x</div></div>
will find the outer <div>
rather than the innermost one. To find the element with the text node immediately containing the text, you can use:
[...document.querySelectorAll("*")].find(el =>
[...el.childNodes].find(
el =>
el.nodeType === Node.TEXT_NODE &&
el.textContent.trim() === "button text"
)
);
If you're manipulating a page that happens to have jQuery (or if you import it yourself), you can use the :contains
sizzle pseudoselector syntax:
const el = await page.evaluateHandle(`
$('.elements :contains("Button text")').first()
`);