Forem: Terence Pan

Set up Cucumber reports with screenshots

Terence Pan — Tue, 05 Dec 2023 19:04:01 +0000

Maven setup Surefire plugin

Below pom.xml configuration will generate a html and json report. The reports will have a screenshot when tests fail.

    <build>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.11.0</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>${maven.surefire.version}</version>
                <configuration>
                    <properties>
                        <configurationParameters>
                            cucumber.plugin=pretty,html:target/site/TestRun.html,json:target/site/TestRun.json
                            cucumber.publish.quiet=true
                            cucumber.publish.enabled=false
                        </configurationParameters>
                    </properties>
                </configuration>
            </plugin>
        </plugins>
    </build>

Cucumber After method

    @After
    public void afterEach(Scenario scenario){
        if(scenario.isFailed()){
            final byte[] screenshot = page.screenshot(new Page.ScreenshotOptions()
                    .setPath(Paths.get("screenshot.png")));
            scenario.attach(screenshot, "image/png", scenario.getName());
        }
        browserContext.close();
    }

Here, we are checking if the scenario is failed and if so, it will attach a screenshot.

Intentionally create test failure

  Scenario Outline: User is able to request a Demo
    Given User navigates to PHPTRAVELS Demo Page
    When User fills in Demo Request Form <firstName>, <lastName>, <businessName>, <email>
    When User calculates and fills wrong result
    When User clicks submit
    Then Verify thank you text
    Examples:
      | firstName | lastName | businessName | email               |
      | "ABC"     | "DEF"    | "Main Inc."  | "whatever@main.com" |

Here on the register.feature file, we intentionally filled out the wrong result causing the test to fail.

run: mvn clean install

check report path as noted in pom.xml: target/site/TestRun.html

As always code is on available on Github

Deploy Spring Boot App to Render

Terence Pan — Wed, 30 Aug 2023 18:25:36 +0000

Render.com

Render is an alternative to Heroku with a free tier. We can deploy a Spring Boot app here with a Dockerfile.

Dockerfile contents

(place at root of repo, change according to artifact name, version and jdk versions)

#
# Build stage
#
FROM maven:3.8.3-openjdk-17 AS build
COPY . .
RUN mvn clean install

#
# Package stage
#
FROM eclipse-temurin:17-jdk
COPY --from=build /target/demo-0.0.1-SNAPSHOT.jar demo.jar
# ENV PORT=8080
EXPOSE 8080
ENTRYPOINT ["java","-jar","demo.jar"]

Render instructions

New -> New Web Service -> Connect Github or Gitlab -> Pick Docker runtime -> Create Web Service

Why use Spring Constructor Dependency Injection instead of @Autowired

Terence Pan — Tue, 04 Oct 2022 22:58:46 +0000

Autowired

Most Spring developers I have seen are still using the @Autowired syntax for injecting dependencies into their classes. This is not recommended anymore and Intellij even gives you a warning when you try to use it.

Today we'll go over one reason why not to use dependency injection in this manner. I have also seen this cause a production incident as well before. Having @Autowired on the field allows the field to be potentially mutable and harder to test. Having the injected field be mutable can interfere with how Spring proxies these injected classes through the use of the CGLIB library.

Set up DTO

In the test project we are setting up a DTO that is supposed to be Session Scoped to the user. So each user should only see the instance of the bean relating their session.

UserDataDto.java class:

import org.springframework.stereotype.Component;
import org.springframework.web.context.annotation.SessionScope;

