Playwright Java Test Automation Architecture

Ready-to-use UI Test Automation Architecture using Java and Playwright.

Features

• Configuration-based architecture
• Utilizes Page Objects and Page Component Objects
• Data-Driven
• Captures screenshot on test failure
• Records video of test execution
• Provides detailed test report
• Supports parallel test execution

Installation Steps

In order to use the framework:

1. Fork the repository.
2. Clone, i.e, download your copy of the repository to your local machine using

git clone https://github.com/[your_username]/playwright-java-test-automation-architecture.git

3. Import the project in IntelliJ IDEA.
4. Make your desired changes.
5. Use IntelliJ IDEA to run your desired tests. Alternatively, you can use the terminal to run the tests, for example ./gradlew test -Dbrowser=firefox -Dheadless=false to run all the tests using the firefox browser in headed mode.
6. Build and browse the allure report using

./gradlew allureServe

Languages and Frameworks

The project uses the following:

• Java 11 as the programming language.
• Playwright as the web browser automation framework using the Java binding.
• Univocity Parsers to parse and handle CSV files.
• JUnit 5 as the testing framework.
• Lombok to generate getters.
• Owner to minimize the code to handle properties file.
• Allure Report as the test reporting strategy.
• Gradle as the Java build tool.
• IntelliJ IDEA as the IDE.

Project Structure

The project is structured as follows:

📦 playwright-java-test-automation-architecture
├─ .github
│  ├─ FUNDING.yml
│  ├─ dependabot.yml
│  └─ workflows
│     └─ test-execution.yml
├─ .gitignore
├─ LICENSE
├─ README.md
├─ build.gradle
├─ gradle
│  └─ wrapper
│     ├─ gradle-wrapper.jar
│     └─ gradle-wrapper.properties
├─ gradlew
├─ gradlew.bat
├─ settings.gradle
└─ src
   ├─ main
   │  └─ java
   │     └─ io
   │        └─ github
   │           └─ tahanima
   │              ├─ config
   │              │  ├─ Configuration.java
   │              │  └─ ConfigurationManager.java
   │              ├─ dto
   │              │  ├─ BaseDto.java
   │              │  ├─ LoginDto.java
   │              │  └─ ProductsDto.java
   │              ├─ factory
   │              │  ├─ BasePageFactory.java
   │              │  └─ BrowserFactory.java
   │              ├─ ui
   │              │  ├─ component
   │              │  │  ├─ BaseComponent.java
   │              │  │  ├─ Header.java
   │              │  │  └─ SideNavMenu.java
   │              │  └─ page
   │              │     ├─ BasePage.java
   │              │     ├─ LoginPage.java
   │              │     └─ ProductsPage.java
   │              └─ util
   │                 └─ BrowserManager.java
   └─ test
      ├─ java
      │  └─ io
      │     └─ github
      │        └─ tahanima
      │           ├─ annotation
      │           │  ├─ DataSource.java
      │           │  ├─ Regression.java
      │           │  ├─ Smoke.java
      │           │  └─ Validation.java
      │           ├─ e2e
      │           │  ├─ BaseTest.java
      │           │  ├─ LoginTest.java
      │           │  └─ ProductsTest.java
      │           └─ util
      │              ├─ CsvToDtoMapper.java
      │              └─ DataArgumentsProvider.java
      └─ resources
         ├─ allure.properties
         ├─ config.properties
         ├─ junit-platform.properties
         └─ testdata
            ├─ login.csv
            └─ products.csv

Basic Usage

• Configuration

  The project uses a config.properties file to manage global configurations such as browser type and base url.

  1. To add a new property, register a new entry in this file.

     key=value
     

     Then, add a method in the Configuration interface in the below format.

     @Key("key")
     dataType key();

     For example, let's say I want to add a new property named context with the value dev. In the config.properties file, I'll add:

     context=dev
     

     In the Configuration interface, I'll add:

     @Key("context")
     String context();

     To use your newly created property, you need to use the below import statement.

     import static io.github.tahanima.config.ConfigurationManager.config;

     Then, you can call config().key() to retrieve the value of your newly created property. For the example I've provided, I need to call config().context().

  2. You can supply the properties present in the config.properties file as system properties in your test via gradle.

     ./gradlew test -Dkey1=value1 -Dkey2=value2

• Test Data

  The project uses csv file to store test data and univocity-parsers to retrieve the data and map it to a Java bean.

  To add configurations for new test data, add a new Java bean in the dto package. For example, let's say I want to add test data for a User with the attributes First Name and Last Name. The code for this is as follows:

  package io.github.tahanima.dto;
  
  import com.univocity.parsers.annotations.Parsed;
  
  import lombok.Getter;
  import lombok.ToString;
  
  @Getter
  @ToString(callSuper = true)
  public class UserDto extends BaseDto {
  
      @Parsed(field = "First Name", defaultNullRead = "")
      private String firstName;
  
      @Parsed(field = "Last Name", defaultNullRead = "")
      private String lastName;
  }

  Note that the class extends from BaseDto and thus, inherits the attribute Test Case ID.

  Now, in the testdata folder you can add a csv file user.csv for User with the below contents and use it in your tests.

  Test Case ID,First Name,Last Name
  TC-1,Tahanima,Chowdhury
  

  For reference, check this, this and this.

• Page Objects and Page Component Objects

  The project uses Page Objects and Page Component Objects to capture the relevant behaviors of a web page. Check the ui package for reference.

• Tests

  The project uses JUnit 5 as the test runner. Check this implementation for reference.