Understanding Selectors in Playwright

Understanding Selectors in Playwright

Playwright offers a powerful and flexible selector system that enables testers to interact with any element on a webpage, mimicking human actions with precision. Selectors in Playwright can be used to click buttons, type into input fields, extract text, and much more. This guide explores the different types of selectors available in Playwright and provides tips for using them effectively.

Types of Selectors in Playwright

Playwright supports a wide range of selector engines, each designed for different scenarios:

1. CSS Selectors

CSS selectors are the most common type of selectors used for styling webpages and can also be used to locate elements in Playwright. They are versatile and can target elements by tags, classes, IDs, attributes, and relationships between elements.

Example:

await page.click('button.primary'); 
// Clicks a button with the class "primary".

2. Text Selectors

Text selectors allow you to target elements based on their text content. This is particularly useful for elements like buttons and links, where the visible text is the most intuitive way to identify them.

Example:

await page.click('text="Login"'); // Clicks an element containing the text "Login".

3. XPath Selectors

XPath selectors provide a way to navigate through elements and attributes in an XML document. While more complex, they are powerful for selecting elements with specific attributes or elements in a particular hierarchy.

Example:

await page.click('//button[@name="submit"]'); 

4. ID Selectors

ID selectors target elements based on their unique ID attribute. They are straightforward and efficient, especially for elements with a unique identifier.

Example:

await page.click('#submit-button'); // Clicks an element with the ID "submit-button".

Accessing Elements within Shadow DOM

When automating or testing Salesforce Lightning applications with Playwright, it’s crucial to interact with elements within the Shadow DOM. Playwright provides features to pierce through the Shadow DOM, allowing testers to select and interact with elements that are not directly accessible due to encapsulation.

Here are key points to consider:

1. Selector Engine: Playwright’s selector engine supports selecting elements inside Shadow DOM using the css selector. You can use the »> combinator to pierce through Shadow roots and access elements within Shadow DOM trees.
2. Automatic Waiting: Playwright automatically waits for elements to be ready before performing actions on them, which is beneficial when interacting with dynamically loaded components in Salesforce Lightning.
3. Evaluation Functions: Playwright allows the execution of JavaScript within the page context. This can be particularly useful for interacting with components that are deeply nested within Shadow DOM trees, as you can execute custom scripts to interact with these elements direct For Salesforce Testautomation it is crucial to understand the concept of Shadow Dom.

To access elements within the Shadow DOM of a Salesforce Lightning component, you can use the browser’s developer tools or scripting methods. However, when it comes to automated testing with tools like Playwright, you need to use specific strategies to interact with these encapsulated elements.

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://your-salesforce-app.com');

    // Access the Shadow DOM element
    const greeting = await page.$eval('example-component >>> .greeting h1', (el) => el.textContent);

    console.log(greeting); // Outputs: Hello, World!

    await browser.close();
})();

We will talk about this topic extensively and at the end of this course you have a good understanding accessing elements within the Shadow DOM of a Salesforce Lightning component, you can use the browser’s developer tools or scripting methods. However, when it comes to automated testing with tools like Playwright, you need to use specific strategies to interact with these encapsulated elements.

Best Practices for Using Selectors

• Use the most stable and descriptive selector: Prefer selectors that are less likely to change, such as IDs for unique elements or text for buttons and links that are unlikely to change their labels.
• Avoid overly specific selectors: Overly specific selectors can break with minor changes to the webpage structure. Aim for a balance between specificity and resilience.
• Leverage Playwright’s auto-wait feature: Playwright automatically waits for elements to be ready before performing actions, reducing the need for manual waits and making tests more robust.
• Combine selectors for precision: When necessary, combine different types of selectors to target elements more precisely without relying on brittle structures.