Make all readme files point to Sauce Docs (#645)

* Make all readme files point to Sauce Docs * try customizing branch name with github vars * try customizing branch name with github vars * try customizing branch name with github vars * try customizing branch name with github vars * try customizing branch name with github vars * try customizing branch name with github vars * try customizing branch name with github vars * try customizing branch name with github vars * try customizing branch name with github vars * fix storybook test
saucelabs · Jul 19, 2024 · 68a8ddd · 68a8ddd
1 parent 2632d78
commit 68a8ddd
Show file tree

Hide file tree

Showing 20 changed files with 59 additions and 1,572 deletions.
diff --git a/.github/workflows/dotnet.yml b/.github/workflows/dotnet.yml
@@ -29,14 +29,17 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Build NUnit example
-        uses: docker/build-push-action@v4
+      - name: Build XUnit example
+        uses: docker/build-push-action@v6
         with:
           context: ./dotnet-xunit
           file: ./dotnet-xunit/Dockerfile
           push: false
           secrets: |
             "dotenv=${{ secrets.DOTENV }}"
+          build-args: |
+            GITHUB_RUN_ID=${{ github.run_id }}
+            GITHUB_RUN_ATTEMPT=${{ github.run_attempt }}
 
   nunit:
     runs-on: ubuntu-latest
@@ -46,10 +49,13 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Build NUnit example
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
         with:
           context: ./dotnet-nunit
           file: ./dotnet-nunit/Dockerfile
           push: false
           secrets: |
-            "dotenv=${{ secrets.DOTENV }}"
+            "dotenv=${{ secrets.DOTENV }}"
+          build-args: |
+            GITHUB_RUN_ID=${{ github.run_id }}
+            GITHUB_RUN_ATTEMPT=${{ github.run_attempt }}
diff --git a/cypress/README.md b/cypress/README.md
@@ -67,11 +67,13 @@ npm run sauce-visual-check
 Alternatively, you can run your tests on Sauce Labs.
 
 - Install `saucectl`
+
 ```sh { name=npm-install-saucectl}
 npm install saucectl
 ```
 
 - Install the plugin in your `.sauce/config.yml`
+
 ```yml
 [...]
 
@@ -83,6 +85,7 @@ npm:
 ```
 
 - Run saucectl
+
 ```sh { name=saucectl-run }
 npx saucectl run
 ```
@@ -91,197 +94,13 @@ npx saucectl run
 - Accept all diffs, so they become new baselines.
 
 - Run saucectl (with a modified screen)
+
 ```sh { name=saucectl-run-visual-check }
 VISUAL_CHECK=true npx saucectl run
 ```
 
 - Go to https://app.saucelabs.com/visual/builds to review changes.
 
-## How to add visual testing to your setup
-
-- Add plugin to your Cypress project
-
-```sh
-npm install --save @saucelabs/cypress-visual-plugin
-```
-
-- Add plugin in the project configuration, at the top of the file:
-```ts
-import { CypressSauceVisual } from '@saucelabs/cypress-visual-plugin';
-
-export default defineConfig({
-  e2e: {
-    [...]
-    setupNodeEvents(on, config) {
-      CypressSauceVisual.register(on, config);
-    },
-  },
-})
-```
-
-- Register Sauce Visual for Cypress commands. Add the following line in your `cypress/support/e2e.ts`:
-```ts
-import '@saucelabs/cypress-visual-plugin/commands';
-```
-
-- Capture screenshot in one of your tests:
-
-```ts
-context('Sauce Demo', () => {
-  it('.type() - type into a DOM element', () => {
-    cy.visit('https://www.saucedemo.com/')
-
-    cy.visualCheck('visual: my-homepage');
-  })
-});
-```
-
-- Configure with your Sauce credentials from https://app.saucelabs.com/user-settings.
-
-```sh
-export SAUCE_USERNAME=__YOUR_SAUCE_USER_NAME__
-export SAUCE_ACCESS_KEY=__YOUR_SAUCE_ACCESS_KEY__
-```
-
-- Run the test the way you are used to.
-
-
-## Advanced usage
-
-### Test results summary
-
-`cy.sauceVisualResults()` can be used to obtain a summary of test results. The command will make the test wait until the results are calculated and return a summary in format:
-```ts
-    {
-        QUEUED: number; // Diffs that are pending for processing. Should be 0 in case the test is completed without any timeouts
-        EQUAL: number; // Diffs that have no changes detected
-        UNAPPROVED: number; // Diffs that have detected changes and waiting for action
-        APPROVED: number; // Diffs that have detected changes and have been approved
-        REJECTED: number; // Diffs that have detected changes and have been rejected
-    }
-```
-
-`cy.sauceVisualResults()` is particularly useful for composing assertions on the result of each visual test.
-
-Example:
-```ts
-    const EXPECTED_TOTAL_UNAPPROVED_DIFFS = 0;
-
-    cy.sauceVisualResults().its("UNAPPROVED").should("eq", EXPECTED_TOTAL_UNAPPROVED_DIFFS);
-```
-
-### Build name
-
-`buildName` can be defined in the `cypress.config.js` configuration file.
-
-Example
-```javascript
-export default defineConfig({
-  e2e: {
-    [...]
-    saucelabs: {
-      buildName: 'SauceDemo - Cypress',
-    },
-    [...]
-  }
-}
-```
-
-### Project
-
-`project` can be defined in the `cypress.config.js` configuration file.
-
-Example
-```javascript
-export default defineConfig({
-  e2e: {
-    [...]
-    saucelabs: {
-      project: process.env.GITHUB_REPOSITORY,
-    },
-    [...]
-  }
-}
-```
-
-### Branch
-
-`branch` can be defined in the `cypress.config.js` configuration file.
-
-Example
-```javascript
-export default defineConfig({
-  e2e: {
-    [...]
-    saucelabs: {
-      branch: process.env.GITHUB_REF_NAME,
-    },
-    [...]
-  }
-}
-```
-
-### Region
-
-By default, visual tests are uploaded to `us-west-1` region. \
-This value can be overridden in the `cypress.config.js` configuration file.
-
-Example
-```javascript
-export default defineConfig({
-  e2e: {
-    [...]
-    saucelabs: {
-      region: 'eu-central-1',
-    },
-    [...]
-  }
-}
-```
-
-### Ignored regions
-
-#### Component-based ignored region
-
-Sauce Visual provides a way to ignore a list of components.
-
-An ignored component can be a specific element from the page.
-
-Those ignored components are specified when requesting a new snapshot.
-
-Example:
-
-```javascript
-    cy.visualCheck('login-page', { ignoredRegions: [
-      cy.get('[data-test="username"]'),
-    ] });
-```
-
-#### User-specified ignored region
-
-Alternatively, ignored regions can be user-specified areas. A region is defined by four elements.
-
-- `x`, `y`: The location of the top-left corner of the ignored region
-- `width`: The width of the region to ignore
-- `height`: The height of the region to ignore
-
-*Note: all values are pixels*
-
-Example:
-
-```javascript
-    cy.visualCheck('login-page', { ignoredRegions: [
-      {
-        x: 240,
-        y: 800,
-        width: 1520,
-        height: 408
-      }
-    ] });
-```
-
-## Limitations
-
-Sauce Visual plugin for Cypress **DOES NOT** support `cypress open`.
+## Installation & Usage
 
-Screenshots will be captured and sent to Sauce Labs only when `cypress run` is executed.
+View installation and usage instructions on the [Sauce Docs website](https://docs.saucelabs.com/visual-testing/integrations/cypress/).
diff --git a/dotnet-nunit/Dockerfile b/dotnet-nunit/Dockerfile
@@ -21,5 +21,9 @@ WORKDIR /workspace
 
 COPY . .
 
+ARG GITHUB_RUN_ID
+ARG GITHUB_RUN_ATTEMPT
+ARG SAUCE_VISUAL_BRANCH_NAME=${GITHUB_RUN_ID}${GITHUB_RUN_ATTEMPT}
+
 RUN --mount=type=secret,id=dotenv,target=/workspace/.env env $(cat /workspace/.env | xargs) runme run dotnet-test
 RUN --mount=type=secret,id=dotenv,target=/workspace/.env env $(cat /workspace/.env | xargs) runme run dotnet-test-modified