Your First Playwright Run

Running Playwright tests with Currents Dashboard

Integrating Currents with Playwright enables recording test results together with screenshots, videos, and traces to the cloud reporting service. That unlocks more effective troubleshooting, analytics and proactive monitoring, extending your team's workflows using REST API, WebHooks and built-in integration with Slack, GitHub etc.

Overview

Here's an overview of what steps you'll need to take to start running Playwright tests using the Currents dashboard and a CI:

Create an organization and a project
Install @currents/playwright npm package
Enable traces, videos and screenshots in playwright.config.js|ts to enhance the dashboard test results
Run the tests using pwc CLI command or by configuring an extra reporter
Update your CI provider configuration

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

Update `playwright.config.js|ts`

Enabled traces, videos and screenshots in playwright.config.js|ts to enhance the dashboard test results.

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

Create your first Playwright run

@currents/playwright provides an executable script named pwc - it runs playwright with a predefined configuration.

Alternatively, you can add @currents/playwright reporter to playwright.config.ts

Using `pwc` CLI command

Run pwc to create your first Playwright run in Currents dashboard.

npx pwc --key RECORD_KEY --project-id PROJECT_ID --ci-build-id hello-currents

Set the Record Key, and Project ID obtained from Currents dashboard in the previous step.
Provide --ci-build-id to identify this run in the dashboard - the example above uses hello-currents as the build ID.

Please note that CI environments require generating the Build ID based on CI environment variables.

@currents/playwright automatically detects the Build ID for popular CI providers, but in some cases, you need to define it explicitly.

We encourage you to invest 3 minutes into learning more about CI Build ID to prevent confusion during the setup.

Manually configuring `@currents/playwright` reporter

Alternatively, you can explicitly add the reporter to Playwright configuration:

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

const currentsConfig: CurrentsConfig = {
  ciBuildId: "ci-build-id", // 📖 https://currents.dev/readme/guides/ci-build-id
  recordKey: "secret record key", // 📖 https://currents.dev/readme/guides/record-key
  projectId: "project id", // get one at https://app.currents.dev
};

const config: PlaywrightTestConfig = {
  use: {
    trace: "on",
    video: "on",
    screenshot: "on",
  },
  
  reporter: [currentsReporter(currentsConfig)], // 👈🏻 add Currents reporter

  projects: [
    {
      name: "chromium",
      retries: 2,
      use: {
        ...devices["Desktop Chrome"],
      },
    },
  ],

};

export default defineConfig(config);

You can also set environment variables to provide the configuration options to Currents reporter:

CURRENTS_PROJECT_ID=PROJECT_ID \ // the projectId from https://app.currents.dev
CURRENTS_RECORD_KEY=RECORD_KEY \ // the record key from https://app.currents.dev
CURRENTS_CI_BUILD_ID=hello-currents \
npx playwright test

cmd /V /C "set CURRENTS_PROJECT_ID=PROJECT_ID // the projectId from https://app.currents.dev
&& set CURRENTS_RECORD_KEY=RECORD_KEY // the record key from https://app.currents.dev
&& set CURRENTS_CI_BUILD_ID=hello-currents 
&& npx playwright test"

With the reporter configured, you can run npx playwright test to start sending the results to Currents dashboard.

Explore the Newly Created Run

If Currents reporter is set up correctly, the execution results will show on the Currents dashboard. Additionally, a link to the recorded run will also be available at the end of the execution:

Please consider exploring those guides to ensure smooth configuration:

Now you can start configuring your CI environment to record Playwright tests to Currents.

Update CI Provider Configuration

Treat the Record Key as a CI secret - don't expose it publicly

In order to collect results from multiple CI runners, please make sure that --ci-build-id is similar across parallel machines, but is unique for each build.

Currents support collecting results from parallel executions on multiple machines using the built-in Playwright Sharding and also Playwright Orchestration. The results will be kept as a single dashboard run as long as they share the same CI build ID.

Examples

Check out the example repositories that showcase running Playwright tests on popular CI providers and recording the results to Currents:

Explore @currents/playwright npm package documentation for configuration options.

PreviousWhat is Currents?NextYour First Cypress Run

Last updated 5 days ago