Skip to content

Commit

Permalink
Make all readme files point to Sauce Docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@kb-kerem
kb-kerem committed Jul 17, 2024
1 parent 5381e04 commit ef55dfc
Show file tree
Hide file tree
Showing 14 changed files with 38 additions and 1,565 deletions.
193 changes: 6 additions & 187 deletions cypress/README.md
View file
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/).
157 changes: 2 additions & 155 deletions dotnet-nunit/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,159 +37,6 @@ MODIFIED=true dotnet test

- Open the test or go to https://app.saucelabs.com/visual/builds to review changes.

## How to add visual testing to your setup
## Installation & Usage

- Add [sauce visual](https://www.nuget.org/packages/SauceLabs.Visual/) dependency
```powershell {"id":"01HHQ3FQDWBD7ZSD2PQKG2AKDZ"}
dotnet add package SauceLabs.Visual
```

- Declare a RemoteWebDriver and a VisualApi instance as class variables

```csharp {"id":"01HHQ3FQDWBD7ZSD2PQQ2E5HSZ"}
using OpenQA.Selenium.Remote;
using SauceLabs.Visual;

private RemoteWebDriver Driver { get; set; }
private VisualClient VisualClient { get; set; }
```

- Initialize WebDriver and VisualApi in `[OneTimeSetUp]` method

```csharp {"id":"01HHQ3FQDWBD7ZSD2PQTRQSGV3"}
[OneTimeSetUp]
public async Task Setup()
{
var capabilities = GetCapabilities();

Driver = new RemoteWebDriver(sauceUrl, capabilities);
VisualClient = await VisualClient.Create(Driver, Region.UsWest1);
// Enable other options
VisualClient.CaptureDom = true;
}
```

- Add a check to one of your tests:

```csharp {"id":"01HHQ3FQDWBD7ZSD2PQZQMJRH1"}
await VisualClient.VisualCheck("My login page")
```

- Don't forget to quit the WebDriver in @AfterAll section

```csharp {"id":"01HHQ3FQDWBD7ZSD2PR1PW1V54"}
[OneTimeTearDown]
public async Task Teardown()
{
Driver?.Quit();
VisualClient.Dispose();
}
```

- Create a `SetUpFixture` class that will take care of closing your Visual build:

```csharp {"id":"01HHQ3FQDWBD7ZSD2PR1PW1V54"}
[SetUpFixture]
public class SetupFixture
{
[OneTimeTearDown]
public async Task RunAfterAnyTests()
{
await VisualClient.Finish();
}
}
```

- Configure with your Sauce credentials from https://app.saucelabs.com/user-settings.

```sh {"id":"01HHQ3FQDWBD7ZSD2PR4Y27KEQ"}
export SAUCE_USERNAME=__YOUR_SAUCE_USERNAME__
export SAUCE_ACCESS_KEY=__YOUR_SAUCE_ACCESS_KEY__
```

- Run the test the way you are used to.

## Advanced usage

### Test results summary

`VisualClient.VisualResults()` returns a summary of test results in `Dictionnary<DiffStatus, int>` format where `DiffStatus` is one of the following:

- `DiffStatus.QUEUED`: Diffs that are pending for processing. Should be 0 in case the test is completed without any timeouts
- `DiffStatus.EQUAL`: Diffs that have no changes detected
- `DiffStatus.UNAPPROVED`: Diffs that have detected changes and waiting for action
- `DiffStatus.APPROVED`: Diffs that have detected changes and have been approved
- `DiffStatus.REJECTED`: Diffs that have detected changes and have been rejected

Sample usage:

```csharp
var expectedTotalUnapprovedDiffs = 0;

var results = await VisualClient.VisualResults();
Assert.AreEqual(expectedTotalUnapprovedDiffs, results[DiffStatus.Unapproved]);
```

### Build attributes

When creating the `VisualClient` client, extra fields can be set to define the context, thus acting on which baselines new snapshots will be compared to. ([More info on baseline matching](../../visual-testing.md#baseline-matching))

It needs to be defined through a `CreateBuildOptions` object.

Properties available:
- `string? Name`: The name of the build
- `string? Project`: The name of the project
- `string? Branch`: The name of the branch
- `string? CustomId`: A customId to be able to retrieve the current build
- `string? DefaultBranch`: The name of the default branch

Example:

```csharp
VisualClient = await VisualClient.Create(Driver, Region.UsWest1,
new CreateBuildOptions() { Name = "My Visual Build", Project = "csharp-project", Branch = "feature-branch" });
```

### 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:

```csharp
var btnAction = Driver.FindElement(By.CssSelector(".app_logo"));

await VisualClient.VisualCheck("Inventory Page",
new VisualCheckOptions()
{
IgnoreElements = new[] { btnAction }
});
```

#### 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:

```csharp
await VisualClient.VisualCheck("Inventory Page",
new VisualCheckOptions()
{
IgnoreRegions = new[] { new IgnoreRegion(10, 10, 100, 100) }
});
```

[Follow me](/wd-java/src/test/java/com/example/InventoryIgnoreRegionsTest.java#L38-L50) to see complete working example
View installation and usage instructions on the [Sauce Docs website](https://docs.saucelabs.com/visual-testing/integrations/csharp/).
Loading

0 comments on commit ef55dfc

Please sign in to comment.