Playwright: 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. Automate your team's workflows using REST API, WebHooks and built-in integration with Slack, GitHub, and more.

Overview

1. Create an organization and a project at

2. Install @currents/playwright npm package

3. Create Currents configuration file currents.config.ts

4. Enable traces, videos and screenshots in playwright.config.js|ts

5. Run pwc CLI command OR by configuring an extra reporter

Prerequisites

Create an Organization and a Project

After signing up for the dashboard service, you will be prompted to create a new organization and a project. You can change their names later.

After creating a new organization and a project, you'll see on-screen instructions with your newly created Project ID and Record Key.

Select Playwright from the framework selection list and then choose the preferred installation method (see below).

Install @currents/playwright package

npm i -D @currents/playwright

Create currents.config.ts

Create currents.config.ts ( or .mjs / .js )

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

const config: CurrentsConfig = {
  recordKey: process.env.CURRENTS_RECORD_KEY || "your-record-key",
  projectId: process.env.CURRENTS_PROJECT_ID || "currents-project-id"
};

export default config;

Enable traces, videos and screenshots (recommended)

Enable traces, videos and screenshots in playwright.config.ts

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

Create Your First Playwright Run

Choose one of the following methods:

• Run pwc command

• Manually add Currents reporter

Run pwc command

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

npx pwc

• 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

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

Explore the Newly Created Run

🎉 Hooray! As your tests run, the results are being streamed in real-time to Currents.

Example of a newly created run

You can see the run details in the dashboard. A link to the recorded run will also be available at the end 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

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

Next Steps

Finalize your setup — enable Currents in CI:

• Get familiar with CI Build ID

• Setup Currents on CI — CI Setup

• Explore @currents/playwright configuration and options

Learn more about Currents:

• Enable Integrations with Slack, GitHub, GitLab and more

• Speed up your CI by exploring CI Optimization guides

• Customize the reporting with Playwright Tags

• Assign test ownership and personal notifications with Playwright Annotations

• Replace your ad-hoc scripts with Actions

Setup Currents in CI

Speed up Playwright in CI

Playwright Tags

Playwright Annotations

Currents Actions

Integrations