Understanding PlayWright with Examples and Workflows

Playwright is an open-source automation library developed by Microsoft for web browser testing and automation. It is very similar to Selenium with some additional features, resulting in market demand. In this article, we will discuss understanding PlayWright, and in a follow-up article, we will discuss its comparison with Selenium.

Features of PlayWright

Let's start with the features of PlayWright explained in the mindMap below

• Cross-Browser Testing: Playwright supports multiple browsers from a single framework for cross-browser testing.
• Recording and Playback: Playwright allows you to record your browser interactions and convert them into test scripts.
• API Testing: It also supports API testing, allowing you to test and verify your backend services along with your frontend.
• Network Interception: You can intercept and modify network requests and responses, useful for testing scenarios involving API calls or third-party services.
• Auto-Waiting: Automatically waits for elements to be ready before performing actions, reducing test flakiness.
• Multiple Contexts: It allows the creation of multiple browser contexts in a single instance, which helps in simulating different user sessions or testing multi-user scenarios.
• Language Support: Supports multiple programming languages, including JavaScript, TypeScript, Python, Java, and C#.
• Powerful Selectors: Playwright supports CSS, XPath, and a wide range of other locators.
• Screenshots and Videos: You can capture screenshots or record videos of your test sessions, which is useful for debugging and documentation.

Setting up PlayWright with Java

Playwright can be added as a dependency in the Maven project as shown below. In case using TestNG too, Also add the TestNG dependency.

    <dependency>
                <groupId>com.microsoft.playwright</groupId>
                <artifactId>playwright</artifactId>
                <version>1.45.0</version>
    </dependency>
    <dependency>
              <groupId>org.testng</groupId>
              <artifactId>testng</artifactId>
              <version>7.4.0</version>
              <scope>test</scope>
</dependency>        

Once we have added the dependencies and built the project, we are ready to go with the first test in Playwright.

Understanding PlayWright Flow

Below mindMap shows the flow of the playwright tool. We will discuss this in detail in this section.

Initialize PlayWright

//This creates a playwright instance, which provides access to browser types 

try (Playwright playwright = Playwright.create()) {        

Launch Browser and Set Launch Options

// This launches a new instance of the Chromium browser and set browser options

BrowserType.LaunchOptions options = new BrowserType.LaunchOptions()
                    .setHeadless(false)
                    .setArgs(Arrays.asList("--start-maximized"))
                    .setSlowMo(50)
                    .setUserDataDir(Paths.get("/path to test data"));
Browser browser = playwright.chromium().launch(options);        

Define multiple or a single context

// This creates a new browser context. cookies, local storage, and other session data are not shared between contexts

BrowserContext context = browser.newContext();

//example of multiple context - useful for parallel testing

            BrowserContext context1 = browser.newContext();
            Page page1 = context1.newPage();
            page1.navigate("https://example.com");
            System.out.println("Context 1 Title: " + page1.title());

            BrowserContext context2 = browser.newContext();
            Page page2 = context2.newPage();
            page2.navigate("https://example.com");
            System.out.println("Context 2 Title: " + page2.title());

            page1.click("text=We are in context 1");
            page2.click("text=We are in context 2");        

Open Page

//This opens a new Page (tab) in the context
Page page = context.newPage();
page.navigate("https://example.com");        

Interact With Elements on the Page

       
            // Click an element
            page.click("text=Playwright");

            // 2. Fill out a form
            page.fill("#username", "myusername");
            page.fill("#password", "mypassword");
            page.click("button[type='submit']");

            // Extract text from an element
            String headingText = page.textContent("h3");

            // Check if an element is visible
            boolean isElementVisible = page.isVisible("text=Playwright");

            // Wait for an element to be visible
            page.waitForSelector("text=Playwright");

            // Select from a dropdown
            page.selectOption("select#dropdown", "value1");

            // Check a checkbox
            page.check("input[type='checkbox']");

            // Uncheck a checkbox
            page.uncheck("input[type='checkbox']");

            // Hover over an element
            page.hover("text=Playwright");

            // Type into an input field
            page.type("input[name='search']", "Playwright");
        

Different Types of Locators

// 1. CSS Selector
            Locator cssLocator = page.locator("css=button.submit");

// 2. Text Selector
            Locator textLocator = page.locator("text=Playwright");
           
// 3. XPath Selector
            Locator xpathLocator = page.locator("xpath=//a[text()='Playwright']");

// 4. ID Selector
            Locator idLocator = page.locator("#header");

// 5. Class Selector
            Locator classLocator = page.locator(".someClass");

// 6. Role Selector
            Locator roleLocator = page.locator("role=button[name='Play']");

// 7. Attribute Selector
            Locator attributeLocator = page.locator("[data-test='example']");

// 8. Chaining Locators
            Locator parentLocator = page.locator("#parentId");
            Locator childLocator = parentLocator.locator(".childClass");

// 9. Nth Element Selector
            Locator nthElementLocator = page.locator("css=ul#list > li >> nth=1");


// 10. Combination of Selectors
            Locator comboLocator = page.locator("css=div.container >> text='ExText'");        

Please see Implementing PlayWright in TestNG Framework like Selenium for more details on page Object Model and usage in the TestNG framework.