End-to-end and Load Testing Monorepo
Playwright + xk6-browser + Typescript

This repository template is an extention to the Typescript template and creates a Typescript monorepo that includes:

• End-to-end testing using Playwright
• Load, smoke, stress and soak testing using k6 and xk6-browser

Because xk6-browser roughly adheres to Playwright's browser API, this enables you to share page actions and logic between the two, drastically reducing duplication. By using Typescript you have better autocomplete DX, tests are better maintainable and you can use modern Javascript futures such as async/await, which is not supported by k6 by default (ES5.1).

Structure

• src/k6 - k6 and xk6-browser tests
  • Typescript files that get transpiled to ES5.1 javascript files (using webpack and babel), so that they can be ran by xk6-browser
• src/playwright - playwright tests
  • Typescript files that can be directly ran by Playwright
• src/pages - page actions
  • Typescript files that can be used by both the k6 and playwright tests by using the import path @pages/<shared files>

Example

src/k6/example-test.ts

import { check } from 'k6';
import { Options } from 'k6/options';
import { chromium } from 'k6/experimental/browser';
import { clickCheckboxOnk6 } from '@pages/example-page';


export let options: Options = {
    vus: 1,
    duration: '10s'
};

export default async function () {
    const browser = chromium.launch({
        headless: true, args: ['no-sandbox']
    });
    const context = browser.newContext();
    const page = context.newPage();
    try {
        await clickCheckboxOnk6(page);
        check(page, {
            'checkbox is checked': (p) =>
                p.locator('#checkbox-info-display').textContent() === 'Thanks for checking the box',
        });
    } finally {
        page.close();
        browser.close();
    }
};

src/playwright/example.spec.ts

import { test, expect } from '@playwright/test';
import { clickCheckboxOnk6 } from '@pages/example-page';

test('checkbox should have been clicked', async ({ page }) => {
  await clickCheckboxOnk6(page);

  const checkBox = page.locator('#checkbox-info-display');

  await expect(checkBox).toHaveText('Thanks for checking the box');
});

src/pages/example-page.ts

import type { Page } from "@playwright/test/types/test";

export async function clickCheckboxOnk6(page: Page) {
    await page.goto('https://test.k6.io/browser.php', { waitUntil: 'networkidle' })
    page.locator('#checkbox1').check();
}

Installation

Create a repository using this template

To generate a TypeScript project that includes the dependencies and initial configuration, click Use this template on this repository.

Install dependencies

Clone the generated repository on your local machine, move to the project root folder and install the dependencies defined in package.json

$ npm i

Running k6 tests

To run a k6 test:

$ npm run k6 dist/k6/example-test.js

This command does the following things:

• Transpiles the Typescript files from ./src to Javascript test files in the ./dist folder using Babel and Webpack (you can also do this separately using npm run build). Learn more
• Runs the provided transpiled test with k6 using the Dockerfile and docker-compose, which will mount the ./dist folder to /dist, making the tests in there available for the container.

Assumptions

• The tests need to have the "test" word in the name to distinguish them from auxiliary files. You can change the entry here.
• If static files are required then add them to ./assets folder. Its content gets copied to the destination folder (dist) along with compiled scripts.

Running Playwright tests

Run all playwright tests simply using:

$ npm run playwright

Learn more about Playwright and running tests.