You can easily find all links on a webpage using Playwright's locators. Let's use the
page.locator() function with a CSS selector or XPath expression that targets the
Here's how you can do it with a CSS selector:
const links = await page.locator('a').elements();
This code will give you an array of ElementHandles for all the link elements on the page. You can then interact with these elements, like clicking them or extracting their attributes.
If you prefer XPath over CSS selectors, you can modify the locator like this:
const links = await page.locator('//a').elements();
This will also give you an array of ElementHandles for all the link elements found using XPath.
Remember, both CSS selectors and XPath expressions are tied to the DOM structure. If the DOM changes, these locators might break. So, try to create locators that are closer to how users see the page or use test ids.
Playwright also supports locating elements within Shadow DOM. But, there might be cases where certain locators don't work within Shadow DOM.
So, to sum up:
page.locator() with a CSS selector (
'a') or an XPath expression (
For more insights on Playwright, check out this blog post.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email email@example.com.