From 920ecce04ecfbb7eb096a634c17279073659ab17 Mon Sep 17 00:00:00 2001 From: Filip Hric Date: Wed, 19 Jun 2024 14:46:29 +0200 Subject: [PATCH 1/2] simplify cypress github ci docs --- .../ci-workflows/github-action-upload/page.md | 72 +++++++++++++++++++ .../test-runners/cypress-io/faq/page.md | 2 +- .../cypress-io/github-actions/page.md | 69 +++++------------- src/components/Icon.tsx | 2 + src/lib/navigation.ts | 4 ++ vercel.json | 4 ++ 6 files changed, 101 insertions(+), 52 deletions(-) create mode 100644 src/app/reference/ci-workflows/github-action-upload/page.md diff --git a/src/app/reference/ci-workflows/github-action-upload/page.md b/src/app/reference/ci-workflows/github-action-upload/page.md new file mode 100644 index 0000000..c037120 --- /dev/null +++ b/src/app/reference/ci-workflows/github-action-upload/page.md @@ -0,0 +1,72 @@ +--- +title: GitHub upload action +--- +GitHub upload action takes care of uploading your recordings during your CI test runs on GitHub. It enables you to filter the recordings you upload to Replay App. + +{% tabs labels=["cypress", "playwright"] %} +{% tab %} +```yaml {% fileName=".github/workflows/e2e.yml" highlight=["15-19"] lineNumbers=true %} +name: End-to-end tests +on: push +jobs: + cypress-run: + runs-on: ubuntu-22.04 + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Install Replay Chromium + run: npx replayio install + - name: Cypress run + uses: cypress-io/github-action@v6 + with: + browser: replay-chromium + - name: Upload replays + if: always() + uses: replayio/action-upload@v0.5.1 + with: + api-key: ${{ secrets.REPLAY_API_KEY }} +``` +{% /tab %} +{% tab %} +```yml {% fileName=".github/workflows/e2e.yml" lineNumbers=true highlight=["19-23"] %} +name: End-to-end tests +on: + pull_request: + push: + branches: [main] +jobs: + e2e-tests: + runs-on: ubuntu-22.04 + steps: + - name: Checkout + uses: actions/checkout@v4 + # If you're using Yarn or PNPM, use the appropriate install command here + - name: Install dependencies + run: npm ci + - name: Install Replay Chromium + run: npx replayio install + - name: Run Playwright tests + run: npx playwright test --project replay-chromium + - name: Upload replays + if: always() + uses: replayio/action-upload@v0.5.1 + with: + api-key: ${{ secrets.REPLAY_API_KEY }} +``` +{% /tab %} +{% /tabs %} + +{% callout %} +Make sure to set `if: ${{ always() }}` so that this step is always executed, even when the previous step fails. +{% /callout %} + +{% quick-links title="Learn more" %} + +{% quick-link + title="Upload strategies" + icon="uploadicon" + description="There are different strategies for uploading your replays such as uploading only on test flakes or failures." + href="/reference/ci-workflows/upload-strategies" +/%} + +{% /quick-links %} \ No newline at end of file diff --git a/src/app/reference/test-runners/cypress-io/faq/page.md b/src/app/reference/test-runners/cypress-io/faq/page.md index af35f9d..6721a0d 100644 --- a/src/app/reference/test-runners/cypress-io/faq/page.md +++ b/src/app/reference/test-runners/cypress-io/faq/page.md @@ -28,7 +28,7 @@ title: Frequently asked questions - All logs - DEBUG=cypress:launcher:browsers RECORD_REPLAY_VERBOSE=1 - {% /table %} +{% /table %} ## How do I group tests ran in a matrix or across multiple runners into the same test run? diff --git a/src/app/reference/test-runners/cypress-io/github-actions/page.md b/src/app/reference/test-runners/cypress-io/github-actions/page.md index cc0cae8..f6bfc1d 100644 --- a/src/app/reference/test-runners/cypress-io/github-actions/page.md +++ b/src/app/reference/test-runners/cypress-io/github-actions/page.md @@ -1,20 +1,12 @@ --- -title: GitHub actions +title: GitHub actions with Cypress --- -Cypress team has created its [official GitHub Action](https://github.com/cypress-io/github-action). The action provides dependency installation, built-in caching, and multiple options for advanced workflow configuration. - -Using this GitHub Action is optional and some teams prefer their own custom setup. Replay integrates well with both workflows, as shown in examples below - {% callout %} -These instructions assume that you have already installed [`@replayio/cypress`](https://www.npmjs.com/package/@replayio/cypress) plugin into your project. [Follow the instructions on this page](/basics/getting-started/record-your-cypress-tests) to learn how to install the plugin. +These instructions assume that you have already [set up your Cypress project](/basics/getting-started/record-your-cypress-tests). {% /callout %} -## Using GitHub Actions with `cypress-io/github-action` - -When using the Cypress [GitHub Action](https://github.com/cypress-io/github-action), the CI setup requires just a couple of lines of code. For the Cypress run itself, the `replay-chromium` browser needs to be passed in to create recordings. - -After test run finishes, an additional step needs to be added to upload all the recordings using `@replayio/action-upload` action. +This example uses [Cypress GitHub Action](https://github.com/cypress-io/github-action) that provides dependency installation, built-in caching, and multiple options for advanced workflow configuration. For recording your test, the `replay-chromium` browser needs to be passed as a browser. ```yaml {% fileName=".github/workflows/e2e.yml" highlight=["11-19"] lineNumbers=true %} name: End-to-end tests @@ -33,48 +25,23 @@ jobs: browser: replay-chromium env: REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }} - - name: Upload replays - if: always() - uses: replayio/action-upload@v0.5.1 - with: - api-key: ${{ secrets.REPLAY_API_KEY }} ``` -## Using GitHub Actions without `cypress-io/github-action` - -Without using GitHub Actions and running your Cypress tests by calling a script, the main principles stay the same: +Running with Replay browser will create your replays. These are stored locally on your CI and need to be uploaded to Replay app once the test run is finished. -- you need to make sure to pass `REPLAY_API_KEY` to your test run -- add step to your pipeline to upload your replays +{% quick-links title="Learn more" %} -There are a couple of different ways to achieve this. For example, you can update your `package.json` file with a custom script that runs your Cypress tests with Replay Browser - -```json {% fileName="package.json" highlight=[3] %} -"scripts": { - "cy:run": "cypress run", // original test script - "cy:run:replay": "cypress run --browser=replay-chromium" // new test script -} -``` +{% quick-link + title="Upload strategies" + icon="uploadicon" + description="There are different strategies for uploading your replays such as uploading only on test flakes or failures." + href="/reference/ci-workflows/upload-strategies" +/%} +{% quick-link + title="GitHub upload action" + icon="github" + description="GitHub upload action takes care of uploading your recordings during your CI test runs on GitHub. It enables you to filter the recordings you upload to Replay App." + href="/reference/ci-workflows/github-action-upload" +/%} -Use that new test script instead in your current workflow file, and add the environment variable(s): - -```yaml {% fileName=".github/workflows/e2e.yml (partial)" lineNumbers=true highlight=[2] %} -- name: Cypress run - run: npm run cy:run:replay - env: - REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }} -``` - -Add a new step to run after your Cypress tests for uploading the replays: - -```yaml {% fileName=".github/workflows/e2e.yml (partial)" lineNumbers=true %} -- name: Upload replays - if: always() - uses: replayio/action-upload@v0.5.1 - with: - api-key: ${{ secrets.REPLAY_API_KEY }} -``` - -{% callout title="Upload strategies" %} -There are different strategies for uploading your replays. For example you can use Replay only when retrying a failed test, or choose to upload recordings from failed tests only. See [docs on upload strategies](/reference/ci-workflows/upload-strategies) to learn more. -{% /callout %} +{% /quick-links %} \ No newline at end of file diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 6cd1038..2bff5f9 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -55,6 +55,7 @@ import { PauseIcon } from './icons/PauseIcon' import { VideocamSharp } from './icons/VideocamSharp' import { ReduxIcon } from './icons/ReduxIcon' import { Vercel } from './icons/Vercel' +import { UploadIcon } from './icons/UploadIcon' export const icons = { bracketscurly: BracketsCurlyIcon, @@ -111,6 +112,7 @@ export const icons = { video: VideocamSharp, redux: ReduxIcon, vercel: Vercel, + uploadicon: UploadIcon } export const iconStyles = { diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts index 9a33c29..558a992 100644 --- a/src/lib/navigation.ts +++ b/src/lib/navigation.ts @@ -309,6 +309,10 @@ export const navigation: Record = { title: 'Upload strategies', href: '/reference/ci-workflows/upload-strategies', }, + { + title: 'GitHub upload action', + href: '/reference/ci-workflows/github-action-upload', + } ], }, { diff --git a/vercel.json b/vercel.json index 57bf64f..9b6fa88 100644 --- a/vercel.json +++ b/vercel.json @@ -1112,6 +1112,10 @@ { "source": "/test-runners/cypress-io", "destination": "/reference/test-runners/cypress-io/overview" + }, + { + "source": "/docs/setting-up-a-team-f5bd9ee853814d6f84e23fb535066199#4913df9eb7384a94a23ccbf335189370", + "destination": "/reference/ci-workflows/generate-api-key" } ], "rewrites": [ From d7aace53b0909252c4b7a6c577631fa8854ede3c Mon Sep 17 00:00:00 2001 From: Filip Hric Date: Wed, 19 Jun 2024 15:07:09 +0200 Subject: [PATCH 2/2] fix formatting issues --- src/app/learn/examples/cypress-io/page.md | 9 ++++++--- .../ci-workflows/github-action-upload/page.md | 11 ++++++++--- .../reference/replay-teams/okta-integration/page.md | 6 ++++-- .../reference/test-runners/cypress-io/faq/page.md | 1 + .../test-runners/cypress-io/github-actions/page.md | 12 ++++++------ src/components/Icon.tsx | 2 +- src/lib/navigation.ts | 2 +- 7 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/app/learn/examples/cypress-io/page.md b/src/app/learn/examples/cypress-io/page.md index 3de54fa..7fba1b3 100644 --- a/src/app/learn/examples/cypress-io/page.md +++ b/src/app/learn/examples/cypress-io/page.md @@ -13,7 +13,8 @@ Take a look at the YAML file for the workflow definition. We recommend diving in - [project repository](https://github.com/replayio-public/overboard) - [workflow file](https://github.com/replayio-public/overboard/blob/main/.github/workflows/cypress.yaml) - {% /callout %} + +{% /callout %} ## Debugging a Cypress test flake on CI @@ -30,7 +31,8 @@ The replay shown in video [can be found on this link](https://replay.help/cypres {% callout title="Debugging a flaky test" type="link" %} - [link to the replay showing flaky Cypress test](https://replay.help/cypress-flake-debug) - {% /callout %} + +{% /callout %} ## False positive accessibility check @@ -44,4 +46,5 @@ You can read about the debugging process in this blogpost. If you want to see th - [example project](https://github.com/replayio/replay-examples/tree/main/examples/03_accessibility_false_positive) - [blogpost about the false positive case](https://blog.replay.io/finding-%22false-positive%22-tests-with-replay.io) - {% /callout %} + +{% /callout %} diff --git a/src/app/reference/ci-workflows/github-action-upload/page.md b/src/app/reference/ci-workflows/github-action-upload/page.md index c037120..dbb89bd 100644 --- a/src/app/reference/ci-workflows/github-action-upload/page.md +++ b/src/app/reference/ci-workflows/github-action-upload/page.md @@ -1,10 +1,12 @@ --- title: GitHub upload action --- + GitHub upload action takes care of uploading your recordings during your CI test runs on GitHub. It enables you to filter the recordings you upload to Replay App. {% tabs labels=["cypress", "playwright"] %} {% tab %} + ```yaml {% fileName=".github/workflows/e2e.yml" highlight=["15-19"] lineNumbers=true %} name: End-to-end tests on: push @@ -26,8 +28,10 @@ jobs: with: api-key: ${{ secrets.REPLAY_API_KEY }} ``` + {% /tab %} {% tab %} + ```yml {% fileName=".github/workflows/e2e.yml" lineNumbers=true highlight=["19-23"] %} name: End-to-end tests on: @@ -53,6 +57,7 @@ jobs: with: api-key: ${{ secrets.REPLAY_API_KEY }} ``` + {% /tab %} {% /tabs %} @@ -62,11 +67,11 @@ Make sure to set `if: ${{ always() }}` so that this step is always executed, eve {% quick-links title="Learn more" %} -{% quick-link - title="Upload strategies" +{% quick-link + title="Upload strategies" icon="uploadicon" description="There are different strategies for uploading your replays such as uploading only on test flakes or failures." href="/reference/ci-workflows/upload-strategies" /%} -{% /quick-links %} \ No newline at end of file +{% /quick-links %} diff --git a/src/app/reference/replay-teams/okta-integration/page.md b/src/app/reference/replay-teams/okta-integration/page.md index 3679735..7e0622d 100644 --- a/src/app/reference/replay-teams/okta-integration/page.md +++ b/src/app/reference/replay-teams/okta-integration/page.md @@ -41,11 +41,13 @@ Logging in with SSO, is as easy as going to app.replay.io, clicking Sign In with To make this change, you must have Admin access to your Okta deployment. 1. Find the necessary dialogue to add an App by going to Admin → Applications → Applications. Here’s an example of the screen you should see: - {% figure alt="Elements panel" src="/images/okta-2.webp" height=440 width=870/%} + +{% figure alt="Elements panel" src="/images/okta-2.webp" height=440 width=870/%} 2. Click on “Create App Integration”, select “SAML 2.0” and click on Next. 3. In General Settings give the name to the app: “Replay” and click Next. - {% figure alt="Elements panel" src="/images/okta-3.webp" height=440 width=870/%} + +{% figure alt="Elements panel" src="/images/okta-3.webp" height=440 width=870/%} 4. Using the configuration info sent from Replay (and referencing the above) fill out the next screen. Here is an example of that screen filled out with example information: diff --git a/src/app/reference/test-runners/cypress-io/faq/page.md b/src/app/reference/test-runners/cypress-io/faq/page.md index 6721a0d..6b5a56d 100644 --- a/src/app/reference/test-runners/cypress-io/faq/page.md +++ b/src/app/reference/test-runners/cypress-io/faq/page.md @@ -28,6 +28,7 @@ title: Frequently asked questions - All logs - DEBUG=cypress:launcher:browsers RECORD_REPLAY_VERBOSE=1 + {% /table %} ## How do I group tests ran in a matrix or across multiple runners into the same test run? diff --git a/src/app/reference/test-runners/cypress-io/github-actions/page.md b/src/app/reference/test-runners/cypress-io/github-actions/page.md index f6bfc1d..3bf5e00 100644 --- a/src/app/reference/test-runners/cypress-io/github-actions/page.md +++ b/src/app/reference/test-runners/cypress-io/github-actions/page.md @@ -6,7 +6,7 @@ title: GitHub actions with Cypress These instructions assume that you have already [set up your Cypress project](/basics/getting-started/record-your-cypress-tests). {% /callout %} -This example uses [Cypress GitHub Action](https://github.com/cypress-io/github-action) that provides dependency installation, built-in caching, and multiple options for advanced workflow configuration. For recording your test, the `replay-chromium` browser needs to be passed as a browser. +This example uses [Cypress GitHub Action](https://github.com/cypress-io/github-action) that provides dependency installation, built-in caching, and multiple options for advanced workflow configuration. For recording your test, the `replay-chromium` browser needs to be passed as a browser. ```yaml {% fileName=".github/workflows/e2e.yml" highlight=["11-19"] lineNumbers=true %} name: End-to-end tests @@ -31,17 +31,17 @@ Running with Replay browser will create your replays. These are stored locally o {% quick-links title="Learn more" %} -{% quick-link - title="Upload strategies" +{% quick-link + title="Upload strategies" icon="uploadicon" description="There are different strategies for uploading your replays such as uploading only on test flakes or failures." href="/reference/ci-workflows/upload-strategies" /%} -{% quick-link - title="GitHub upload action" +{% quick-link + title="GitHub upload action" icon="github" description="GitHub upload action takes care of uploading your recordings during your CI test runs on GitHub. It enables you to filter the recordings you upload to Replay App." href="/reference/ci-workflows/github-action-upload" /%} -{% /quick-links %} \ No newline at end of file +{% /quick-links %} diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 2bff5f9..8801287 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -112,7 +112,7 @@ export const icons = { video: VideocamSharp, redux: ReduxIcon, vercel: Vercel, - uploadicon: UploadIcon + uploadicon: UploadIcon, } export const iconStyles = { diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts index 558a992..00472e9 100644 --- a/src/lib/navigation.ts +++ b/src/lib/navigation.ts @@ -312,7 +312,7 @@ export const navigation: Record = { { title: 'GitHub upload action', href: '/reference/ci-workflows/github-action-upload', - } + }, ], }, {