Playwright Fixtures

Enhance Playwright functionality with Currents fixtures for Playwright

Requirements

• Requires @currents/playwright 1.7.0+

Overview

Playwright custom fixtures is an important concept in Playwright ecosystem that allow augmenting and modifying the behaviour of Playwright tests.

Current integration with Playwright includes a several fixtures for enabling advanced Currents features like:

• Code Coverage for Playwright

• Currents Actions

Setting up Currents Fixtures

1

Create and export a new instance of test for adding fixtures

Create a new file in your repo in a location that can be imported from your tests. (Or if you are already using custom fixtures, follow your existing pattern).

import { test as baseTest } from '@playwright/test';
import { 
  CurrentsFixtures,
  CurrentsWorkerFixtures,
  fixtures
} from '@currents/playwright';

export const test = baseTest.extend<CurrentsFixtures, CurrentsWorkerFixtures>({
  ...fixtures.baseFixtures,
});

2

Add additional Currents feature fixtures

The baseFixtures are required for loading the currents config for the other Currents fixtures. You will also want to include any Currents fixture you plan on using. Here is Playwright coverage and Currents Actions as an example:

currentsTest.ts

import { test as baseTest } from '@playwright/test';
import { 
  CurrentsFixtures,
  CurrentsWorkerFixtures,
  fixtures
} from '@currents/playwright';

export const test = baseTest.extend<CurrentsFixtures, CurrentsWorkerFixtures>({
  ...fixtures.baseFixtures,
  ...fixtures.coverageFixtures,
  ...fixtures.actionFixtures,
});

3

Optional: set fixture configuration

We pick up the configuration automatically from the currents.config.js|ts file - if you created the file you can skip this step. If you explicitly provide config to the Currents reporter in your playwright.config.ts you will also need to pass that same config to the fixture like this:

playwright.config.ts

import {
  currentsReporter,
  CurrentsWorkerFixtures,
  CurrentsFixtures,
} from "@currents/playwright";
import { devices, defineConfig } from "@playwright/test";

const config = defineConfig<CurrentsFixtures, CurrentsWorkerFixtures>({
    use: {
      // add the currents config here to be used in the fixture
      currentsConfigOptions: {
        ... insert your currents config here
      },
      // Optionally disable Currents fixtures. (defaults to enabled)
      // currentsFixturesEnabled: false
    }),
   ... other config
});

export default config;

4

Use the new implementation in your tests

Import the new test implementation and use it in your tests where you want to use the features provided by the fixtures (or Combine Currents fixtures with existing custom fixtures).

import { test } from './currentsTest';
import { expect } from "@playwight/test"


test('basic test', async ({ page }) => {
  await todoPage.addToDo('something nice');
  await expect(page.getByTestId('todo-title')).toContainText(['something nice']);
});

If you want to test that fixtures are loading, you can confirm that the currentsConfig is loaded by calling the fixture in one of the tests, and printing it’s result.

import { test } from './currentsTest';
import { expect } from "@playwight/test"


test('basic test', async ({ page, currentsConfig }) => {
  console.log(currentsConfig);
  await todoPage.addToDo('something nice');
  await expect(page.getByTestId('todo-title')).toContainText(['something nice']);
});

Combine Currents fixtures with existing custom fixtures

If you already have your own custom fixtures, you will want to use Playwright's mergeTests helper to combined fixtures from multiple modules. The merged result should be exported and used in your tests.

fixtures.ts

import { mergeTests } from '@playwright/test';
import { test as dbTest } from 'databaseTest';
import { test as currentsTest } from 'currentsTest';

export const test = mergeTests(currentsTest, dbTest);

test.spec.ts

import { test } from './fixtures';

test('passes', async ({ database, page, currentsConfig }) => {
  // use database and currentsConfig fixtures.
});

When combining the Currents fixtures with existing fixtures, it's often desirable to place the Currents fixtures first. This enables Currents to take actions even if a failure happened in your later fixtures.

Conditionally Enable Fixtures

After extending the test method, many Currents fixtures are enabled by default. If you wish to only conditionally enable them (such as only in CI) you can use the currentsFixturesEnabled property in your playwright.config.ts file.

playwright.config.ts

// ...
use: {
  ...
  currentsFixturesEnabled: !!process.env.CI,
},

Available Fixtures

baseFixtures

• curentsConfigOptions

• currentsConfig

• gitInfo

Other Currents fixtures depend on these. They are loaded once per worker.

coverageFixtures

• context

See #code-coverage-for-playwrightfor details

actionsFixtures

Available for in @currents/playwright v1.9.0+

See Currents Actions for details