# Playwright Fixtures

### Requirements

* Requires `@currents/playwright` 1.7.0+

### Overview

[Playwright custom fixtures](https://playwright.dev/docs/test-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](/guides/coverage/code-coverage-for-playwright.md)
* [Currents Actions](/guides/currents-actions.md)

### Setting up Currents Fixtures

{% stepper %}
{% step %}
**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).

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

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

{% endstep %}

{% step %}
**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](/guides/coverage.md#code-coverage-for-playwright) and [Currents Actions](/guides/currents-actions/setup-currents-actions.md) as an example:

{% code title="currentsTest.ts" %}

```typescript
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,
});
```

{% endcode %}
{% endstep %}

{% step %}
**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:

{% code title="playwright.config.ts" %}

```typescript
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;
```

{% endcode %}
{% endstep %}

{% step %}
**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](#combine-currents-fixtures-with-existing-custom-fixtures "mention")).

```typescript
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.

```typescript
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']);
});
```

{% endstep %}
{% endstepper %}

### Combine Currents fixtures with existing custom fixtures

If you already have your own custom fixtures, you will want to use [Playwright's mergeTests helper](https://playwright.dev/docs/test-fixtures#combine-custom-fixtures-from-multiple-modules) to combined fixtures from multiple modules. The merged result should be exported and used in your tests.

{% code title="fixtures.ts" %}

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

export const test = mergeTests(currentsTest, dbTest);
```

{% endcode %}

{% code title="test.spec.ts" %}

```typescript
import { test } from './fixtures';

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

{% endcode %}

{% hint style="info" %}
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.
{% endhint %}

### 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.

{% code title="playwright.config.ts" %}

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

{% endcode %}

### Available Fixtures

<details>

<summary>baseFixtures</summary>

* `curentsConfigOptions`
* `currentsConfig`
* `gitInfo`

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

</details>

<details>

<summary>coverageFixtures</summary>

* `context`

See [Code Coverage](/guides/coverage.md#code-coverage-for-playwright)for details

</details>

<details>

<summary>actionsFixtures</summary>

Available for in `@currents/playwright` v1.9.0+

See [Currents Actions](/guides/currents-actions.md) for details

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.currents.dev/resources/reporters/currents-playwright/playwright-fixtures.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.