This article is part of Testing Pega applications series.

Introduction

In previous articles we highlighted how important it is to test your software and what types of testing you have at your disposal. We also covered different types of tests that we can use to check Pega application. If you missed it, you may want to read it before continuing a lecture of this article:  https://support.pega.com/discussion/journey-automated-testing-pega-constellation.

In this article we are going deeper into e2e testing using modern testing framework Playwright. Testing Constellation-based applications is essential to ensure reliability, maintainability, and scalability. Playwright, a modern testing framework, provides powerful capabilities for automating UI interactions and validating application behavior. This article covers setting up a test environment using Playwright and Cucumber for Behavior-Driven Development (BDD), leveraging a structured approach to UI and API testing using Pega DX API.

For this guide, we will use the C11N Testing Starter Pack, which serves as a foundation for testing the 'Tell Us More' application. Take a look at the linked repository it open source. Repository includes Playwright and Cucumber configurations to facilitate seamless testing of Pega Constellation applications. The repository provides a good overview of the capabilities of Playwright and shows sample implementation of test. Some parts of code are written in a reusable way so you can copy paste them to your project but in general this repository is not fully written in a reusable manner and is tied to the application that we test, 'Tell us More' application. Nevertheless, it is believed that it will be a good example for teams wanting to start on automated testing. RAP for Tell Us More application attached (please find it below the article).

Why Playwright for UI testing?

Playwright offers several advantages for UI testing. Here are several reasons why you might consider using Playwright as your solution for e2e testing:

• Cross-browser support: Tests can be executed on Chromium, Firefox, and WebKit.
• Headless execution: Allows fast test execution in CI/CD pipelines.
• Robust element interaction: Handles dynamic web elements with ease.
• Cross language. Use the Playwright API in TypeScript, JavaScript, Python .NET and Java
• Built-in support for API testing: Enables seamless integration of UI and API tests.
• Powerful Tooling: Code generation, Inspector and Trace Viewer.
• Very well written documentation: https://playwright.dev/docs/intro
• Developed and maintained by Microsoft - It will continue to receive extended support. s
• One of the most popular (if not the most) testing solution - 70k+ stars of Github.

Playwright and/vs Selenium

While this article concentrates on showing benefits of Playwright, Selenium is still a valid option to choose. There will be a separate article covering the usage of Selenium with Constellation.

Here are couple of reasons when you might want to lean to Selenium:

• you already have existing Selenium tests for your Traditional Pega apps
• you team already worked with and is familiar with Selenium Starter Kit https://community.pega.com/marketplace/component/selenium-starter-kit?

Playwright is a good candidate when you prefer modern tooling, multilanguage support and looking for a new solution for testing (or starting from scratch).

Setting up the project

Let's begin by setting you up of our testing project. Below are the steps required to run your tests locally starting with a provided repository.

Prerequisites

Ensure you have the following installed:

• Node.js (Node.js 20.x version recommended)
• pnpm 9.x - other package managers shall also work although only pnpm was tested
• Git (for cloning the repository)

Clone the Repository

git clone https://github.com/kamiljaneczek/c11n-testing.git
cd c11n-testing
 

Install Dependencies and initialize

pnpm install
pnpm exec playwright install
cp .env-sample .env
 

Provide values for environment variables.

Understanding .env file

BASE_ENV - This key represents the application URL (https://<your-domain>/prweb/)

APP_NAME - This key represents the application name

In the .env file, some keys will store the user-related values (username and password), which are required for playing the journey.

When running Playwright tests on Pega applications, authentication requires using OAuth 2.0.

To set up the CLIENT_ID, CLIENT_SECRET, API_USERNAME, API_PASSWORD (depends on Oauth2 flow being used) environment variables in the .env file, these credentials are obtained through the OAuth 2.0 Client Registration process in Pega Platform.

For detailed instructions on creating the OAuth 2.0 Client Registration rule, refer to this article:
Configure OAuth 2.0 Client Registration

(https://docs.pega.com/bundle/platform/page/platform/security/configure-oauth-2-client-registration.html)

Update .env file in Playwright project root with the generated values.

Project Structure

The project is structured to facilitate modular and scalable testing:

• data/: Contains data files used in tests. Input data files have JSON format and are easy to change. These files are used as seed for testing.
• e2e/: Contains end-to-end test files and related directories.
  • incident/: Contains specific test files for incident cases.
  • api/: Contains API test specifications.
  • portal/: Contains test specifications related to the portal navigation and functionalities.
• features/: Holds Cucumber feature files, which describe the behavior of the application in plain English.
• step-definitions/: Contains TypeScript files with step definitions for the Cucumber tests.
• lib/: Library files that provide utility functions and configurations
  • cucumber/: Contains Cucumber-specific configurations (hooks and fixtures).
  • playwright/: Contains Playwright-specific configurations and API-related files.
  • schemas/: Defines Zod schemas for data validation.
  • utils.ts: Utility functions for the application.
• cucumber.js: Configuration for running Cucumber tests.
• playwright.config.ts: Configuration for running Playwright tests.

Running Playwright tests

Execute the tests using:

pnpm test
 

This will run all playwright test both api and ui.

run tests with UI showing test execution

pnpm test:ui
 

run tests headless mode without UI

pnpm test:headless

run all cucumber tests

pnpm cucumber

As of now you should have sample project setup and you test are working. In next article we explore source code in depth to understand how we can write new tests.