{"id":9936,"date":"2023-10-10T17:13:38","date_gmt":"2023-10-10T17:13:38","guid":{"rendered":"https:\/\/testgrid.io\/blog\/?p=9936"},"modified":"2025-10-08T16:42:09","modified_gmt":"2025-10-08T16:42:09","slug":"playwright-selectors-and-locators","status":"publish","type":"post","link":"https:\/\/testgrid.io\/blog\/playwright-selectors-and-locators\/","title":{"rendered":"Playwright Selectors and Locators: Everything You Need to Know"},"content":{"rendered":"\n

Playwright is a powerful test automation framework, allowing users to control web applications and conduct End to End test automation. In this article, we will try to cover complete functionality and the implementation of Playwright selectors and locators.<\/p>\n\n\n\n

Selectors act as a crucial component of the playwright framework. It helps automated tests to have interaction with web applications like validating if that element exists on the web page or not, clicking on the available options, providing inputs by typing or reading text. Playwrights come with multiple types of selectors and a good set of methods using which we can perform actions on selected elements.<\/p>\n\n\n\n

A few of them are listed below:<\/p>\n\n\n\n

CSS Selectors<\/strong>: when users locate Web elements using their attributes, IDs, classes and more, They are widely used while performing test automation.<\/p>\n\n\n\n

const element = await page.$('input[type=\"text\"]');<\/code><\/pre>\n\n\n\n
const { chromium } = require('playwright');\n\n\n(async () => {\n  const browser = await chromium.launch();\n  const page = await browser.newPage();\n  await page.goto('https:\/\/example.com');\n \n  \/\/ Find an element using a CSS selector\n  const element = await page.locator('h1');\n \n  \/\/ Interact with the element (e.g., click)\n  await element.click();\n \n  await browser.close();\n})();\n<\/code><\/pre>\n\n\n\n
2 . XPath Selectors: <\/strong>While identifying elements that do not have unique attributes or they are nested elements, for these conditions XPath is the most appropriate solution.<\/p>\n\n\n\n
const element = await page.$x('\/\/input[@type=\"text\"]');<\/code><\/pre>\n\n\n\n
const { chromium } = require('playwright');\n\n\n(async () => {\n  const browser = await chromium.launch();\n  const page = await browser.newPage();\n  await page.goto('https:\/\/example.com');\n \n  \/\/ Find an element using XPath\n  const element = await page.locator('\/\/h1');\n \n  \/\/ Interact with the element (e.g., click)\n  await element.click();\n \n  await browser.close();\n})();\n<\/code><\/pre>\n\n\n\n
3 . Locator API: <\/strong>Locator API is a simplified way of locating web elements using chainable interfaces and performing actions on the selected elements.<\/p>\n\n\n\n
const buttonLocator = page.locator('button');\nawait buttonLocator.click();\n<\/code><\/pre>\n\n\n\n
const { chromium } = require('playwright');\n\n\n(async () => {\n  const browser = await chromium.launch();\n  const page = await browser.newPage();\n  await page.goto('https:\/\/example.com');\n \n  \/\/ Find an element by its attribute value\n  const element = await page.locator('[name=\"search\"]');\n  \/\/ Interact with the element (e.g., type text)\n  await element.type('Playwright');\n \n  await browser.close();\n})();\n\n<\/code><\/pre>\n\n\n\n
4 . Text Selector: <\/strong>When users try to identify elements based on the visible text content of Element on the web page.<\/p>\n\n\n\n
const element = await page.locator('text=Click Here');<\/code><\/pre>\n\n\n\n
const { chromium } = require('playwright');\n\n\n(async () => {\n  const browser = await chromium.launch();\n  const page = await browser.newPage();\n  await page.goto('https:\/\/example.com');\n \n  \/\/ Find an element by its text content\n  const element = await page.locator('text=Welcome');\n \n  \/\/ Interact with the element (e.g., click)\n  await element.click();\n \n  await browser.close();\n})();\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
5 . Handling Shadow DOM: <\/strong>Playwright has capability to identify and interact with elements which exist in Shadow DOM.<\/p>\n\n\n\n
const shadowDomElement = await page.$('shadow-root-element >>> .shadow-element');\n<\/code><\/pre>\n\n\n\n
6 . Waiting for Elements: <\/strong>Playwrights come with methods using which we can wait for the element to load, be visible and meet any dependent condition before identifying and performing action on it.<\/p>\n\n\n\n
await page.waitForSelector('button', { state: 'visible' });<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
7 . Selecting options in Dropdowns: <\/strong>When a user needs to interact with menu options present in a drawdown, Playwright helps with these methods for performing the actions.<\/p>\n\n\n\n
await page.selectOption('select#myDropdown', 'Option 1');\n<\/code><\/pre>\n\n\n\n
8 . Selectors for Pop Ups and Frames: <\/strong>Playwrights provide options to select elements from pop up windows and iframes. Users can perform actions using these identified web elements.<\/p>\n\n\n\n
const popup = await page.waitForPopup('https:\/\/example-popup.com');\nconst popupElement = await popup.$('div.popup-content');\n<\/code><\/pre>\n\n\n\n
Also Read: Playwright Automation Framework: Practical Tutorial<\/a><\/p>\n\n\n\n
 Usage of Playwright Selectors:<\/strong><\/h2>\n\n\n\n
Playwright selectors play a vital role in performing automation related Task:
We can perform Element Interaction (Selecting, Clicking, Submitting web pages and overing over web elements), Element verification ( Validating whether element is visible, element is present on the web page or not), Data Extraction ( fetching text, files and other data from the UI for further validation) and Waiting for the web elements getting available on the UI.<\/p>\n\n\n\n
What is a Playwright Locator?<\/strong><\/h2>\n\n\n\n
Playwright locators are a set of methods and APIs that allow you to select and interact with elements available on a web page. They provide a higher-level and more expressive way to locate elements compared to traditional selector types like CSS selectors and XPath.<\/p>\n\n\n\n
Types of Playwright Locators:<\/strong><\/h2>\n\n\n\n
Playwright comes with multiple types of locators for identifying elements and fields on the web page.<\/p>\n\n\n\n
Page.locator(): <\/strong>Users can use this while dealing with multiple elements on the web page, This method creates a locator for finding elements and then we can chain multiple cations on the set of elements.<\/p>\n\n\n\n
Locator.locator(): <\/strong>For refining selection further we can chain locator methods with existing locators.<\/p>\n\n\n\n
locator.locatorAll(): <\/strong>For locating multiple elements matching a locator we can use this method.<\/p>\n\n\n\n
Locator Strategies: <\/strong><\/h2>\n\n\n\n
Locator strategies are used for selecting an appropriate locator for performing web automation few of them are listed below:<\/p>\n\n\n\n
locator(‘text=Some Text’): <\/strong>locating web elements based on the text visible.<\/p>\n\n\n\n
locator(‘aria-label=Label’): <\/strong>locating web elements based on the Aria label.<\/p>\n\n\n\n
locator(‘aria-labelledby=ID’): <\/strong>locating web elements based on the Aria labelled by ID.<\/p>\n\n\n\n
locator(‘css selector’): <\/strong>For targeting elements based on CSS attributes we need to combine CSS selector with the locator.<\/p>\n\n\n\n
locator(‘xpath selector’):<\/strong> For locating complex web elements and complex queries by combining Xpath selector with a locator.<\/p>\n\n\n\n
Implementation of Locator:<\/strong><\/h2>\n\n\n\n
const { chromium } = require('playwright');\n\n\n(async () => {\n  const browser = await chromium.launch();\n  const page = await browser.newPage();\n  await page.goto('https:\/\/example.com');\n\n\n  const locator = page.locator('text=Click Here');\n  await locator.click();\n})();\n<\/code><\/pre>\n\n\n\n
Here the first user is initialising the chrome browser and then accessing a web URL, on this page we are trying to locate the \u201cClick here\u201d button on the UI, using locator by text.<\/p>\n\n\n\n
Playwright Locate up-to-date elements<\/strong><\/h2>\n\n\n\n
Whenever the locator is used to perform some action; an up-to-date DOM element is located on the page. So in the code below, the highlighted element will be located two times. For the first time it will be located before the hover action occurs, and for  the second time it will be located before the click action. This means that the new element corresponding to the locator will be used if the DOM changes in between the calls due to re-render. With this process, you will not be getting stale element exceptions like other automation tools and frameworks.<\/p>\n\n\n\n
const locator = page.locator('text=Submit');\nawait locator.hover();\nawait locator.click();<\/code><\/pre>\n\n\n\n
End to End implementation of Playwright Selector and locator:<\/strong><\/h2>\n\n\n\n
const { chromium } = require('playwright');\nconst { expect } = require('@playwright\/test');\n\n\n(async () => {\n  \/\/ Launch a browser\n  const browser = await chromium.launch();\n  const context = await browser.newContext();\n\n\n  \/\/ Create a page\n  const page = await context.newPage();\n  await page.goto('https:\/\/example.com');\n\n\n  \/\/ Use a locator to find an element by CSS selector\n  const searchInput = page.locator('input[type=\"text\"]');\n \n  \/\/ Type text into the input field\n  await searchInput.type('Playwright');\n\n\n  \/\/ Use a locator to find an element by text content\n  const welcomeMessage = page.locator('text=Welcome');\n \n  \/\/ Assert that the element with the text content exists\n  expect(await welcomeMessage.isVisible()).toBeTruthy();\n\n\n  \/\/ Click on the element\n  await welcomeMessage.click();\n\n\n  \/\/ Use a locator to find an element by XPath\n  const heading = page.locator('\/\/h1');\n\n\n  \/\/ Assert that the element with the XPath selector exists\n  expect(await heading.isVisible()).toBeTruthy();\n\n\n  \/\/ Capture a screenshot\n  await page.screenshot({ path: 'example.png' });\n\n\n  \/\/ Close the browser\n  await browser.close();\n})();\n<\/code><\/pre>\n\n\n\n
In this example:<\/p>\n\n\n\n
 1. We launch a Chromium browser (Chrome Browser) and create a new context and page.<\/p>\n\n\n\n
 2. We use locators (Selector) to find elements on the page using CSS selectors, text content, and XPath.<\/p>\n\n\n\n
 3. We are doing actions like typing into an input field, clicking on an element, and taking a screenshot.<\/p>\n\n\n\n
 4. We are using assertions from `@playwright\/test` (assuming you have it installed) to check if elements are visible.<\/p>\n\n\n\n
 5. At the end , we close the browser.<\/p>\n\n\n\n
Conclusion:<\/strong><\/h2>\n\n\n\n
In summary, Playwright’s selector and locator capabilities provide a powerful and flexible way to interact with web elements during automation and testing. They are designed to work with accuracy across different browsers and can adapt to various scenarios, making Playwright a valuable choice for web automation projects. However, it’s very important to select the most appropriate selector strategy based on your specific use case and application requirements for performing test automation with minimum failures.<\/p>\n","protected":false},"excerpt":{"rendered":"
Playwright is a powerful test automation framework, allowing users to control web applications and conduct End to End test automation. In this article, we will try to cover complete functionality and the implementation of Playwright selectors and locators. Selectors act as a crucial component of the playwright framework. It helps automated tests to have interaction […]<\/p>\n","protected":false},"author":21,"featured_media":9938,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[209],"tags":[],"class_list":["post-9936","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-test-automation"],"acf":[],"images":{"medium":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/Playwright-Selectors-Locators-300x169.jpg","large":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/Playwright-Selectors-Locators-1024x576.jpg"},"_links":{"self":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/9936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/comments?post=9936"}],"version-history":[{"count":4,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/9936\/revisions"}],"predecessor-version":[{"id":15360,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/9936\/revisions\/15360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media\/9938"}],"wp:attachment":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media?parent=9936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/categories?post=9936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/tags?post=9936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}