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:///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.
Key |
User |
Access Group |
Portal |
|---|---|---|---|
USERNAME_CUSTOMER |
CustomerREF@SL |
TellUsMoreRef:Customer |
TellUsMoreCustomerPortal |
USERNAME_CASE_WORKER |
CaseWorkerREF@SL |
TellUsMoreRef:CaseWorker |
TellUsMoreBOPortal |
USERNAME_MANAGER |
ManagerREF@SL |
TellUsMoreRef:Manager |
TellUsMoreBOPortal |
USERNAME_DISPATCHER |
DispatcherREF@SL |
TellUsMoreRef:Dispatcher |
TellUsMoreBOPortal |
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
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.
RAP file available on demand.