Skip to content

Commit 920ecce

Browse files
filiphricfiliphric
committed
simplify cypress github ci docs
1 parent 7354a9b commit 920ecce

File tree

6 files changed

+101
-52
lines changed

6 files changed

+101
-52
lines changed

‎src/app/reference/ci-workflows/github-action-upload/page.md

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: GitHub upload action
3+
---
4+
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.
5+
6+
{% tabs labels=["cypress", "playwright"] %}
7+
{% tab %}
8+
```yaml {% fileName=".github/workflows/e2e.yml" highlight=["15-19"] lineNumbers=true %}
9+
name: End-to-end tests
10+
on: push
11+
jobs:
12+
cypress-run:
13+
runs-on: ubuntu-22.04
14+
steps:
15+
- name: Checkout
16+
uses: actions/checkout@v4
17+
- name: Install Replay Chromium
18+
run: npx replayio install
19+
- name: Cypress run
20+
uses: cypress-io/github-action@v6
21+
with:
22+
browser: replay-chromium
23+
- name: Upload replays
24+
if: always()
25+
uses: replayio/[email protected]
26+
with:
27+
api-key: ${{ secrets.REPLAY_API_KEY }}
28+
```
29+
{% /tab %}
30+
{% tab %}
31+
```yml {% fileName=".github/workflows/e2e.yml" lineNumbers=true highlight=["19-23"] %}
32+
name: End-to-end tests
33+
on:
34+
pull_request:
35+
push:
36+
branches: [main]
37+
jobs:
38+
e2e-tests:
39+
runs-on: ubuntu-22.04
40+
steps:
41+
- name: Checkout
42+
uses: actions/checkout@v4
43+
# If you're using Yarn or PNPM, use the appropriate install command here
44+
- name: Install dependencies
45+
run: npm ci
46+
- name: Install Replay Chromium
47+
run: npx replayio install
48+
- name: Run Playwright tests
49+
run: npx playwright test --project replay-chromium
50+
- name: Upload replays
51+
if: always()
52+
uses: replayio/[email protected]
53+
with:
54+
api-key: ${{ secrets.REPLAY_API_KEY }}
55+
```
56+
{% /tab %}
57+
{% /tabs %}
58+
59+
{% callout %}
60+
Make sure to set `if: ${{ always() }}` so that this step is always executed, even when the previous step fails.
61+
{% /callout %}
62+
63+
{% quick-links title="Learn more" %}
64+
65+
{% quick-link
66+
title="Upload strategies"
67+
icon="uploadicon"
68+
description="There are different strategies for uploading your replays such as uploading only on test flakes or failures."
69+
href="/reference/ci-workflows/upload-strategies"
70+
/%}
71+
72+
{% /quick-links %}

‎src/app/reference/test-runners/cypress-io/faq/page.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ title: Frequently asked questions
2828

2929
- All logs
3030
- DEBUG=cypress:launcher:browsers RECORD_REPLAY_VERBOSE=1
31-
{% /table %}
31+
{% /table %}
3232

3333
## How do I group tests ran in a matrix or across multiple runners into the same test run?
3434

‎src/app/reference/test-runners/cypress-io/github-actions/page.md

+18-51
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
---
2-
title: GitHub actions
2+
title: GitHub actions with Cypress
33
---
44

5-
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.
6-
7-
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
8-
95
{% callout %}
10-
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.
6+
These instructions assume that you have already [set up your Cypress project](/basics/getting-started/record-your-cypress-tests).
117
{% /callout %}
128

13-
## Using GitHub Actions with `cypress-io/github-action`
14-
15-
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.
16-
17-
After test run finishes, an additional step needs to be added to upload all the recordings using `@replayio/action-upload` action.
9+
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.
1810

