Playwright: Automated Testing

Before you start - Changes made to accommodate playwright

We made a few changes to the framework in order to accommodate playwright. The changes are as follows:

1. We added a new folder called tests, this is where all the tests will live.
2. We removed the code from Utils/CoComponentBase that would give each element from getPart a unique ID. We instead give them all a non-unique "data-testid" attribute. This is a common attribute used in playwright tests, it doesn't need to be unique because playwright can find elements by their data-testid, their text and through parent elements as long as one is unique (would be MoApp in most of our cases).

What is Playwright?

Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

Why Playwright?

1. It's fast

Playwright's efficient architecture and optimized API make it one of the fastest cross-browser automation tools available. With Playwright, you can run your tests and scripts quickly and reliably.

2. It's reliable

Playwright's robust error handling and debugging tools make it a reliable choice for web automation. With Playwright, you can trust that your tests and scripts will run smoothly and accurately.

3. It's capable

Playwright's extensive feature set and flexible API make it a powerful tool for web automation. With Playwright, you can automate complex workflows and test scenarios with ease.

4. It's ever-green

Playwright is designed to stay up-to-date with the latest browser versions and features, ensuring that your automation scripts will continue to work as expected. With Playwright, you can future-proof your web automation efforts.

How to use Playwright?

Theres two options to use playwright, one is through the command line and the other is through a VSCode extension.

Command Line

You can either run

npx playwright test

or with UI

npx playwright test --ui

VSCode Extension

You can install the VSCode extension from the marketplace here

How to write a test?

1. Create a test file

Create a new file in the tests folder, and name it with the following convention: {name}.spec.ts

2. Write a test

import { test, expect } from "@playwright/test";

test("basic test", async ({ page }) => {
  await page.goto("https://playwright.dev/");
  const name = await page.innerText(".navbar__title");
  expect(name).toBe("Playwright");
});

3. Run the test

npx playwright test

What if I need an email verification?

We have a mailinator account that you can use to create email addresses and verify them. The credentials are in the secrets.json file.

import {expect} from '@playwright/test';
import type {Inbox, Message} from 'mailinator-client';
import type { IRestResponse } from 'typed-rest-client/RestClient';

const response: IRestResponse<Inbox> = await mailinatorClient.request(
    new GetInboxRequest(aDomainName, aTestEmail, 0, 20, Sort.DESC, true)
);
if(response.statusCode !== 200) {
    console.log(response.statusCode);
    expect(1).toBe(2);
}
const inbox = response.result;
const messageId = inbox?.msgs[0].id;
if(!messageId) {
    console.log("No message Id found.");
    expect(1).toBe(2);
    return;
}

const messageResponse: IRestResponse<Message> = await mailinatorClient.request(
    new GetMessageRequest(aDomainName, aTestEmail, messageId)
);

const message = messageResponse.result?.parts[0].body;

if(!message) {
    console.log("No message found.");
    expect(1).toBe(2);
    return;
}

How do I do X or Y?

For the rest of the documentation, please refer to the Playwright Documentation