you-first-playwright-run.md

description	icon
Running Playwright tests with Currents Dashboard	masks-theater

Playwright: Quick Start

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.md.
• 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.md
• Setup Currents on CI — ci-setup
• Explore currents-playwright configuration and options

Learn more about Currents:

• Enable integrations with slack.md, github, gitlab.md and more
• Speed up your CI by exploring ci-optimization guides
• Customize the reporting with playwright-tags.md
• Assign test ownership and personal notifications with playwright-annotations.md
• Replace your ad-hoc scripts with actions.md

Setup Currents in CI			ci-setup
Speed up Playwright in CI			ci-optimization
Playwright Tags			playwright-tags.md
Playwright Annotations			playwright-annotations.md
Currents Actions			actions.md
Integrations			integrations