Locating WebElements Using Playwright Locators | Playwright JavaScript Tutorial | Part II | LambdaTest

:rocket: Want to master web automation? Watch this video to learn how to locate WebElements using Playwright Locators like a pro! :man_detective: Click to level up your automation skills! :dart::point_down:

Using CSS Selectors : Playwright supports CSS selectors to locate elements based on their attributes, classes, or IDs.

Playwright supports CSS selectors to locate elements based on their attributes, classes, or IDs.

const element = await page.locator('button#submit'); // Locate element with ID 'submit'
await element.click();

Using Text Content Playwright allows locating elements based on their visible text, making it easy to interact with buttons, links, or labels.

const element = await page.locator('text="Sign In"'); // Locate a button with text 'Sign In'
await element.click();

You can use XPath expressions to locate elements based on their structure within the DOM.

const element = await page.locator('//input[@name="email"]'); // Locate input element by name attribute