Merge pull request #198 from replayio/explicit-install-instructions-replayio-cypress

Make Replay installation instructions explicit in Cypress docs

Author: bvaughn

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

@@ -3,24 +3,35 @@ title: Frequently asked questions
 ---
 
 ## How do I get debug logs?
+
 {% table %}
+
 - Debug focus
 - Command
+
 ---
+
 - Cypress
 - `DEBUG=replay:cypress:*`
+
 ---
+
 - Replay plugin
 - `DEBUG=replay:cypress:plugin`
+
 ---
+
 - Replay Browser
 - DEBUG=cypress:launcher:browsers RECORD_REPLAY_VERBOSE=1
+
 ---
+
 - 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?
+
 By default, each invocation of Cypress is grouped into a test run by a UUID generated when the run begins. To group multiple invocations of Cypress into the same run, set `RECORD_REPLAY_METADATA_TEST_RUN_ID` to the same UUID value and that will be used instead of generating a UUID for each.
 
 Below is an example which runs three test suites using a matrix in Github Actions but groups the results into the same test run in Replay:
@@ -47,21 +58,24 @@ test:
         node-version: 16
     - name: Install dependencies
       run: npm ci
+    - name: Install Replay Chromium
+      run: npx replayio install
     - name: Run
       run: npm run test-${{ matrix.product }}
       env:
         RECORD_REPLAY_METADATA_TEST_RUN_ID: ${{ needs.test-run-id.outputs.testRunId }}
 ```
 
 ## What’s in the `.replay` folder?
-`/.replay/runtimes` - this is where the replay browser(s) are installed
+
+`/.replay/runtimes` - this is where the replay browser is installed
 
 `/` - recorded replays are saved locally in the root folder
 
 If you’re trying to cache the browser download, cache `~/.replay/runtimes` or simply cache it before creating replays.
 
+## How do I confirm that the browser is installed correctly
 
-## How do I confirm that the browsers are installed correctly
 Run `ls -alR ~/.replay/runtimes` to see the contents of the runtimes folder.
 
 ## How do I troubleshoot recordings not being created?
@@ -74,15 +88,14 @@ export default defineConfig({
     setupNodeEvents(cyOn, config) {
       const on = wrapOn(cyOn)
       // ... rest of your plugins-related code
-    }
-  }
+    },
+  },
 })
 ```
 
 const on = wrapOn(cyOn)
 
 ## What other environment variables can I configure?
-`REPLAY_SKIP_BROWSER_DOWNLOAD` - keeps browsers from being downloaded and installed during `npm install`
 
 `RECORD_REPLAY_METADATA_TEST_RUN_TITLE` - manually apply a test run title, instead of being inferred from the latest commit
 

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

@@ -2,7 +2,7 @@
 title: GitHub actions
 ---
 
-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. 
+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
 
@@ -25,6 +25,8 @@ jobs:
     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:
@@ -41,10 +43,12 @@ jobs:
 ## 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:
+
 - you need to make sure to pass `REPLAY_API_KEY` to your test run
 - add step to your pipeline to upload your replays
 
 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

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

@@ -30,20 +30,18 @@ Available browsers found on your system are:
  - firefox:dev
  - firefox:nightly
  - electron