@Component
@SessionScope
public class UserDataDto {
    private String userName;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

Set up Spring Security config

We also have some Spring Security set up as well to initialize both user instances we are using for testing here.

SecurityConfig.class:

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public InMemoryUserDetailsManager userDetailsService(PasswordEncoder passwordEncoder) {
        UserDetails user1 = User.withUsername("user1")
                .password(passwordEncoder.encode("password"))
                .roles("ADMIN")
                .build();
        UserDetails user2 = User.withUsername("user2")
                .password(passwordEncoder.encode("password"))
                .roles("ADMIN")
                .build();
        return new InMemoryUserDetailsManager(user1, user2);
    }

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.csrf().disable()
                .httpBasic()
                .and()
                .authorizeRequests()
                .antMatchers("/**")
                .hasRole("ADMIN")
                .anyRequest()
                .authenticated();
        return http.build();
    }

    @Bean
    public PasswordEncoder passwordEncoder()
    {
        return new BCryptPasswordEncoder();
    }
}

Set up Controller class

And finally here's the controller class.
UserController.class:

@RestController("/")
public class UserController {
    @Autowired
    UserDataDto userDataDto;

    @PostMapping("/saveUserName")
    public void saveUserName(@RequestBody String userName){
        userDataDto.setUserName(userName);
    }

    @PostMapping("/saveUserNameReplaceInstance")
    public void saveUserNameReplaceInstance(@RequestBody String userName){
        UserDataDto userDataDto = new UserDataDto();
        userDataDto.setUserName(userName);
        this.userDataDto = userDataDto;
    }

    @GetMapping("/getUserName")
    public String getUserName(){
        return userDataDto.getUserName();
    }
}

Test intended effect

Ok now let's run the Spring Boot application and get started with testing!
I will use Postman to POST to the /saveUserName endpoint with the user1

And now to use a separate Chrome incognito window to try to GET from the /getUserName endpoint with the user2. Nothing shows, good!

Overwrite Session Scope bean into Singleton

Now lets intentionally cause a problem with a new endpoint /saveUserNameReplaceInstance that will replace the Autowired bean.

    @PostMapping("/saveUserNameReplaceInstance")
    public void saveUserNameReplaceInstance(@RequestBody String userName){
        UserDataDto userDataDto = new UserDataDto();
        userDataDto.setUserName(userName);
        this.userDataDto = userDataDto;
    }

This time we will send the same thing through Postman using the new endpoint with user1

And in Chrome with user2 I now see user1's data!

Oh NO!! Big problems here, we essentially turned a SessionScope bean into a singleton that is shared between all instances!

Constructor Injection

Now how does constructor injection prevent this? Intellij will refactor Autowired code for you automagically if you click on the @Autowired annotation, hit Alt-Enter on windows and click Create constructor.

But for convenience I did this in another class.
ConstructorInjectionController.java:

@RestController
public class ConstructorInjectionController {
    final
    UserDataDto userDataDto;

    public ConstructorInjectionController(UserDataDto userDataDto) {
        this.userDataDto = userDataDto;
    }

    @PostMapping("/saveUserNameCi")
    public void saveUserName(@RequestBody String userName){
        userDataDto.setUserName(userName);
    }

    @PostMapping("/saveUserNameReplaceInstanceCi")
    public void saveUserNameReplaceInstance(@RequestBody String userName){
        UserDataDto userDataDto = new UserDataDto();
        userDataDto.setUserName(userName);
        //this.userDataDto = userDataDto;
    }

    @GetMapping("/getUserNameCi")
    public String getUserName(){
        return userDataDto.getUserName();
    }
}

try to uncomment the line with the mapping saveUserNameReplaceInstanceCi and the IDE will prevent you from causing a huge mistake. This allows you to declare the injected field as final and immutable after instantiation of the controller class.

As always code is on Github

Playwright with Cucumber/JUnit 5 - JUnit 5 test suite and maven clean install

Terence Pan — Mon, 03 Oct 2022 16:00:02 +0000

JUnit 5 Test Suite

In previous JUnit versions there was the TestRunner classes to run tests.

