E2E Tests

Integration E2E tests are located in the e2e-tests/ directory. These tests use Playwright to interact with UI in a desktop or mobile web browser.

Fluent POM

This E2E test framework uses the Page Object Model for easy maintainance and reduces code duplication. Each web page of an application is represented as a class file. The fluent pattern allows functions chaining to make code more readable.

Libraries and Utils

Custom widgets

A widget class is a reusable class which represents a common page control. Examples of widgets are

1. navbar.ts
2. footer.ts
3. textbox.ts
4. radiogroup.ts
5. question.ts

Guidelines for strings and constants

1. Externalize strings to resource files for reuse, fast editing and localization.

Writing guidelines for POM class

** Do

1. Create common reusable functions in an abstract base class to eliminate duplicated code.
2. Write web element locators for keeping tests clean.

** Don't

1. No getter functions for web element locators because they clutter up file.
2. No complex logics functions for application business logics.
3. No long xpath/css selectors because they are brittle.
4. AVOID writing new function which is not reusable to other tests.

Writing guidelines for tests

** Common set up

1. Use fixture to set up common actions such as log-in or opening a study landing page.

** Do

1. Use await test.step to group relevant steps to make tests and logs easy to read and understand.
2. Use expect (import { expect } from '@playwright/test') to assert each step is working expectely. Ensures error is detected right as it occur.
3. UI visual screenshot test file naming convention is *.visual.test.ts

** Don't

1. No xpath/css selectors

** Environment variables

1. Use *.env.* to set or override default environment variables
2. Use global.setup.ts to set common environment variables