How to Use Playwright Locators?

Best practices

Use specific and unique CSS selectors to ensure that the locator targets the correct element efficiently.
Prefer text selectors for buttons and links to make tests more readable and maintainable, as they mimic user interactions.
Utilize XPath for navigating complex DOM structures or when needing to perform more advanced element searches.
Combine selectors strategically to refine element targeting, especially in dynamic web pages where elements might change frequently.

from playwright.sync_api import sync_playwright

# Start Playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()

# Navigate to the target page
page.goto('https://sandbox.oxylabs.io/products')

# Using CSS selectors
product_name = page.locator('css=.product-name').text_content()
print('Product Name:', product_name)

# Using text selectors
add_to_cart_button = page.locator('text=Add to Cart').click()

# Using XPath selectors
price = page.locator('xpath=//div[@class="price"]').text_content()
print('Price:', price)

# Combining selectors
description = page.locator('.description >> text=More Info').text_content()
print('Description:', description)

# Close browser
browser.close()

Common issues

Ensure that Playwright locators are updated if the structure of the web page changes, as stale selectors can cause tests to fail.
Regularly verify that locators are unique and do not inadvertently select multiple elements, which can lead to ambiguous interactions.
Use Playwright's auto-wait feature by default to handle elements that might take time to appear or become interactable, avoiding flaky tests.
Debug locator issues by using Playwright's inspector tool to visualize and test selectors directly in the browser.

# Incorrect: Using a non-unique selector that might match multiple elements
button = page.locator('button').click()

# Correct: Using a unique selector to ensure the correct element is targeted
button = page.locator('button#submit').click()

# Incorrect: Assuming element is immediately available without waiting
product_details = page.locator('div.product-details').text_content()

# Correct: Using auto-wait to ensure element is loaded and interactable
product_details = page.locator('div.product-details').wait_for(state='visible').text_content()

# Incorrect: Using a hardcoded XPath that is brittle and likely to break with UI changes
login_button = page.locator('xpath=/html/body/div[2]/div[1]/button').click()

# Correct: Using a more robust and readable CSS selector or relative XPath
login_button = page.locator('css=button.login').click()

# Incorrect: Not checking if the locator matches any element, leading to potential errors
price = page.locator('div.price').text_content()

# Correct: First check if the locator finds any element before proceeding
if page.locator('div.price').count() > 0:
price = page.locator('div.price').text_content()
else:
print("Price element not found")