In JUnit5, this is now done through Test Suites. If you followed the other posts in the series and now tried to run the maven command: mvn clean install and find out tests aren't run at all, this might be why. Maven install with the Surefire plug in will look for test classes matching the patterns:
-"/Test*.java" - includes all of its subdirectories and all Java filenames that start with "Test".
-"/Test.java" - includes all of its subdirectories and all Java filenames that end with "Test".
-"/*Tests.java" - includes all of its subdirectories and all Java filenames that end with "Tests".
-"*/*TestCase.java" - includes all of its subdirectories and all Java filenames that end with "TestCase".

To include support for JUnit5 Test suites, pom.xml would need the junit-platform-suite dependency:

        <dependency>
            <groupId>org.junit.platform</groupId>
            <artifactId>junit-platform-suite</artifactId>
            <scope>test</scope>
        </dependency>

If you need to support other class names that have to be matched aside from the above, just include them in the Surefire configuration in your pom.xml such as below:

        <configuration>
          <includes>
            <include>example.java</include>
            <include>**/*IT.java</include>
            <include>**/*EndToEnd.java</include>
          </includes>
        </configuration>

In my example I will be creating a test suite named DemoRequestTests. All we have to do is include annotations here:

@suite: JUnit5 test suite class
@SuiteDisplayName("Test Use Cases"): name of the test suite is Test Use Cases
@IncludeEngines("cucumber"): run this test suite using Cucumber
@SelectClasspathResource("Features"): where the feature files are located, in this case under test/resources/Features
@ConfigurationParameter: not used but if your steps are located in a directory that's not automatically picked up by the cucumber engine, then you will want to set the package path to your stepdefinition glue classes.

Now you can run mvn clean install and any test suites you created will run automatically

Code for DemoRequestTests.java

package io.tpan.suites;

import org.junit.platform.suite.api.*;

import static io.cucumber.junit.platform.engine.Constants.GLUE_PROPERTY_NAME;

@Suite
@SuiteDisplayName("Test Use Cases")
@IncludeEngines("cucumber")
@SelectClasspathResource("Features")
//@ConfigurationParameter(key = GLUE_PROPERTY_NAME, value = "steps")
public class DemoRequestTests {
}

As always code is on available on Github

Playwright with Cucumber/JUnit 5 - @BeforeAll @AfterAll @Before @After

Terence Pan — Mon, 03 Oct 2022 00:27:34 +0000

@BeforeAll @AfterAll @Before @After

In the TestContext class we have a method annotated with @BeforeAll, this method will be called before any of the tests are run. These are things we want to do that are resource and time intensive and only want to do once. In this case we are initializing Playwright and the Browser classes on the computer to set up the framework and the browser.

    @BeforeAll
    public static void beforeAll(){
        playwright = Playwright.create();
        browser = playwright.chromium().launch(new BrowserType.LaunchOptions() // or firefox, webkit
                .setHeadless(false)
                .setSlowMo(100));
    }

Method marked as @AfterAll is called after all the tests are run, and in this case we would like to close the Browser and Playwright so that they do not continue to use up resources.

    @AfterAll
    public static void afterAll(){
        browser.close();
        playwright.close();
    }

Method marked as @Before is called before every test. In this case we want to open a new browser context for each test. Browser Contexts provide a way to operate multiple independent browser sessions. A page is a session in a browser context and we are creating one for each test.

    @Before
    public void createContextAndPage(){
        browserContext = browser.newContext();
        page = browserContext.newPage();
    }

Method marked as @After is called after every test. In this case we want to close the browser context after each test.

    @After
    public void closeContext(){
        browserContext.close();
    }

As always code is on available on Github

Playwright with Cucumber/JUnit 5 - Dependency Injection with PicoContainer

Terence Pan — Mon, 03 Oct 2022 00:25:35 +0000

Dependency Injection

This project uses dependency injection to put the instance of TestContext into the step definition class. In a larger test project you would have multiple step definitions and you want an easy way to create common instances of things like the Playwright instance and BrowserContext. This also allows you to share data between steps in the same scenario like when we get and set the alert text.

This is implemented by including the maven dependency for pico-container earlier in the series and injecting this class through the Constructor of the step classes needing this class.

