Playwright Element Locating Strategies and Best Practices for UI Automation Testing

In UI automation testing with Playwright, accurately locating page elements is essential for actions such as clicking buttons, filling forms, or validating content.

Playwright supports locating elements via CSS selectors and XPath. For example, using a CSS selector to click a button:

from playwright.sync_api import sync_playwright
def run(playwright):
    browser = playwright.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("http://example.com")
    # 使用CSS选择器定位并点击一个按钮
    page.click("button.submit-button")
    browser.close()
with sync_playwright() as playwright:
    run(playwright)

An XPath example to click the same button:

page.click("//button[@class='submit-button']")

Beyond basic selectors, Playwright allows locating elements by text content or attribute values. To click a link containing specific text:

page.click('text="Click Me"')

To fill an input field by its name attribute:

page.fill("input[name='email']", "[email protected]")

Dynamic waiting ensures elements are ready before interaction. An explicit wait for a username input:

page.wait_for_selector("input[name='username']")
page.fill("input[name='username']", "myUsername")

Playwright also provides implicit auto‑waiting for network and DOM changes, reducing the need for manual waits in most cases.

For dynamically generated content, such as a dropdown filled via AJAX, wait for the element to appear before interacting:

page.wait_for_selector("select#dynamicOptions")
page.select_option("select#dynamicOptions", index=0)

When elements are obscured by others, you can execute JavaScript directly to click them:

page.evaluate("document.querySelector('button.hidden').click()")

By mastering these locating strategies and waiting techniques, testers can create reliable UI automation scripts with Playwright, setting the stage for more advanced topics like form handling and user input.