Tramvai test Playwright

Set of helpers for using playwright in the integration tests

Playwright should be installed separately

Installation

1npm install --save-dev @tramvai/test-pw

Usage

Configuration

Create file playwright.config.ts with defaults from @tramvai/test-pw package:

1import { createPlaywrightConfig } from '@tramvai/test-pw';
2
3export default createPlaywrightConfig();

You can always extend default config, here is createPlaywrightConfig type definition:

1// passed configuration object will be merged with defaults
2type createPlaywrightConfig = (config: PlaywrightTestConfig) => PlaywrightTestConfig;

Testing

:::tip

Use case for this section and startAppFixture - monorepo with many tramvai modules and example applications, where you need to test independent features.

All usage of startAppFixture in different workers will run development build, which might not be optimal for tests execution time, if you want to test the same app in different cases.

For real applications, prefer to run application once as web server or manually and pass baseUrl after.

:::

@tramvai/test-pw provide a useful fixture for application start (local server in development mode) and testing - startAppFixture. This fixture use startCli method from @tramvai/test-integration package.

First, you need to add and configure this fixture for application tests:

1import path from 'path';
2import { test as base } from '@playwright/test';
3import type { StartAppTypes } from '@tramvai/test-pw';
4import { startAppFixture } from '@tramvai/test-pw';
5
6type TestFixture = {};
7
8type WorkerFixture = {
9  app: StartAppTypes.TestApp;
10  appTarget: StartAppTypes.AppTarget;
11  startOptions: StartAppTypes.StartOptions;
12};
13
14export const test = base.extend<TestFixture, WorkerFixture>({
15  appTarget: [
16    // provide application name and directory
17    {
18      target: 'appName',
19      cwd: path.resolve(__dirname, '..'),
20    },
21    { scope: 'worker', auto: true, option: true },
22  ],
23  // any `startCli` parameters
24  startOptions: [{
25    env: {
26      SOME_MOCKED_API: 'xxx'
27    },
28  }, { scope: 'worker', auto: true, option: true }],
29
30  app: startAppFixture,
31});

Then, use the app object in integration tests:

1import { expect } from '@playwright/test';
2import { test } from './test-fixture';
3
4test.describe('examples/app', async () => {
5  test('Navigation is visible', async ({ app, page }) => {
6    await page.goto(app.serverUrl);
7
8    expect(page.getByRole('navigation')).toBeVisible();
9  });
10});

You can find more info about app object in our Testing Guide

Production build testing

If you need to test production build, @tramvai/test-pw provide a few fixtures for it:

• appServerFixture to run compiled application server
• buildAppFixture to run production build of the application (will be called implicitly for appServerFixture)

First, configure fixtures:

1import path from 'path';
2import { test as base } from '@playwright/test';
3import type { BuildAppTypes } from '@tramvai/test-pw';
4import { appServerFixture } from '@tramvai/test-pw';
5
6type TestFixture = {};
7
8type WorkerFixture = {
9  app: BuildAppTypes.TestApp;
10  appTarget: BuildAppTypes.AppTarget;
11  buildOptions: BuildAppTypes.StartOptions;
12};
13
14export const test = base.extend<TestFixture, WorkerFixture>({
15  appTarget: [
16    // provide application name and directory
17    {
18      target: 'appName',
19      cwd: path.resolve(__dirname, '..'),
20    },
21    { scope: 'worker', auto: true, option: true },
22  ],
23  // any `buildCli` parameters
24  buildOptions: [{
25    env: {
26      SOME_MOCKED_API: 'xxx'
27    },
28  }, { scope: 'worker', auto: true, option: true }],
29
30  appServer: appServerFixture,
31});

Then, use the appServer object in integration tests:

1import { expect } from '@playwright/test';
2import { test } from './test-fixture';
3
4test.describe('examples/app', async () => {
5  test('Navigation is visible', async ({ appServer, page }) => {
6    await page.goto(`http://localhost:${appServer.port}/`);
7
8    expect(page.getByRole('navigation')).toBeVisible();
9  });
10});