Adding E2E Testing Automation

apps/web/.gitignore

@@ -36,3 +36,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# playwright
+
+allure-results
+test-results
+playwright-report

apps/web/e2e/docs/README.md

@@ -0,0 +1,86 @@
+# Playwright Tests with TypeScript
+
+This repository contains end-to-end tests for a web application using Playwright and TypeScript. The tests are organized using the Page Object Model (POM) to enhance maintainability and readability.
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (>=14.x)
+- npm (>=6.x)
+
+### Installation
+
+1. Clone the repository:
+ ```sh
+ git clone https://github.com/your-repo/playwright-tests.git
+ cd playwright-tests
+ ```
+
+2. Install dependencies:
+ ```sh
+ npm install
+ ```
+
+### Running Tests
+
+To run all tests, use the following command:
+```sh
+npx playwright test
+
+npx playwright test --grep @critical
+
+
+## Playwright Configuration
+
+The Playwright configuration is defined in the `playwright.config.ts` file. Here are some key points:
+
+- **Timeout per test**: Each test has a timeout of 5000 milliseconds.
+- **Reporters**: The tests use line, allure-playwright, and HTML reporters.
+- **Test directory**: The tests are located in the `e2e` directory.
+- **Retries**: Tests will be retried once if they fail.
+- **Artifacts**: Test results, including screenshots and traces, are stored in the `test-results` directory.
+- **Web Server**: The configuration includes a command to start the development server before running the tests.
+- **Base URL**: The base URL for the application under test is set dynamically based on the port.
+
+For more information on configuring Playwright, visit the [official documentation](https://playwright.dev/docs/test-configuration).
+
+### Running Tests
+
+To run all tests, use the following command:
+```sh
+npm run test:e2e ```
+
+To run tests with a visual\debug interface:
+```sh
+npm run test:visual ```
+
+To run tests in headed mode:
+
+```sh
+npm run test:head```
+
+To run only critical tests in headed mode:
+
+```sh
+npm run test:critical```
+
+To run only blocker tests in headed mode:
+
+```sh
+npm run test:blocker```
+
+To run a specific test file or test case:
+
+```sh
+npm run test:single ```
+
+## Resources
+
+- [Playwright Official Website](https://playwright.dev)
+- [Playwright Documentation](https://playwright.dev/docs/intro)
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
+
+For further details and advanced usage, please refer to the Playwright and TypeScript official documentation.
+
+

apps/web/e2e/objects/aboutPage.ts

@@ -0,0 +1,50 @@
+import { Page, expect } from "@playwright/test";
+
+export class AboutPage {
+ readonly page: Page;
+
+ constructor(page: Page) {
+ this.page = page;
+ }
+
+ async navigateTo() {
+ await this.page.goto("/");
+ }
+
+ async clickAboutPage() {
+ await this.page.getByText("About Page").click();
+ }
+
+ async expectUrl() {
+ await expect(this.page).toHaveURL("/home/about");
+ }
+
+ async expectHeading() {
+ await expect(this.page.getByRole("heading", { level: 1 })).toContainText(
+ "About Page",
+ );
+ }
+
+ async navigateToAuth() {
+ await this.page.goto(
+ "http://localhost:3005/auth?redirectUrl=http://localhost:3000/",
+ );
+ }
+
+ async fillTextbox(text: string) {
+ await this.page.getByRole("textbox").click();
+ await this.page.getByRole("textbox").fill(text);
+ }
+
+ async navigateToWelcome() {
+ await this.page.goto("http://localhost:3000/en/welcome?redirect_url=%2Fen");
+ }
+
+ async clickEventsMenu() {
+ await this.page.getByLabel("events-menu").click();
+ }
+
+ async expectAboutMeInList() {
+ await expect(this.page.getByRole("list")).toContainText("About me");
+ }
+}

apps/web/e2e/objects/loginPage.ts

@@ -0,0 +1,124 @@
+import { Page, expect } from "@playwright/test";
+
+export class LoginPage {
+ readonly page: Page;
+
+ constructor(page: Page) {
+ this.page = page;
+ }
+
+ async navigateTo() {
+ await this.page.goto("");
+ }
+
+ async clickPublicServant() {
+ await this.page.click("text=Public Servant");
+ }
+
+ async expectTitle(title: string) {
+ await expect(this.page).toHaveTitle(title);
+ }
+
+ async expectPublicServantText() {
+ await expect(
+ this.page.locator("label >> text=Public Servant"),
+ ).toContainText("Public Servant");
+ }
+
+ async enterPassword(password: string) {
+ const passwordField = this.page.locator('//input[@name="password"]');
+ await passwordField.click();
+ await passwordField.fill(password);
+ }
+
+ async clickSubmit() {
+ await this.page.click("//*[@id='submit_btn']");
+ }
+
+ async expectPasswordRequired() {
+ await expect(this.page.locator('input[name="password"]')).toHaveAttribute(
+ "required",
+ "",
+ );
+ }
+
+ async expectMyGovIdLogo() {
+ const mygovidLogo = this.page.locator("#mygovid-logo.icon-mygovid_logo");
+ await expect(mygovidLogo).toHaveCount(1);
+ await expect(mygovidLogo).toBeVisible();
+ }
+
+ async expectMainElements() {
+ await expect(
+ this.page.locator('div[style="display: flex; flex-direction: column"]'),
+ ).toBeVisible();
+ await expect(
+ this.page.locator("label >> text=Public Servant"),
+ ).toBeVisible();
+ await expect(
+ this.page.locator("label >> text=Public Servant"),
+ ).toContainText("Public Servant");
+ await expect(
+ this.page.locator("label >> text=Verification level"),
+ ).toBeVisible();
+ await expect(
+ this.page.locator("label >> text=Verification level"),
+ ).toContainText("Verification level");
+
+ const userSelectLabel = this.page.locator(
+ 'div.password-label label[for="user_select"]',
+ );
+ await expect(userSelectLabel).toBeVisible();
+ await expect(userSelectLabel).toHaveText("Select user");
+
+ const passwordLabel = this.page.locator('label[for="password"]');
+ await expect(passwordLabel).toBeVisible();
+ await expect(passwordLabel).toHaveText("Password");
+
+ const loginButton = this.page.locator("#submit_btn");
+ await expect(loginButton).toBeVisible();
+ await expect(loginButton).toHaveAttribute("id", "submit_btn");
+ await expect(loginButton).toHaveAttribute("type", "submit");
+ const buttonText = await loginButton.textContent();
+ expect(buttonText).toContain("Login");
+ }
+
+ async expectVerificationLevelOptions() {
+ const verificationLevelDropdown = this.page.locator(
+ 'select[name="verificationLevel"]',
+ );
+
+ await expect(verificationLevelDropdown).toBeVisible();
+
+ const options = verificationLevelDropdown.locator("option");
+
+ await expect(options).toHaveCount(3);
+
+ for (let i = 0; i < 3; i++) {
+ const option = options.nth(i);
+ const optionText = await option.textContent();
+ const optionValue = await option.getAttribute("value");
+
+ switch (i) {
+ case 0:
+ expect(optionText).toBe("Level 0");
+ expect(optionValue).toBe("0");
+ break;
+ case 1:
+ expect(optionText).toBe("Level 1");
+ expect(optionValue).toBe("1");
+ break;
+ case 2:
+ expect(optionText).toBe("Level 2");
+ expect(optionValue).toBe("2");
+ break;
+ }
+ }
+ }
+
+ async expectWelcomeMessage() {
+ const h1Locator = this.page.locator("h1.govie-heading-l");
+ await expect(h1Locator).toBeVisible();
+ await expect(h1Locator).toHaveText("Welcome to Life Events");
+ }
+}

apps/web/e2e/objects/logoutPage.ts

@@ -0,0 +1,21 @@
+import { Page, expect } from "@playwright/test";
+
+export class LogoutPage {
+ readonly page: Page;
+
+ constructor(page: Page) {
+ this.page = page;
+ }
+
+ async clickLogout() {
+ const logoutButton = this.page.getByLabel("Logout");
+ await expect(logoutButton).toBeVisible();
+ await logoutButton.click();
+ }
+
+ async expectMyGovIdLogo() {
+ const mygovidLogo = this.page.locator("#mygovid-logo.icon-mygovid_logo");
+ await expect(mygovidLogo).toHaveCount(1);
+ await expect(mygovidLogo).toBeVisible();
+ }
+}