Playwright with TestNG Integration

Understanding the Roles

Playwright: Provides APIs to interact with browsers, automate web applications, handle UI elements, and perform end-to-end testing.

TestNG: Provides a testing framework with annotations, test execution flow, grouping, parameterization, parallel execution, and reporting.

Why Integrate Playwright with TestNG?

To run Playwright tests in a structured test framework.
To leverage TestNG’s annotations like @BeforeSuite, @BeforeTest, @Test, @AfterTest, etc., which make setup and teardown of Playwright objects systematic.
To achieve parallel test execution across browsers or test cases using TestNG’s parallel execution support.
To generate detailed reports (HTML/XML) of test execution.
To allow data-driven testing with TestNG’s parameterization features.

Integration Flow

(1) Dependencies: Add required dependencies (Playwright for browser automation, TestNG for test framework).

(2) Base Setup:

Create a base test class where Playwright components (Browser, BrowserContext, Page) are initialized and cleaned up.
Use TestNG lifecycle annotations (@BeforeClass, @AfterClass) for setup/teardown.

(3) Test Structure:

Each TestNG test method (@Test) contains the actual Playwright steps (like navigating, clicking, assertions).
Tests can be grouped, prioritized, or parameterized through TestNG features.

(4) Parallel Execution:

TestNG XML configuration (testng.xml) can be used to define suites, parallel execution, and parameters.
This enables multiple browsers or test cases to run in parallel using Playwright’s independent BrowserContext.

(5) Reports & Logs:

TestNG automatically generates reports showing passed/failed/skipped test cases.
Logs can be captured to debug Playwright test failures.

Benefits

Separation of Concerns: Playwright handles automation, TestNG manages test orchestration.
Scalability: Easy to scale test execution by combining TestNG parallelism with Playwright’s multiple browser instances.
Maintainability: Test code is organized into test classes and methods, improving readability and reusability.
Integration: Can be easily plugged into CI/CD pipelines since both TestNG and Playwright are well-supported with Maven/Gradle and Jenkins.

To assert in Playwright with Java using TestNG, we need to:

Set up a Playwright project with Java.
Use TestNG as the testing framework.
Write assertions using TestNG's Assert class.
Use Playwright's Locator API to find elements and retrieve text/attributes for validation.

Website to be automated:

https://opensource-demo.orangehrmlive.com/web/index.php/auth/login

Step-by-step Explanation

1. Maven Dependencies

<dependencies>
  <!-- Playwright Java -->
  <dependency>
    <groupId>com.microsoft.playwright</groupId>
    <artifactId>playwright</artifactId>
    <version>1.44.0</version> <!-- or latest -->
  </dependency>

  <!-- TestNG -->
  <dependency>
    <groupId>org.testng</groupId>
    <artifactId>testng</artifactId>
    <version>7.8.0</version>
    <scope>test</scope>
  </dependency>
</dependencies>

2. Example: Playwright + TestNG Assertion Code

We'll test the title and login button visibility on OrangeHRM login page. below is the LoginPageTest class implemented by Playwright java and TestNG.

@BeforeClass annotation is used on setUp() to setup things like initialization of browser and launching the url.

@Test annotation is used below to check the title in first test case and submit button is visible or not, in second test case.

@AfterClass annotation is used to close browser and playwright objects.

import com.microsoft.playwright.*;
import org.testng.Assert;
import org.testng.annotations.*;

public class LoginPageTest {
    Playwright playwright;
    Browser browser;
    BrowserContext context;
    Page page;

    @BeforeClass
    public void setUp() {
        playwright = Playwright.create();
        browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
        context = browser.newContext();
        page = context.newPage();
        page.navigate("https://opensource-demo.orangehrmlive.com/web/index.php/auth/login");
    }

    @Test
    public void testTitle() {
        // Assertion using TestNG: Check if title contains "OrangeHRM"
        String title = page.title();
        Assert.assertTrue(title.contains("OrangeHRM"), "Title does not contain 'OrangeHRM'");
    }

    @Test
    public void testLoginButtonVisible() {
        // Check if login button is visible
        Locator loginButton = page.locator("button[type='submit']");
        Assert.assertTrue(loginButton.isVisible(), "Login button is not visible");
    }

    @Test
    public void testLoginButtonText() {
        // Check login button text
        Locator loginButton = page.locator("button[type='submit']");
        String buttonText = loginButton.textContent().trim();
        Assert.assertEquals(buttonText, "Login", "Login button text mismatch");
    }

    @AfterClass
    public void tearDown() {
        browser.close();
        playwright.close();
    }
}

What We are Asserting:

Assertion	What it Validates
Assert.assertTrue(condition)	Validates a condition is true
Assert.assertEquals(actual, expected)	Compares actual vs expected values
loginButton.isVisible()	Checks if the button is rendered and visible
title.contains("OrangeHRM")	Checks if title contains expected text

Useful Playwright Methods for Assertion

Playwright Method	Use
page.title()	Get page title
locator.textContent()	Get inner text of element
locator.isVisible()	Check if element is visible
locator.getAttribute("attr")	Get attribute value

At a Glance:

Use TestNG's Assert class for assertions

Fetch values using Playwright (title, text, attributes).

Structure tests with @Test, @BeforeClass, @AfterClass.

Combine the power of Playwright automation and TestNG assertions for full UI validation.