UI Automation Testing Approach using Playwright

As part of the MAPS migration testing effort, we are implementing an end-to-end UI Automation
framework using Playwright to validate all user-facing screens and workflows. Our approach ensures
high test coverage, early bug detection, and faster regression cycles.

Key Activities and Steps:

1. UI Element Inventory Creation:

o Identified and documented all key UI elements across application screens (Login,
Dashboard, Settings, Form pages, etc.).

o Maintained a centralized UI Element Sheet with screen names, element types,

backend tags, and automation readiness.

2. Tool Selection and Setup:

o Selected Microsoft Playwright as the automation tool for its cross-browser support
and robust handling of modern web UIs.

o Set up the Playwright test project with reusable test configurations and test runner
integration.

3. Test Case Development:

o Automated functional flows such as login validation, form submissions, menu

navigation, and settings update.

o Each test case validates both UI behavior and underlying validations (e.g., error
messages, redirects, and UI states).

o Failures are auto-reported with screenshots and logs.

4. Data-Driven Testing:

o Designed tests to pull test data dynamically from a central Excel/JSON file, based on
the Functional Testing Sheet.

o Ensures broader coverage for multiple input scenarios and edge cases.

5. Execution and Reporting:

o Tests are run using Playwright’s CLI and headless browser modes.

o Integrated into CI pipeline for nightly regression runs.

o Reports generated with step-by-step outcomes, screenshots, and logs.

6. Security & Stability Consideration:

o Validated backend tag consistency to avoid flaky selectors.

o Ensured session timeouts, access controls, and encryption behaviours are covered in
the Security Checklist.
Libraries & Tools Used for UI Automation

Tool/Library Purpose

Core automation framework for end-to-end UI testing across

Playwright
browsers

Runtime environment for running Playwright test scripts

Node.js
(JavaScript/TS)

TypeScript Strongly typed language to write scalable Playwright test cases

Playwright Test Runner Built-in test runner with parallel execution and retry features

@playwright/test Provides expect assertions, fixtures, and test structure

Generates rich test execution reports with logs, screenshots, and

Allure / HTML Reporters
steps

dotenv (optional) Manages environment variables like URLs, credentials, etc.

xlsx / exceljs (optional) For reading test cases/data directly from Excel files

CI Tool (e.g., GitHub Actions /

To automate test execution as part of nightly or PR pipelines
Azure DevOps)

Generates dynamic test data (names,

faker.js
emails, etc.)

Records test execution videos for

playwright-video
debugging

Performs accessibility testing along

axe-core/playwright
with UI automation

Test Script Preparation

Steps Taken

1. Test Planning & Scope Definition

 Identified critical modules for automation: Login, Role Assignment, and Request Submission.

 Selected Playwright due to its modern architecture, fast execution, and native support for all
major browsers.

 Created positive and negative test cases for complete functional coverage.

2. Test Framework Setup

 Initialized a Node.js project with TypeScript for better code quality and maintainability.

 Installed required libraries:

o @playwright/test – Core Playwright test runner.

 o dotenv – For environment configuration management.

o exceljs – To support data-driven testing from Excel files.

 Created a .env file to securely store test configurations like URLs and credentials.

3. Test Script Development

 Developed modular and maintainable test cases using Playwright’s test.describe, test, and
expect() structure.

 Created utility functions to fetch test data from Excel dynamically.

 Included meaningful assertions, error handling, and logging.

4. Test Data Management

 Designed an Excel-based sheet (MRDP_Functional_Test_Cases.xlsx) with fields like:

o Test Case ID

o Module

o Scenario

o Steps

o Expected/Actual Result

 Enabled dynamic data-driven testing by linking the Excel with test execution.

5. Reporting & Debugging Enhancements

 Enabled screenshot and video capture for each test failure.

 Integrated HTML/Allure reports for summarized test results and debugging.

6. Test Execution

 Tests were executed via the command line using:

bash

CopyEdit

npx playwright test

 Supported both headless (CI/CD) and headed (local debug) modes.

 Tests ran across Chromium, Firefox, and WebKit for cross-browser compatibility.

7. Future-Proofing

 Code structured to allow easy maintenance, reuse, and scaling.

 Setup made ready for CI/CD pipeline integration with nightly runs or PR validations.

Modules Automated
Module Functionality Covered

Login Valid and invalid login, error message validations

Role Assignment Assigning roles to valid users with validations

MRDP Request New request submission and field validations

Libraries Used

Core Automation

Library Purpose

The main Playwright test runner library used to write and execute UI automation
@playwright/test
tests. It supports fixtures, reporters, retries, parallelism, and browser contexts.

Test Data & Environment Config

Library Purpose

To manage environment variables like URLs, usernames, passwords securely via a .env file.
dotenv
Prevents hardcoding of sensitive data.

To read/write Excel files for test data management. Supports dynamic data-driven test case
exceljs
execution using .xlsx files.

Reporting & Logging

Library Purpose

allure-playwright To generate beautiful Allure test reports (HTML). Can be integrated for
(optional) CI/CD pipelines.

Native Node.js libraries used for file system handling (e.g., screenshots,
fs and path
logs).

Utilities (Optional/Advanced Use)

Library Purpose

Chalk For colored console output, useful for logging in CLI.

moment / dayjs For formatting timestamps in logs or file names.

typescript For writing strongly typed code for better scalability and maintenance.

MRDP Functional Testing Automation using Playwright:

MRDP Functional Testing Automation

Automated with Playwright & TypeScript
Content:

Automate MRDP core workflows like login, role assignment, and request submission using Playwright
+ TypeScript for repeatable and scalable UI testing.

Steps Taken

 Identified key workflows (Login, Role Assignment, Request Submission)

 Set up Playwright framework with TypeScript

 Wrote modular test scripts with positive/negative cases

 Used .env for environment config

 Executed tests in both headless and debug modes

Libraries Used

@playwright/test – Core UI automation framework

 dotenv – Environment variable management

 typescript – Strongly typed scripting

 exceljs (optional) – For Excel-based test data

Test Coverage

Login – Valid & Invalid credentials

Role Assignment – Assigning & verifying user roles

MRDP Request – Form fill, validation, and submission

Execution & Reporting

 Tests executed using npx playwright test

 Supports both headless and headed execution modes

 Failures capture screenshot, video, and trace logs

 Optional Allure reports can be integrated for CI pipelines