UI Testing with TypeScript and Playwright

Stack

A basic set of packages to test UI with TypeScript:

• Playwright — testing framework;
• Prettier — code formatter;
• ESLint — code linter.

Example website for testing as a default baseURL: CERN, unless otherwise specified.

How to Use

1. Clone repository
2. Install dependencies: npm install
3. Install dependencies for testing framework: npm run test:install-deps
4. Run tests: npm test

CLI Options

• Different tested host could be passed to tests through .env variable:

BASE_URL=https://home.cern npm test

• Run tests filtered by tag:

npm test -- --grep @mobile

• Run a single test (for example: switch-language.spec.ts):

npm test tests/switch-language.spec.ts

Or:

npm test -- --grep language

• Run tests in debug mode:

npm test -- --debug --grep language

Or through the custom command:

npm run test:debug -- --grep language

Examples of Test Cases

All tests are synthetic and written in different «styles» and approaches with the intent to demonstrate various cases from the articles Hidden Gems of Playwright and Part 2, unless otherwise specified:

• atlas-postcard-price.spec.ts — example of Generative Automation Testing with Playwright MCP Server;
• keyboard-navigation-on-tab.spec.ts — example of Automated Accessibility Testing of Keyboard Navigation on Tab;
• mobile-toolbar-about-overlay-use.spec.ts — has an example of rewriting config through test.use() with a boxed step;
• mobile-toolbar-newcontext.spec.ts — has an example of redefining the browser context with a boxed step;
• open-sign-in.spec.ts — has an example of expect.toPass assertion;
• sushi-swap-contract-testing.spec.ts — example of API Contract Testing with Zod schema validation;
• sushi-swap-custom-matcher.spec.ts — example of usage custom matchers for Zod schema validation;
• switch-language.spec.ts — has an example of test.fixme() method;
• toolbar-throught-describe.spec.ts — has an example of test.describe.configure() method;
• toolbar-throught-step.spec.ts — has examples of test.slow(), test.step() and expect.soft() methods.