- - Replay Firefox
 ```
 
 - This is expected (for now). Check first whether the process exits immediately, chances are the test ends up proceeding as expected!
 - While modifying `cypress.config.js`, make sure you’re returning the `config` object in `setupNodeEvents`
-- Make sure you’re using the correct browser for your operating system. `replay-chromium` is only supported on linux, whereas `replay-firefox` supports both mac and linux.
-- The environment variable `[CYPRESS_INSTALL_BINARY](https://docs.cypress.io/guides/references/advanced-installation)` may be suppressing the browser install step. If it’s set to `0`, make sure to add an explicit workflow step to install the browsers (`npx @replayio/cypress install`)
+- Make sure you’re using the correct browser for your operating system. `replay-chromium` is only supported on linux and mac
+- The environment variable `[CYPRESS_INSTALL_BINARY](https://docs.cypress.io/guides/references/advanced-installation)` may be suppressing the browser install step. If it’s set to `0`, make sure to add an explicit workflow step to install the browsers (`npx replayio install`)
 - Your caching strategy might be keeping our plugin from pulling in the correct browser. Start debugging it by turning off all caching, e.g. `actions/cache`
 
 # How do I use Replay with versions earlier than 10.9?
 
 Replay works best with Cypress 10.9 or later but can be used with Cypress 8 or later with some additional environment configuration:
 
-- `RECORD_ALL_CONTENT` must be set when using `replay-firefox` to record replays
 - `RECORD_REPLAY_METADATA_FILE` must be set for either browser to capture metadata about the test run.
 
 When running locally, you can set these variables in your npm scripts so they are set every time:
@@ -58,14 +56,15 @@ When running locally, you can set these variables in your npm scripts so they ar
 On CI, you can set these environment variables on the task that runs your tests:
 
 ```yaml
-  # Install NPM dependencies, cache them correctly  
+  - name: Install Replay Chromium
+    run: npx replayio install
+  # Install NPM dependencies, cache them correctly
   # and run all Cypress tests
   - name: Cypress run
     uses: cypress-io/github-action@v5
 			with:
 				browser: replay-chromium
 			env:
-				RECORD_ALL_CONTENT: 1
 				RECORD_REPLAY_METADATA_FILE: /tmp/replay-metadata
 
 ```
@@ -83,7 +82,7 @@ sudo dpkg -i libssl1.1_1.1.1f-1ubuntu2.22_amd64.deb
 
 If you’re using DeploySentinel, you may notice that either you are unable to record replays or the replays created do not show the Cypress Panel when you open them. This is caused by environment variables set by our plugin that are not passed on by DeploySentinel.
 
-Fortunately, you can set this manually on the command line or in your CI configuration. Follow the [instructions for running with earlier versions of Cypress](/reference/test-runners/cypress-io/faq) to configure `RECORD_REPLAY_METADATA_FILE` (and `RECORD_ALL_CONTENT` if you’re using Firefox).
+Fortunately, you can set this manually on the command line or in your CI configuration. Follow the [instructions for running with earlier versions of Cypress](/reference/test-runners/cypress-io/faq) to configure `RECORD_REPLAY_METADATA_FILE`
 
 ```bash
 RECORD_REPLAY_METADATA_FILE=/tmp/replay-metadata.json npx run cypress
@@ -96,22 +95,22 @@ When the browser hangs while running a test, it is likely an interaction between
 You can run the test in **diagnostic mode** by passing in a mode flag.
 
 ```bash
-npx @replayio/cypress run --mode diagnostics --level full 
+npx @replayio/cypress run --mode diagnostics --level full
 ```
 
-For more information, see [Diagnostic modes](/reference/test-runners/cypress-io/overview) 
+For more information, see [Diagnostic modes](/reference/test-runners/cypress-io/overview)
 
 We also recommend going for the simplest reproduction which includes running the fewest specs possible and setting a timeout so that the test fails as soon as possible.
 
 You can use the **Cypress timeout** command to set a timeout
 
 ```jsx
-describe("test spec", () => {
-  it("test case", () => {
+describe('test spec', () => {
+  it('test case', () => {
     // set the timeout to 1min
-    cy.visit("/login", { timeout: 60000 });
-  });
-});
+    cy.visit('/login', { timeout: 60000 })
+  })
+})
 ```
 
 You can set a single spec to run, by using the `--spec` flag

src/app/reference/test-runners/playwright/faq/page.md

@@ -66,8 +66,6 @@ Run `ls -alR ~/.replay/runtimes` to see the contents of the runtimes folder.
 
 {% accordion-item title="What other environment variables can I configure?" %}
 
-`REPLAY_SKIP_BROWSER_DOWNLOAD` - keeps browsers from being downloaded and installed during `npm install`
-
 `RECORD_REPLAY_METADATA_TEST_RUN_TITLE` - manually apply a test run title, instead of being inferred from the latest commit
 
 `RECORD_REPLAY_DIRECTORY` - set a custom directory (default: `~/.replay`)

src/app/reference/test-runners/playwright/troubleshooting/page.md

@@ -29,7 +29,7 @@ Error: ENOENT: no such file or directory, open '/home/runner/.replay/PLAYWRIGHT_
 If you’re seeing this error in CI, it’s likely that the replay browser wasn’t installed correctly. The browser should be installed alongside all your other dependencies, but in the case that it’s not, try the following:
 
 1. Disable caching
-2. Have an explicit step for installing the replay browser - `npx @replayio/playwright install`
+2. Have an explicit step for installing the replay browser - `npx replayio install`
 
 {% /accordion-item %}
 {% /accordion %}