Understanding Playwright Selectors: A Guide

Author(s): Peace Aisosa

Originally published on Towards AI.

Playwright is a powerful and versatile automation library for web testing, allowing developers to control web browsers programmatically and conduct reliable end-to-end testing. At the heart of Playwright’s functionality lies a crucial component — selectors. Selectors are the bridge between your tests and your webpage. They allow you to find and interact with elements on the webpage.

This guide delves deep into selectors in Playwright, showcasing their importance, types, and best practices.

What Are Selectors In Playwright?

Selectors in Playwright are strings that identify particular elements on a webpage. They are used to target these elements for interactions like clicking, typing, or reading text. Selectors make your tests more readable and resilient to changes and help to maintain focus on the behavior you’re trying to test.

Types Of Selectors In Playwright

There are several types of selectors available in Playwright. These include CSS selectors, XPath selectors, text selectors, and attribute selectors. Let’s delve into each one.

CSS Selectors

CSS selectors are based on the CSS language used for designing webpages. They allow us to identify elements on a webpage using CSS properties. CSS selectors can target elements by their type (like div, button, a), class (.classname), ID (#idname), attribute ([attribute=value]), or a combination thereof.

For instance, in Playwright, you could target a button with the ID submit by using page.click( ‘ #submit ‘ ). If you have a unique class or attribute, you can select those in a similar fashion. CSS selectors also allow for more complex queries like selecting the first child of a node (:first-child), selecting elements with specific sibling relationships ( +, ~), or selecting elements that are in a specific state (:hover, :focus).

XPath Selectors

XPath selectors offer a different way to navigate through elements and attributes in an HTML document. They are particularly powerful when you need to target elements based on their hierarchical position in the HTML document or based on the specific text they contain.

For example, page.click(‘//button[normalize-space(.)=”Sign Up”]’) targets a button with the exact text “Sign Up.” The / / expression tells XPath to search through the entire HTML document. The button tells XPath to only look for button elements. The normalize-space(.)=”Sign Up” part is a function that trims the leading and trailing white space from the string and replaces sequences of white space characters with a single space. This can be very helpful when dealing with unpredictable formatting.

Text Selectors

Text selectors allow you to target elements based on their displayed text. This can be extremely useful for testing from a user’s perspective, as users often interact with webpages based on the text they see.

For example, with the command page.click(‘text=”Sign Up”‘), Playwright would look for an element that displays the text “Sign Up” and click on it. This works for buttons, links, divs, spans, and other elements that might contain visible text.

Attribute Selectors

Attribute selectors target elements based on their HTML attributes. This can be useful when an element does not have a unique class or ID or when its position in the HTML document isn’t fixed.

For instance, the command page.click(‘[disabled]’) targets an element with the disabled attribute, regardless of its type, class, or ID. You can also target specific values of attributes — for example, page.click(‘[value=”Submit”]’) would click an element with a value attribute of Submit.

Working With Composite Selectors

When dealing with complex web pages, developers often encounter situations where elements cannot be reliably targeted by a single type of selector. This is where composite selectors come into play. They allow you to chain together different selector types, thereby creating an element selection process that is both more precise and robust.

Composite selectors in Playwright are a combination of different types of selectors brought together using the >> operator. This operator denotes that the element being targeted must match all of the combined selectors in the sequence.

Let’s dissect this given example: page.click(‘css=.container >> text=Submit’). In this command:

• css=.container uses a CSS selector to target an element with the class container. CSS selectors are often employed due to their ubiquitous presence in web development, their precision, and their readability.
• >> is the operator that combines the selectors. It creates a relationship between the selectors, indicating that the text=Submit element should be a child (direct or indirect) of the .container element.
• text=Submit uses a text selector to target an element displaying the visible text “Submit.” This is an example of targeting elements from a user’s perspective since users often interact with elements based on visible text.

In a practical scenario, suppose you have multiple “Submit” buttons on a webpage, each within a different .container. The composite selector provides a way to interact with the specific “Submit” button within the intended .container.

While powerful, composite selectors also call for careful consideration. Their precision hinges on the structure of the webpage; any changes to the structure may require updates to the composite selectors. As such, although they provide more accurate element targeting, they can potentially increase maintenance if the webpage structure is subject to frequent changes.

Custom Selectors In Playwright

Playwright is incredibly flexible, providing various built-in selectors to suit the most common use cases. However, there will always be unique or complex scenarios that necessitate a more customized approach. For such cases, Playwright offers the capability to design custom selectors, giving developers the freedom to tailor element targeting strategies to their specific needs.

Custom selectors can be especially beneficial when dealing with custom web components or unconventional DOM structures. For instance, suppose you’re interacting with a webpage that employs a custom web component that carries properties unique to the component. You could create a custom selector that specifically targets elements based on these component-specific properties.

Here’s a conceptual example to illustrate this.

Assume you have a custom web component <my-component> with a unique property data-state:

<my-component data-state=”active”>…</my-component>

To target this active state, you could create a custom selector in Playwright that understands this data-state attribute:

 <span class="pre--content">playwright.<span class="hljs-property">selectors</span>.<span class="hljs-title function_">register</span>(<span class="hljs-string">'mySelector'</span>, {
 <span class="hljs-comment">// The create method is used to make the custom selector.</span>
 <span class="hljs-title function_">create</span>(<span class="hljs-params">root, target</span>) {
 <span class="hljs-keyword">return</span> root.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">`[data-state=<span class="hljs-subst">${target}</span>]`</span>);
 },
});</span>

You can then use this custom selector in your Playwright commands:

await page.click(‘mySelector=active’);

This command would click on <my-component> only when data-state is “active.”

This ability to craft custom selectors amplifies Playwright’s versatility, allowing it to cater to specific application quirks and providing developers with precise control over how elements are selected and interacted with in their tests.

Best Practices For Using Selectors In Playwright

Selecting the right elements is key to successful automation in Playwright. Here are some distilled insights from my experience:

1. Opt for specificity over flexibility: Aim for selectors specific enough to identify targets but flexible enough to tolerate minor webpage changes. Overly precise selectors often break with small UI adjustments.

2. Use meaningful attributes: id, name, or data-testid are typically unique and consistent — your go-to choice for selectors. This helps in creating resilient test scripts.

3. Prioritize readability: Your code isn’t just for you; it’s for your team and the future you. Keep selectors intuitive and clear, supplementing with comments where necessary.

4. Use composite and custom selectors wisely: These are powerful tools for creating precise, context-aware selectors. Use them judiciously, though, as they could become a maintenance headache if overused or misused.

Conclusion

Mastering selectors in Playwright is about understanding and balancing their unique strengths. Specific but flexible selectors, meaningful attributes, readable code, and the wise use of composite and custom selectors are critical for effective automation. As you continue your journey with Playwright, these guidelines serve as a compass, helping you navigate the complex landscape of web automation. Remember, constant learning and adaptation are key to successful web testing with Playwright.

Join thousands of data leaders on the AI newsletter. Join over 80,000 subscribers and keep up to date with the latest developments in AI. From research to projects and ideas. If you are building an AI startup, an AI-related product, or a service, we invite you to consider becoming a sponsor.

Published via Towards AI