Constructor code in DemoSteps.java:

public DemoSteps(TestContext testContext) {
        this.testContext = testContext;
        this.browser = testContext.getBrowser();
    }

Code using dependency injection to store alert text between steps in the same scenario:

    @When("User clicks submit")
    public void userClicksSubmit() {
        DemoPage demoPage = new DemoPage(page);
        String alertText = demoPage.clickSubmit();
        testContext.setAlertText(alertText);
    }

    @Then("Verify alert {string}")
    public void verifyAlertToFillInResultIsShown(String alertText) {
        Assertions.assertEquals(alertText, testContext.getAlertText());
    }

Full TestContext.java class

package io.tpan.steps;

import com.microsoft.playwright.*;
import io.cucumber.java.AfterAll;
import io.cucumber.java.BeforeAll;

public class TestContext {

    protected static Playwright playwright;

    protected static Browser browser;

    protected BrowserContext browserContext;

    protected Page page;

    @BeforeAll
    public static void beforeAll(){
        playwright = Playwright.create();
        browser = playwright.chromium().launch(new BrowserType.LaunchOptions() // or firefox, webkit
                .setHeadless(false)
                .setSlowMo(100));
    }

    @AfterAll
    public static void afterAll(){
        browser.close();
        playwright.close();
    }

    public Browser getBrowser() {
        return browser;
    }

    String alertText;

    public String getAlertText() {
        return alertText;
    }

    public void setAlertText(String alertText) {
        this.alertText = alertText;
    }
}

As always code is on available on Github

Playwright with Cucumber/JUnit 5 - Page Object

Terence Pan — Mon, 03 Oct 2022 00:14:08 +0000

Page Object

In Page Object Model for UI testing, you organize pages into their own classes.

Page field here represents the browser session we will use to grab page elements with. We also will pass page from the step to the page object when we initialize it through the Constructor.

The page elements are defined as fields and the constructor initializes those fields.
The below block represents the input for the first name field. Note there is not an id, but we can use the name attribute to find it.

<input type="text" name="first_name" class="first_name input mb1" placeholder="First Name">

In the constructor we can use the name attribute of the element to locate it. If id is not available, then try to use other easy attributes to locate, otherwise you may have to resort to xpath.

this.firstName = page.locator("[name='first_name']");

We also have methods that the step definitions can call to perform actions through Playwright. The method below will navigate to the page the page object represents.

public void navigate(){
        page.navigate("https://phptravels.com/demo");
    }

java
The fillRegistrationInfo method will fill in the first name, last name, business name and email fields.

public void fillRegistrationInfo(String firstName, String lastName, String businessName, String email){
        this.firstName.fill(firstName);
        this.lastName.fill(lastName);
        this.businessName.fill(businessName);
        this.email.fill(email);
    }

Complete DemoPage.java class

package io.tpan.pages;

import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import io.tpan.steps.TestContext;

public class DemoPage {

    private final Page page;

    private final Locator firstName;

    private final Locator lastName;

    private final Locator businessName;

    private final Locator email;

    private final Locator submit;

    private final Locator result;

    private final Locator numberOne;

    private final Locator numberTwo;

    public DemoPage(Page page) {
        this.page = page;
        this.firstName = page.locator("[name='first_name']");
        this.lastName = page.locator("[name='last_name']");
        this.businessName = page.locator("[name='business_name']");
        this.email = page.locator("[name='email']");
        this.submit = page.locator("id=demo");
        this.result = page.locator("id=number");
        this.numberOne = page.locator("id=numb1");
        this.numberTwo = page.locator("id=numb2");
    }

    public void navigate(){
        page.navigate("https://phptravels.com/demo");
    }

    public void fillRegistrationInfo(String firstName, String lastName, String businessName, String email){
        this.firstName.fill(firstName);
        this.lastName.fill(lastName);
        this.businessName.fill(businessName);
        this.email.fill(email);
    }

