DEV Community

Aisalkyn Aidarova
Aisalkyn Aidarova

Posted on

Lab 1 - Build Your First Playwright Automation Framework

By the end of this lab, you'll be able to answer questions like:

  • What is Maven?
  • Why do you use Playwright?
  • What is Page Object Model?
  • How do you organize an automation framework?

Business Scenario

You have joined United Airlines as a QA Automation Engineer.

The development team has completed the Login feature for a new customer portal.

Before the application goes to production, your task is to automate the login functionality.

Objective

By the end of this lab, you will:

  • Create a Java automation framework
  • Install Playwright
  • Write your first automated UI test
  • Push the project to GitHub

Architecture 

Developer
      │
      ▼
Application
      │
      ▼
Playwright Automation
      │
      ▼
Test Results
Enter fullscreen mode Exit fullscreen mode

Step 1 – Install Software

Install these tools:

  • Java 21
  • IntelliJ IDEA Community Edition
  • Git
  • Google Chrome
  • Maven (or use IntelliJ's bundled Maven)

Verify installation:

java -version
git --version
mvn -version
Enter fullscreen mode Exit fullscreen mode

You should see version numbers for each.

Step 2 – Create a New Project

Open IntelliJ IDEA.

  1. Click New Project.
  2. Select Maven.
  3. Choose Java 21 as the JDK.
  4. Group ID: 
   com.company
Enter fullscreen mode Exit fullscreen mode
  1. Artifact ID: 
   qa-playwright-framework
Enter fullscreen mode Exit fullscreen mode
  1. Click Create.

Step 3 – Add Playwright

Open pom.xml.

Replace its contents with the official Playwright Maven dependencies (or add them if IntelliJ created a basic project).

Reload the Maven project when IntelliJ prompts you.

Step 4 – Install Playwright Browsers

Open the Terminal inside IntelliJ.

Run:

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="install"
Enter fullscreen mode Exit fullscreen mode

Wait until Chrome, Firefox, and WebKit are installed.

Step 5 – Create Project Structure

Inside src/test/java, create:

pages
tests
utils
Enter fullscreen mode Exit fullscreen mode

Your project should look like:

qa-playwright-framework
│
├── src
│   └── test
│       └── java
│            ├── pages
│            ├── tests
│            └── utils
│
├── pom.xml
Enter fullscreen mode Exit fullscreen mode

Step 6 – Create Your First Test

Create a class:

LoginTest
Enter fullscreen mode Exit fullscreen mode

Inside it:

  1. Launch Chrome.
  2. Open a demo website (for example, SauceDemo).
  3. Verify the page title.
  4. Close the browser.

Run the test.

Expected Result

  • Chrome opens.
  • The website loads.
  • The title matches the expected value.
  • The browser closes.
  • The test passes.

Step 7 – Push to GitHub

In the IntelliJ terminal:

git init
Enter fullscreen mode Exit fullscreen mode 
git add .
Enter fullscreen mode Exit fullscreen mode 
git commit -m "Initial Playwright framework"
Enter fullscreen mode Exit fullscreen mode

Create a new repository on GitHub named:

qa-playwright-framework
Enter fullscreen mode Exit fullscreen mode

Then push your code.

What You Learned

By completing this lab, you can confidently say:

  • I created a Maven-based Playwright automation framework.
  • I organized the project using packages for pages, tests, and utilities.
  • I installed Playwright browsers.
  • I wrote and executed my first UI automation test.
  • I version-controlled the project with Git and GitHub.

Interview Questions

1. Why did you choose Maven?

Answer: Maven manages project dependencies, standardizes the project structure, and simplifies builds using a single pom.xml file.

2. Why Playwright instead of Selenium?

Answer: Playwright provides automatic waiting, faster execution, built-in support for multiple browsers, better handling of modern web applications, and supports parallel execution.

3. Why do you separate pages and tests?

Answer: This follows the Page Object Model (POM) design pattern. It keeps UI locators and page actions separate from test logic, making the framework easier to maintain and reuse.

4. Why use GitHub?

Answer: GitHub stores the automation framework, enables collaboration, tracks changes, and integrates easily with CI/CD tools like GitHub Actions.

Homework

  1. Add a second test that verifies the login page URL.
  2. Create a HomePage class in the pages package (it can be empty for now).
  3. Push your changes to GitHub with the commit message: 
Added initial Playwright tests and project structure
Enter fullscreen mode Exit fullscreen mode

This is the level of detail I'd recommend for each lab: focused on one real-world task, small enough to complete in under an hour, and directly tied to common interview questions.

Top comments (0)