Skip to content

Make all readme files point to Sauce Docs #645

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Jul 19, 2024
Merged
14 changes: 10 additions & 4 deletions .github/workflows/dotnet.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 }}
193 changes: 6 additions & 187 deletions cypress/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
[...]

Expand All @@ -83,6 +85,7 @@ npm:
```

- Run saucectl

```sh { name=saucectl-run }
npx saucectl run
```
Expand All @@ -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/).
4 changes: 4 additions & 0 deletions dotnet-nunit/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Loading
Loading