    public void fillResult(){
        int num1 = Integer.parseInt(numberOne.textContent());
        int num2 = Integer.parseInt(numberTwo.textContent());
        result.fill(String.valueOf(num1 + num2));
    }

    public void fillWrongResult(){
        int num1 = Integer.parseInt(numberOne.textContent());
        int num2 = Integer.parseInt(numberTwo.textContent());
        result.fill(String.valueOf(num1 + num2 + 1));
    }


    public String clickSubmit(){
        final String[] message = new String[1];
        page.onDialog(dialog -> {
            message[0] = dialog.message();
            dialog.accept();
        });
        submit.click();
        return message[0];
    }
}

As always code is on available on Github

Playwright with Cucumber/JUnit 5 - Step Definition

Terence Pan — Sun, 02 Oct 2022 23:53:16 +0000

Step Definition

The Step Definition file is where you create steps that map to the Gherkin steps in the feature file. In Java, I am using the annotation method for mapping the steps. There is also a Java 8 Lambda style syntax which I am not covering here.

When Given User navigates to PHPTRAVELS Demo Page is called, userNavigatesToPHPTRAVELSDemoPage method is called and the browser will navigate to the page to be tested.

    @Given("User navigates to PHPTRAVELS Demo Page")
    public void userNavigatesToPHPTRAVELSDemoPage() {
        DemoPage demoPage = new DemoPage(page);
        demoPage.navigate();
    }

When the step When User clicks submit is run, the method userClicksSubmit is called, which in this case clicks the submit button and stores the alert text for later verification if it pops up. This data state storing uses dependency injection which we will cover later in the series.

    @When("User clicks submit")
    public void userClicksSubmit() {
        DemoPage demoPage = new DemoPage(page);
        String alertText = demoPage.clickSubmit();
        testContext.setAlertText(alertText);
    }

The next step is a Then that can be called to verify the alert text if it shows up. We are using JUnit5 Assertions.assertEquals method to check to make sure alert text is as expected. The first argument is the expected String and the second argument is the actual displayed String.

    @Then("Verify alert {string}")
    public void verifyAlertToFillInResultIsShown(String alertText) {
        Assertions.assertEquals(alertText, testContext.getAlertText());
    }

Full DemoSteps.java code:

package io.tpan.steps;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import io.cucumber.java.After;
import io.cucumber.java.Before;
import io.cucumber.java.en.Given;
import io.cucumber.java.en.Then;
import io.cucumber.java.en.When;
import io.tpan.pages.DemoPage;
import org.junit.jupiter.api.Assertions;

public class DemoSteps {
    private final TestContext testContext;
    private final Browser browser;

    private BrowserContext browserContext;

    private Page page;

    public DemoSteps(TestContext testContext) {
        this.testContext = testContext;
        this.browser = testContext.getBrowser();
    }

    @Before
    public void createContextAndPage(){
        browserContext = browser.newContext();
        page = browserContext.newPage();
    }

    @After
    public void closeContext(){
        browserContext.close();
    }

    @Given("User navigates to PHPTRAVELS Demo Page")
    public void userNavigatesToPHPTRAVELSDemoPage() {
        DemoPage demoPage = new DemoPage(page);
        demoPage.navigate();
    }

    @When("User fills in Demo Request Form {string}, {string}, {string}, {string}")
    public void userFillsInDemoRequestForm(String firstName, String lastName, String businessName, String email) {
        DemoPage demoPage = new DemoPage(page);
        demoPage.fillRegistrationInfo(firstName, lastName, businessName, email);
    }

    @Then("Verify thank you text")
    public void verifyThis() {
        Locator thankYouText = page.locator("text=' Thank you!'");
        thankYouText.waitFor();
        Locator completionText = page.locator("text='We have sent your demo credentials to your email please check your email to test demo website. if message not found inbox please check spam folder'");
        Assertions.assertTrue(completionText.isVisible());
    }

