Playwright Java Tutorial: Web Automation Testing | Writing and running tests on Chrome, Firefox and Edge browsers

In the previous tutorial, we learnt about installation and setup of Playwright Java.

Playwright Java Tutorial: Web Automation Testing | Installation and Setup

In this blog, we will be discussing and learning the following points:

1. Writing the tests using Playwright Java
2. Running tests on Chrome, Firefox and Edge browsers
3. Running tests in headless mode using Chrome, Firefox and Edge browsers.
4. Slowing down the test execution

Writing tests

We will be automating the following test scenario using Playwright Java

Test Scenario

1. Open the LambdaTest ECommerce Playground website

2. Verify that that the Home page title is equal to “Your Store”

GitHub repository link

Implementation of the test scenario for running test in headless mode using Chrome

The following test method named testOnChromeHeadless() is written inside the PlaywrightDemoTests class in the project will be used to implement the test scenario and run the test in headless mode using Chrome browser.

By default, all the tests in Playwright run in headless mode unless specified to run in headed mode.

FileName: PlaywrightDemoTests.java

    @Test
    public void testOnChromeHeadless() {

        final Playwright playwright = Playwright.create();
        final Browser browser = playwright.chromium().launch();
        final Page page = browser.newPage();
        page.navigate("https://ecommerce-playground.lambdatest.io/");
        final String pageTitle = page.title();
        assertEquals(pageTitle, "Your Store");
        browser.close();
    }

The first line in the test will launch new Playwright driver process. Next, it will launch the Chromium instance of the browser and return its instance. The page event on browser contexts can be used to get new pages that are created in the context.

        final Playwright playwright = Playwright.create();
        final Browser browser = playwright.chromium().launch();
        final Page page = browser.newPage();

Using page instance we can navigate to the LambdaTest Selenium Playground website. The title() method from Page interface of Playwright is used for getting the title of the page.

The value of the page title is saved to the String variable named pageTitle. Further assertEquals() method of the TestNG library is used to perform assertion and check that the page title is equal to the text “Your Store”.

        page.navigate("https://ecommerce-playground.lambdatest.io/");
        final String pageTitle = page.title();
        assertEquals(pageTitle, "Your Store");

Finally, the close() method is called that closes the browser and all of its open pages allowing us to gracefully complete and exit the test.

browser.close();

Test Execution

Let’s create a testng.xml file to run the test. It will help us in executing the other tests as well by just adding the test method name to the in the methods section in the file.

FileName: testng-browsertest.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="LambdaTest ecommerce playground website test suite">
    <test name="Web Automation Demo tests with Playwright">
        <classes>
            <class name="io.github.mfaisalkhatri.tests.PlaywrightDemoTests">
                <methods>
                    <include name="testOnChromeHeadless"/>
                </methods>
            </class>
        </classes>
</suite> <!-- Suite -->

Right click on the testng-browsertest.xml to run the test.

Screenshot of the test execution

When the tests are executed for the first time, Playwright downloads Chromium, Firefox and Webkit browsers into OS-specific Cache folders.

Following are the folder paths of the downloaded browsers in their respective Operating Systems:

• %USERPROFILE%\AppData\Local\ms-playwright on Windows
• ~/Library/Caches/ms-playwright on MacOS
• ~/.cache/ms-playwright on Linux

As I am running the test on MacOS machine the browser binaries are downloaded in to the ~/Library/Caches/ms-playwright folder.

By default, the tests are run in headless mode hence browser UI was not loaded.

In the next test example let’s run the test in headed mode on the Chrome browser using the same test scenario that we discussed earlier.

Implementation of the test scenario for running test in headed mode using Chrome browser

The testOnChrome() method in the PlaywrightDemoTests class will run the test in headed mode on Chrome browser. The tests can be run in headed mode using the LaunchOptions from BrowserType interface. The setHeadless() method can be used to turn the headless mode to off by setting its value to false.

FileName: PlaywrightDemoTests.java

    @Test
    public void testOnChrome() {

        final Playwright playwright = Playwright.create();
        final Browser browser = playwright.chromium()
              .launch(new BrowserType.LaunchOptions()
              .setHeadless(false)
              .setChannel("chrome"));
        final Page page = browser.newPage();
        page.navigate("https://ecommerce-playground.lambdatest.io/");
        final String pageTitle = page.title();
        assertEquals(pageTitle, "Your Store");
        browser.close();
    }

