Merge pull request #207 from replayio/filip/dev-456-we-should-have-a-more-opinionated-cypress-setup-guide

simplify cypress github ci docs

Author: filiphric

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 %}

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

@@ -0,0 +1,77 @@
+---
+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/[email protected]
+        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/[email protected]
+        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 %}

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:
 

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

@@ -28,7 +28,8 @@ 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?
 

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/[email protected]
-        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/[email protected]
-  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 %}

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 = {

src/lib/navigation.ts

@@ -309,6 +309,10 @@ export const navigation: Record<NavigationNames, NavigationItem[]> = {
           title: 'Upload strategies',
           href: '/reference/ci-workflows/upload-strategies',
         },
+        {
+          title: 'GitHub upload action',
+          href: '/reference/ci-workflows/github-action-upload',
+        },
       ],
     },
     {

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": [