    @When("User calculates and fills result")
    public void userCalculatesAndFillsResult() {
        DemoPage demoPage = new DemoPage(page);
        demoPage.fillResult();
    }

    @When("User calculates and fills wrong result")
    public void userCalculatesAndFillsWrongResult() {
        DemoPage demoPage = new DemoPage(page);
        demoPage.fillWrongResult();
    }

    @When("User clicks submit")
    public void userClicksSubmit() {
        DemoPage demoPage = new DemoPage(page);
        String alertText = demoPage.clickSubmit();
        testContext.setAlertText(alertText);
    }

    @Then("Verify alert {string}")
    public void verifyAlertToFillInResultIsShown(String alertText) {
        Assertions.assertEquals(alertText, testContext.getAlertText());
    }
}

As always code is on available on Github

Playwright with Cucumber/JUnit 5 - Feature File

Terence Pan — Sun, 02 Oct 2022 23:48:12 +0000

Feature File

Cucumber steps are actions that a user can be imagined to take. Given is what actions are used to set up the test. When is what actions are taken to do the testing. Then is what result you want to see. For the 3rd example, we are intentionally filling out the form with the wrong result and expecting a certain error message to show up.

Cucumber allows annotations to tag what grouping you want your tests to belong to. This allows easier searching when you generate your reports later on.

Scenario outlines allow the same scenario to be run multiple times using the Examples section as a dataset.

In the below example we are testing a happy path. The user starts off navigating to the page using the Given step. The user then fills in the form with the When step. The site requires the user to make a calculation to prove they are not a robot so we calculate it, fill in the sum and hit submit. These are implemented with When steps. The Then step is to verify the submission was successful.

Feature: Register for Demo Request
  @HappyPath
  Scenario Outline: User is able to request a Demo
    Given User navigates to PHPTRAVELS Demo Page
    When User fills in Demo Request Form <firstName>, <lastName>, <businessName>, <email>
    When User calculates and fills result
    When User clicks submit
    Then Verify thank you text
    Examples:
      | firstName | lastName | businessName | email               |
      | "ABC"     | "DEF"    | "Main Inc."  | "whatever@main.com" |

Now for the below step, it's almost the exact same except we are intentionally not filling out the calculation. In this case we are testing the page's validation. The Then step in this case is verifying the correct alert is displayed to the user.

  @Validation
  Scenario Outline: User is able to request a Demo but does not fill out result
    Given User navigates to PHPTRAVELS Demo Page
    When User fills in Demo Request Form <firstName>, <lastName>, <businessName>, <email>
    When User clicks submit
    Then Verify alert "Please input result number"
    Examples:
      | firstName | lastName | businessName | email               |
      | "ABC"     | "DEF"    | "Main Inc."  | "whatever@main.com" |

As always code is on available on Github

Playwright with Cucumber/JUnit 5 - Maven setup with pom.xml

Terence Pan — Sun, 02 Oct 2022 23:43:53 +0000

Maven setup with pom.xml

