# @currents/playwright ## Requirements * NodeJS 14.0.0+ * Playwright 1.22.2+ *** ## Setup Creating a new organization and a project at , you'll see on-screen instructions with your newly created **Project ID** and **Record Key.** ### Install `@currents/playwright` ```bash npm i -D @currents/playwright ``` ### Create `currents.config.ts` Create `currents.config.(m|j|t)s` configuration file. * Set the **Record Key**, and **Project ID** obtained from Currents dashboard. * Learn more about [ci-build-id](https://docs.currents.dev/guides/parallelization-guide/ci-build-id "mention"). ```typescript import { CurrentsConfig } from "@currents/playwright"; const config: CurrentsConfig = { recordKey: process.env.CURRENTS_RECORD_KEY || throw new Error("oh no!"), projectId: process.env.CURRENTS_PROJECT_ID }; export default config; ``` ### Update `playwright.config.js|ts` Enabled traces, videos and screenshots in `playwright.config.js|ts` ```javascript use: { // ... trace: "on", video: "on", screenshot: "on", } ``` *** ## Usage Choose the preferred usage method. See details below. * `pwc` command-line executable. * Run `pwc test` instead of `playwright test` * `pwc` automatically configures Playwright to work with Currents * Keep Currents configuration in `currents.config.ts` * Manually add Currents Reporter. * Explicitly add Currents reporter to `playwright.config.ts` * Run `playwright test` as usual * Keep Currents configuration in `currents.config.ts` * `pwc-p` command-line executable for orchestration. * Required to enable [#playwright-orchestration](https://docs.currents.dev/guides/ci-optimization/playwright-parallelization#playwright-orchestration "mention"). * See [playwright-orchestration](https://docs.currents.dev/guides/ci-optimization/playwright-orchestration "mention"). * See [pwc-p-orchestration](https://docs.currents.dev/resources/reporters/currents-playwright/pwc-p-orchestration "mention") ### `pwc` command-line executable ``` npx pwc --key RECORD_KEY --project-id PROJECT_ID --ci-build-id hello-currents ``` * `pwc` reads configuration from `currents.config.ts` * Run `pwc` to start recording Playwright runs to Currents. * Learn more about [ci-build-id](https://docs.currents.dev/guides/parallelization-guide/ci-build-id "mention"). * See [pwc](https://docs.currents.dev/resources/reporters/currents-playwright/pwc "mention") reference documentation. {% hint style="info" %} Using `pwc` command overrides the reporters configured in `playwright.config.ts` - you can specify additional reporters using `--reporter` flag. Alternatively, you can explicitly add currents reported in the Playwright configuration as appears below. {% endhint %} ### Manually Add Currents Reporter You can manually add Current sreporter to `playwright.config.ts` and keep using `playwright test` CLI command. ```typescript // playwright.config.ts import { defineConfig, devices, PlaywrightTestConfig } from "@playwright/test"; import { CurrentsFixtures, CurrentsWorkerFixtures, currentsReporter } from "@currents/playwright"; export default defineConfig({ // ... reporter: [currentsReporter()], // 👈🏻 add Currents reporter }) ``` * The reporter reads the configuration from `currents.config.ts` file. See additional configuration options [#configuration](#configuration "mention"). * Run `npx playwright test` to start sending the results to Currents dashboard. * Learn more about [ci-build-id](https://docs.currents.dev/guides/parallelization-guide/ci-build-id "mention"). *** ## Configuration Numerous configuration options are available. See [configuration](https://docs.currents.dev/resources/reporters/currents-playwright/configuration "mention"). *** ## Fixtures The package also provides additional fixtures for Playwright that support various features: * [code-coverage-for-playwright](https://docs.currents.dev/guides/coverage/code-coverage-for-playwright "mention") * [currents-actions](https://docs.currents.dev/guides/currents-actions "mention") {% content-ref url="currents-playwright/playwright-fixtures" %} [playwright-fixtures](https://docs.currents.dev/resources/reporters/currents-playwright/playwright-fixtures) {% endcontent-ref %} *** ## Examples * Run all tests in the current directory: ``` pwc --key --project-id ``` * Run orchestration for all tests in the current directory: ``` pwc-p --key --project-id --ci-build-id ``` * Run only tests filtered by the tag "@smoke": ``` pwc --key --project-id --grep smoke ``` * Run playwright tests and add tags "tagA", "tagB" to the recorded run: ``` pwc --key --project-id --tag tagA --tag tagB ``` * Provide `playwright` arguments and flags: ``` pwc --key --project-id -- --workers 2 --timeout 10000 --shard 1/2 ``` ## CI Examples Check out the example repositories that showcase running Playwright tests on popular CI providers and recording the results to Currents: * [github-actions](https://docs.currents.dev/getting-started/ci-setup/github-actions "mention") * [gitlab](https://docs.currents.dev/getting-started/ci-setup/gitlab "mention") * [jenkins](https://docs.currents.dev/getting-started/ci-setup/jenkins "mention") * [playwright-circleci](https://docs.currents.dev/getting-started/ci-setup/playwright-circleci "mention") * [playwright-aws-code-build](https://docs.currents.dev/getting-started/ci-setup/playwright-aws-code-build "mention") * [playwright-azure-devops](https://docs.currents.dev/getting-started/ci-setup/playwright-azure-devops "mention") Explore how to speed up CI Playwright runs by enabling [playwright-parallelization](https://docs.currents.dev/guides/ci-optimization/playwright-parallelization "mention"). --- # 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.md?ask= ``` 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.