This device is not compatible.


Automate Login Workflow Testing With Playwright

In this project, we’ll test a web app using the browser automation features provided by the Playwright library in TypeScript. We’ll also learn to simulate specific interactions to test several scenarios in a login form. Moreover, we’ll also generate and explore HTML test result reports.

Automate Login Workflow Testing With Playwright

You will learn to:

Practice the fundamentals of automation testing.

Test validation messages.

Build a script to test a login workflow on multiple browsers.

Generate a report with the test results.


Frontend Testing

Automated Testing


Basic understanding of TypeScript

Basic understanding of frontend testing

Basic understanding of how a login form works




TypeScript logo


Playwright logo


Project Description

The Playwright Library provides a powerful and unified API for controlling different browsers. It enables front-end testing for modern web applications via browser automation.

In this project, we’ll build a Playwright script to test an access workflow on a simple web application involving a login form. Throughout this project, we’ll use Playwright functions to simulate different interactions and build tests to verify that each aspect of the login workflow works as expected.

We’ll also use Playwright’s reporting capabilities to generate HTML reports containing test results.

Project Tasks


Initial Setup

Task 0: Get Started

Task 1: Initialize a Test Script

Task 2: Write Your First Test


Test a Login Workflow

Task 3: Test the Missing Username and Password Validation

Task 4: Test the Wrong Email Format Validation

Task 5: Test the Right Email Format Validation

Task 6: Test the Real-Time Data Validation

Task 7: Test a Failed Login

Task 8: Test a Successful Login


Analyze the Test Results

Task 9: Explore the Playwright HTML Report