In the pom.xml I am using BOMs(Bill of Materials) to manage versions of Junit 5 and Cucumber. This ensures that linked versions of those libraries are all compatible. For example, we are using Cucumber 7.3.4 here, so Gherkin 23.0.1 is the version that was developed with 7.3.4 and will be brought in automatically.

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.junit</groupId>
                <artifactId>junit-bom</artifactId>
                <version>${junit5.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <dependency>
                <groupId>io.cucumber</groupId>
                <artifactId>cucumber-bom</artifactId>
                <version>${cucumber.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

Descriptions of dependencies:

Playwright: UI testing framework
junit-jupiter-api: JUnit 5 testing framework which provides testing methods through classes such as Assertions, Assumptions
junit-platform-suite: allows us to create JUnit 5 test suites to create test suite classes to organize features we can run
Cucumber: software tool that supports behavior-driven development (BDD)
cucumber-junit-platform-engine: used as engine for Junit5
cucumber-picocontainer: used for dependency injection to share state and singletons within a scenario through steps
gherkin: used to parse Cucumber features written in the Gherkin language to glue code

Description of plugins:

maven-compiler-plugin: used to compile sources for code
maven-surefire-plugin: used to run tests and test configurations such as reports

pom.xml contents

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>io.tpan</groupId>
    <artifactId>PlaywrightCucumberExample</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>11</maven.compiler.source>
        <maven.compiler.target>11</maven.compiler.target>
        <cucumber.version>7.3.4</cucumber.version>
        <maven.surefire.version>3.0.0-M7</maven.surefire.version>
        <playwright.version>1.25.0</playwright.version>
        <junit5.version>5.9.0</junit5.version>
    </properties>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.junit</groupId>
                <artifactId>junit-bom</artifactId>
                <version>${junit5.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <dependency>
                <groupId>io.cucumber</groupId>
                <artifactId>cucumber-bom</artifactId>
                <version>${cucumber.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.microsoft.playwright</groupId>
            <artifactId>playwright</artifactId>
            <version>${playwright.version}</version>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-api</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.platform</groupId>
            <artifactId>junit-platform-suite</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>io.cucumber</groupId>
            <artifactId>cucumber-java</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>io.cucumber</groupId>
            <artifactId>cucumber-junit-platform-engine</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>io.cucumber</groupId>
            <artifactId>cucumber-picocontainer</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>io.cucumber</groupId>
            <artifactId>gherkin</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>${maven.surefire.version}</version>
                <configuration>
                    <properties>
                        <configurationParameters>
                            cucumber.plugin=pretty,html:target/site/TestRun.html,json:target/site/TestRun.json
                            cucumber.publish.quiet=true
                            cucumber.publish.enabled=false
                        </configurationParameters>
                    </properties>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

As always code is on available on Github

Playwright with Cucumber/JUnit 5 - Intro

Terence Pan — Sun, 02 Oct 2022 23:43:05 +0000

Background

I recently had to evaluate a bunch of old TestNG/Selenium UI test automation projects that were not maintained at all. We figured it would be a good idea to evaluate a bunch of different options to migrate the tests to an easier to maintain framework. Playwright was one option we considered. This series is to document example code of how our projects were setup.

Playwright

Playwright like Selenium WebDriver is cross platform, cross browser and available in different languages. But the setup is much easier, you do not have to download web driver binaries and maintain those versions like in Selenium WebDriver.

Playwright many conveniences as compared to Selenium WebDriver. By default Playwright will auto-wait before performing an action like click. On many sites, it may take a few seconds to wait and with Selenium WebDriver, the code may try to click immediately after the site is navigated to. This would cause an exception where the element is not found. Playwright will wait for the element to appear before clicking. Selectors also pierce Shadow DOM which will help with interacting with Shadow DOM elements like Chrome's print dialog or settings navigation.

Cucumber

We also would like to make these tests understandable by business analysts and other nontechnical staff as well. So we can incorporate the Cucumber framework as well to organize the tests. Cucumber is a Behavior Driven Development testing tool which aims to allow tests to be written in plain language and parsed to run test code. The Cucumber tests use Steps which represent user actions and are directly linked to code, in this case Java Playwright code. This has the advantage of allowing nontechnical staff to more easily understand the test deck, possibly make changes and add test scenarios without having to use up developer time.

Prerequisites

For this tutorial it is expected you have an IDE like Intellij or Eclipse. For Eclipse, it is recommended you use a plugin: Cucumber Eclipse Plugin. This plugin is maintained by the Cucumber developers. This allows you to step through features to the code and run features through Eclipse. Intellij Ultimate has the plugin installed and enabled by default. If you are using community edition, you will need to install the Cucumber plugin.

So let's get started, I wanted to cover as much ground as I can for what you may need to know for an actual work project so this will be a series. This tutorial covers Intellij and Chrome, but you can easily use Eclipse and Firefox or Edge instead.

As always code is on available on Github