Next to launch the Chrome browser, setChannel() method is used for setting the browser distribution channel and the value chrome can be supplied in it. The following values are supported and can can be supplied in the setChannel() method :

• chrome
• chrome-beta
• chrome-dev
• chrome-canary
• msedge
• msedge-beta
• msedge-dev
• msedge-canary

Test Execution

Let’s add the testOnChrome() method to the testng.xml file and execute the testng-browsertest.xml by right clicking on it.

FileName: testng-browsertest.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="LambdaTest ecommerce playground website test suite">
    <test name="Web Automation Demo tests with Playwright">
        <classes>
            <class name="io.github.mfaisalkhatri.tests.PlaywrightDemoTests">
                <methods>
                    <include name="testOnChromeHeadless"/>
                    <include name="testOnChrome"/>
                </methods>
            </class>
        </classes>
</suite> <!-- Suite -->

Screenshot of test execution

The following screenshots of test execution shows that the tests were executed successfully in headed mode on Chrome browser:

Two tests were executed in this test run on Chrome browser, the first one ran in headless mode and other one ran in headed mode.

Let’s now learn how to execute the tests on Firefox browser in headless as well as headed mode.

Implementation of the test scenario for running test in headless and headed mode using Firefox browser

The following method testOnFirefoxHeadless() created within the PlaywrightDemoTests class will run the same test scenario in headless mode on Firefox browser. By default, all the tests in Playwright run in headless mode unless specified to run in headed mode.

FileName: PlaywrightDemoTests.java

    @Test
    public void testOnFirefoxHeadless() {
        final Playwright playwright = Playwright.create();
        final Browser browser = playwright.firefox().launch();
        final Page page = browser.newPage();
        page.navigate("https://ecommerce-playground.lambdatest.io/");
        final String pageTitle = page.title();
        assertEquals(pageTitle, "Your Store");
        browser.close();
    }

The following line in the method will help in running the firefox browser instance in headless mode:

final Browser browser = playwright.firefox().launch();

The following method testOnFirefox() created in the PlaywrightDemoTests class will run the test on Firefox browser in headed mode.

FileName: PlaywrightDemoTests.java

    @Test
    public void testOnFirefox() {
        final Playwright playwright = Playwright.create();
        final Browser browser = playwright.firefox()
              .launch(new BrowserType
              .LaunchOptions()
              .setHeadless(false));
        final Page page = browser.newPage();
        page.navigate("https://ecommerce-playground.lambdatest.io/");
        final String pageTitle = page.title();
        assertEquals(pageTitle, "Your Store");
        browser.close();

    }

We will be making use of the LaunchOptions() from BrowserType interface and headless mode can be turned off setting the setHeadless() method to false.

final Browser browser = playwright.firefox()
              .launch(new BrowserType
              .LaunchOptions()
              .setHeadless(false));

The rest of the test remains the same and no code changes are made to automate the steps of the test scenario.

Test Execution

We have the testng-browsertest.xml file already created, so let’s add the testOnFirefoxHeadless() and testOnFirefox() method in the xml file for executing the tests.

FileName: testng-browsertest.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="LambdaTest ecommerce playground website test suite">
    <test name="Web Automation Demo tests with Playwright">
        <classes>
            <class name="io.github.mfaisalkhatri.tests.PlaywrightDemoTests">
                <methods>
                    <include name="testOnChromeHeadless"/>
                    <include name="testOnChrome"/>
                    <include name="testOnFirefoxHeadless"/>
                    <include name="testOnFirefox"/>
                </methods>
            </class>
        </classes>
</suite> <!-- Suite -->

So, now when we execute the testng-browsertest.xml file, four tests should be executed, the first test running the test scenario on Chrome in headless mode, the second test running the test on Chrome browser in headed mode, third test running in headless mode on Firefox and fourth test running in headed mode on Firefox browser.

Implementation of the test scenario for running test in headed mode using MS-Edge browser

The testOnEdge() method created in the PlaywrightDemoTest class will run the test on Microsoft Edge browser. Microsoft Edge browser internally uses Chromium engine, as Playwright uses the Chromium browser for running tests in headless mode so there is no explicit need to run the test on Edge browser in headless mode.

