Currents Playwright fixtures

Enhance Playwright functionality with Currents playwright fixtures

Requires @currents/playwright 1.7.0+

Playwright custom fixtures provide ways to augment and modify tests at runtime. The @currents/playwright package provides some fixtures for integrating with advanced Currents features like:

• Code Coverage for Playwright

Adding the 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 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,
});

3

Optional: set Currents 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
      },
    }),
   ... 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 wan to use Playwright's mergeTests helper to combind 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(dbTest, currentsTest);

test.spec.ts

import { test } from './fixtures';

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

Available Fixtures

baseFixtures

• curentsConfigOptions

• currentsConfig

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

coverageFixtures

• context

See Code Coverage for Playwrightfor details