1911
```yaml {% fileName=".github/workflows/e2e.yml" highlight=["11-19"] lineNumbers=true %}
2012
name: End-to-end tests
@@ -33,48 +25,23 @@ jobs:
3325
browser: replay-chromium
3426
env:
3527
REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}
36-
- name: Upload replays
37-
if: always()
38-
uses: replayio/[email protected]
39-
with:
40-
api-key: ${{ secrets.REPLAY_API_KEY }}
4128
```
4229
43-
## Using GitHub Actions without `cypress-io/github-action`
44-
45-
Without using GitHub Actions and running your Cypress tests by calling a script, the main principles stay the same:
30+
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.
4631
47-
- you need to make sure to pass `REPLAY_API_KEY` to your test run
48-
- add step to your pipeline to upload your replays
32+
{% quick-links title="Learn more" %}
4933
50-
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
51-
52-
```json {% fileName="package.json" highlight=[3] %}
53-
"scripts": {
54-
"cy:run": "cypress run", // original test script
55-
"cy:run:replay": "cypress run --browser=replay-chromium" // new test script
56-
}
57-
```
34+
{% quick-link
35+
title="Upload strategies"
36+
icon="uploadicon"
37+
description="There are different strategies for uploading your replays such as uploading only on test flakes or failures."
38+
href="/reference/ci-workflows/upload-strategies"
39+
/%}
40+
{% quick-link
41+
title="GitHub upload action"
42+
icon="github"
43+
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."
44+
href="/reference/ci-workflows/github-action-upload"
45+
/%}
5846
59-
Use that new test script instead in your current workflow file, and add the environment variable(s):
60-
61-
```yaml {% fileName=".github/workflows/e2e.yml (partial)" lineNumbers=true highlight=[2] %}
62-
- name: Cypress run
63-
run: npm run cy:run:replay
64-
env:
65-
REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}
66-
```
67-
68-
Add a new step to run after your Cypress tests for uploading the replays:
69-
70-
```yaml {% fileName=".github/workflows/e2e.yml (partial)" lineNumbers=true %}
71-
- name: Upload replays
72-
if: always()
73-
uses: replayio/[email protected]
74-
with:
75-
api-key: ${{ secrets.REPLAY_API_KEY }}
76-
```
77-
78-
{% callout title="Upload strategies" %}
79-
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.
80-
{% /callout %}
47+
{% /quick-links %}

‎src/components/Icon.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ import { PauseIcon } from './icons/PauseIcon'
5555
import { VideocamSharp } from './icons/VideocamSharp'
5656
import { ReduxIcon } from './icons/ReduxIcon'
5757
import { Vercel } from './icons/Vercel'
58+
import { UploadIcon } from './icons/UploadIcon'
5859

5960
export const icons = {
6061
bracketscurly: BracketsCurlyIcon,
@@ -111,6 +112,7 @@ export const icons = {
111112
video: VideocamSharp,
112113
redux: ReduxIcon,
113114
vercel: Vercel,
115+
uploadicon: UploadIcon
114116
}
115117

116118
export const iconStyles = {

‎src/lib/navigation.ts

+4
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,10 @@ export const navigation: Record<NavigationNames, NavigationItem[]> = {
309309
title: 'Upload strategies',
310310
href: '/reference/ci-workflows/upload-strategies',
311311
},
312+
{
313+
title: 'GitHub upload action',
314+
href: '/reference/ci-workflows/github-action-upload',
315+
}
312316
],
313317
},
314318
{

‎vercel.json

+4
Original file line numberDiff line numberDiff line change
@@ -1112,6 +1112,10 @@
11121112
{
11131113
"source": "/test-runners/cypress-io",
11141114
"destination": "/reference/test-runners/cypress-io/overview"
1115+
},
1116+
{
1117+
"source": "/docs/setting-up-a-team-f5bd9ee853814d6f84e23fb535066199#4913df9eb7384a94a23ccbf335189370",
1118+
"destination": "/reference/ci-workflows/generate-api-key"
11151119
}
11161120
],
11171121
"rewrites": [

0 commit comments

Comments
 (0)