# Quick Start

{% hint style="info" %}
TL;DR take a look at the example repository:

<https://gitlab.com/currents.dev/gitlab-playwright-currents>
{% endhint %}

The example [`.gitlab-ci.yml`](https://gitlab.com/currents.dev/gitlab-playwright-currents/-/blob/main/.gitlab-ci.yml) file creates a GitLab CI pipeline with 3 workers using 3 [Playwright Shards](https://playwright.dev/docs/test-sharding):

{% code overflow="wrap" %}

```yaml
# .gitlab-ci.yml
default:
  image: mcr.microsoft.com/playwright:latest

stages:
  - test

test:
  image: mcr.microsoft.com/playwright:latest
  stage: test
  parallel: 3

  script:
    - npm ci
    - npx playwright install
    - cd ./basic
    - npx pwc --key $CURRENTS_RECORD_KEY --project-id bnsqNa --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL

```

{% endcode %}

<figure><img src="https://3745692499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqmFDEiUa9mr11LUlxDnt%2Fuploads%2Fyktlmn6KuwTbiJUIOtBc%2Fcurrents-2023-11-04-02.04.23%402x.png?alt=media&#x26;token=d5c2f042-cc2d-43cf-9345-cc733b85b8a4" alt=""><figcaption><p>Running 3 parallel jobs Playwright jobs in GitLab CI</p></figcaption></figure>

### Setup <a href="#user-content-setup" id="user-content-setup"></a>

* Create an account at <https://app.currents.dev> and grab the **Project ID** and **Record Key**.
* Add `CURRENTS_RECORD_KEY` as [GitLab CI/CD Secrets](https://docs.gitlab.com/ee/ci/variables/) (make sure it's not protected)

Additional resources:

* Playwright Features on Currents: <https://currents.dev/playwright>
* Integration Documentation: <https://currents.dev/readme/integration-with-playwright/currents-playwright>
* CI Build ID Guide: <https://currents.dev/readme/guides/cypress-ci-build-id>

### GitLab CI Playwright Results <a href="#user-content-gitlab-ci-playwright-results" id="user-content-gitlab-ci-playwright-results"></a>

The results are being reported to Currents for more efficient troubleshooting, and monitoring test suite flakiness and performance.

Currents will collect the following information:

* console output
* screenshots
* videos
* trace files
* timing
* outcomes
* flaky tests
* error details
* tags for more convenient management of the tests

#### GitLab Merge Request Notes <a href="#user-content-gitlab-merge-request-notes" id="user-content-gitlab-merge-request-notes"></a>

Take a look at the example merge request: <https://gitlab.com/currents.dev/gitlab-playwright-currents/-/merge_requests/3>

When [GitLab integration](https://currents.dev/readme/integrations/gitlab) is enabled, Currents will post a Merge Commit note with run results:

<figure><img src="https://3745692499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqmFDEiUa9mr11LUlxDnt%2Fuploads%2FRBXrvHJyWbMmihPXN6E0%2Fcurrents-gitlab-merge-note.png?alt=media&#x26;token=1ba76197-f907-4af6-aa1b-be4da49a3bb8" alt=""><figcaption><p>Currents Merge Request Notes</p></figcaption></figure>

In addition, Currents will post an [External Status check](https://docs.gitlab.com/ee/user/project/merge_requests/status_checks.html) for every Playwright project configured. For example:

<figure><img src="https://3745692499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqmFDEiUa9mr11LUlxDnt%2Fuploads%2FSXCbGXETG6Mbtwui0pDt%2Fcurrents-gitlab-status-check.png?alt=media&#x26;token=ab4e9ffa-199f-4f04-b400-5d3d120d44d9" alt=""><figcaption><p>Example of GitLab CI External Status Check </p></figcaption></figure>