FileName: PlaywrightDemoTests.java

    @Test
    public void testOnEdge() {
        final Playwright playwright = Playwright.create();
        final Browser browser = playwright.chromium().launch(new BrowserType
                .LaunchOptions()
                .setHeadless(false)
                .setChannel("msedge"));
            final Page page = browser.newPage();
            page.navigate("https://ecommerce-playground.lambdatest.io/");
            final String pageTitle = page.title();
            assertEquals(pageTitle, "Your Store");
            browser.close();
    }

The LaunchOptions() class from the BrowserType interface of Playwright can be used to set the browser distribution channel to “msedge” and set the headless mode to false to run the test in MS-Edge browser in headed mode.

final Browser browser = playwright.chromium().launch(new BrowserType
                .LaunchOptions()
                .setHeadless(false)
                .setChannel("msedge"));

Test Execution

We have the testng-browsertest.xml file already created, so let’s add the testOnEdge() method in the xml file for executing the tests.

FileName: testng-browsertest.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="LambdaTest ecommerce playground website test suite">
    <test name="Web Automation Demo tests with Playwright">
        <classes>
            <class name="io.github.mfaisalkhatri.tests.PlaywrightDemoTests">
                <methods>
                    <exclude name="testOnChromeHeadless"/>
                    <exclude name="testOnChrome"/>
                    <exclude name="testOnFirefoxHeadless"/>
                    <exclude name="testOnFirefox"/>
                    <include name="testOnEdge"/>
                </methods>
            </class>
        </classes>
</suite> <!-- Suite -->

Let’s exclude all the other previously added test and include only the testOnEdge test method, this way only one test will be executed and it will be on Edge browser.

Screenshot of the test execution

We can see as per the below screenshot, when the test was executed using testng.xml file, Edge browser opened successfully and the automated test steps were performed on it.

The following is the test result of the test execution from IntelliJ, that shows one test with test method named testOnEdge passing successfully.

Running the test in slow motion

There are cases where we need to run the tests in slow motion to understand how the tests are getting executed on the UI and it is performing the steps as expected.

It is also required in case of debugging the test to know the cause of failure or checkout the steps where exactly is the exception or error thrown.

Playwright provides the slowMo() method that helps us to run the tests in slow motion.

Syntax

slowMo(<milliseconds per operation>)

The following test method testOnChromeSlowMo() will run the test on Chrome browser in headed mode with slow motion of 2000 milliseconds.

FileName: PlaywrightDemoTests.java

    @Test
    public void testOnChromeSlowMo() {
        final Playwright playwright = Playwright.create();
        final Browser browser = playwright.chromium().launch(new BrowserType
            .LaunchOptions()
            .setHeadless(false)
            .setSlowMo(2000));
        final Page page = browser.newPage();
        page.navigate("https://ecommerce-playground.lambdatest.io/");
        final String pageTitle = page.title();
        assertEquals(pageTitle, "Your Store");
        browser.close();
    }

Test Execution

Let’s add the testOnChromeSlowMo() method in the testng-browsertest.xml file for executing the test and exclude all the previous tests so only this slow motion test gets executed.

FileName: testng-browsertest.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="LambdaTest ecommerce playground website test suite">
    <test name="Web Automation Demo tests with Playwright">
        <classes>
            <class name="io.github.mfaisalkhatri.tests.PlaywrightDemoTests">
                <methods>
                    <exclude name="testOnChromeHeadless"/>
                    <exclude name="testOnChrome"/>
                    <exclude name="testOnFirefoxHeadless"/>
                    <exclude name="testOnFirefox"/>
                    <exclude name="testOnEdge"/>
                    <include name="testOnChromeSlowMo"/>
                </methods>
            </class>
        </classes>
</suite> <!-- Suite -->

Screenshot of the test execution

Once the test is executed, it will delay the execution by 2 seconds(2000 milliseconds).

Conclusion

In this tutorial blog, we learnt about writing the web automation tests using Playwright Java. We created an instance of Playwright, then moved towards launching the Chrome, Firefox and Edge browsers.

We executed the tests in headless mode as well as in headed mode and finally also learnt about running the tests in slow motion.

Playwright is a good web automation framework with variety of rich features. In the next tutorial, we will be learning about using browser navigation actions like forward, back ,refresh, etc. using Playwright Java. So stay tuned to this space.

Happy Testing!!