Quick Start

Running Playwright tests with Currents Dashboard

Integrate Currents with Playwright to enable recording test results together with screenshots, videos, and traces, unlocking more effective troubleshooting, analytics and proactive monitoring.

Prerequisites

• An account — sign up for a free trial.

• NodeJS v14.0.0+

• Playwright v1.22.2+

Setup Currents

1

Create a Project

When first signing in, you will be prompted to create a new organization and a project. (You can change their names later)

Next, you'll see on-screen instructions with your newly created Project ID and Record Key.

Select Playwright from the framework selection list.

2

Install @currents/playwright

Install our native Playwright reporter.

npm i -D @currents/playwright

3

Create currents.config.ts

Create currents.config.ts ( or .mjs / .js ) next to the playwright.config.ts file (usually in your root folder).

currents.config.ts

import { CurrentsConfig } from "@currents/playwright";

const config: CurrentsConfig = {
  recordKey: process.env.CURRENTS_RECORD_KEY!,
  projectId: process.env.CURRENTS_PROJECT_ID!,
};

export default config;

4

Enable artifacts

Update playwright.config.ts to enable traces, videos and screenshots.

use: {
    // ...
    trace: "on",
    video: "on",
    screenshot: "on",
}

5

Setup Currents Reporter

You have two options to integrate Currents into your test suite. You can either use our custom test runner pwc, or your can manually add our reporter to Playwright configuration and keep using your existing test command.

Option 1: Run tests with the pwc command (recommended)

pwc is a lightweight command-line executable included in @currents/playwright npm package — it runs playwright with a predefined configuration.

Setup

• Simply use npx pwc to run tests.

• Update your package.json test command to execute pwc instead of playwright test

"scripts": {
  ...
  "test": "npx pwc",
},

How it works

• pwc reads the configuration from currents.config.ts file. See additional configuration options Configuration.

• pwc injects Currents reporter into Playwright configuration.

• You can also provide CLI configuration parameters, e.g. npx pwc --key RECORD_KEY --project-id PROJECT_ID

Option 2: Manually Add Currents Reporter

You can manually add Currents reporter to playwright.config.ts and keep using playwright test command.

// playwright.config.ts
import { defineConfig, devices, PlaywrightTestConfig } from "@playwright/test";
import { currentsReporter } from "@currents/playwright";

export default defineConfig({
  // ...
  reporter: [currentsReporter()], // 👈🏻 add Currents reporter
})

• Run npx playwright test or your existing test command to start sending the results to Currents dashboard.

• The reporter reads the configuration from currents.config.ts file. See @currents/playwright for more configuration options.

Create your first run

After setting up Currents, run Plawyright to start seeing the results being streamed in real-time to Currents.

A link to the recorded run will be available at the start of the execution:

> npx pwc --key XXX --project-id YYY

📦 Currents reporter: 1.12.0 recording to project WlKqJ0
🎭 Playwright: 1.52.0 5 tests in 1 project [chromium]
🔨 CI Build ID: auto:tzwgltasm
🌐 Run URL: https://app.currents.dev/run/cfc7ab8fcaaz10157

================================================================

Open the link to see the run details in the dashboard 🎉

Example of a newly created run

Ran into any errors? Check out our Troubleshooting guide.

Next Step

Once your Playwright project is set up and reporting locally, configure your CI pipeline.

Running tests in CI is where you get consistent, repeatable feedback on every pull request and deployment, not just on your local machine.

CI Setup