Skip to content

Commit

Permalink
fix linting and JS npm scripts
Browse files Browse the repository at this point in the history
  • Loading branch information
@wswebcreation
wswebcreation committed Nov 9, 2023
1 parent a26b7d3 commit d48734f
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 96 deletions.
19 changes: 13 additions & 6 deletions docs/visual-testing/integrations/cypress.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ You can alternatively take a look to our [example repository](#example).
Sauce Visual provides an integration with [Cypress](https://cypress.io) through a plugin that you can add to any existing Cypress project.

Sauce Labs Visual introduce a new Cypress command:

- `cy.sauceVisualCheck()`: Takes a screenshot and send it to Sauce Labs Visual for comparison.

## Quickstart
Expand All @@ -29,19 +30,20 @@ Sauce Labs Visual introduce a new Cypress command:
- Install the Sauce Visual for Cypress plugin in your current project.

```sh
npm install --save @saucelabs/cypress-visual-plugin
npm install --save-dev @saucelabs/cypress-visual-plugin
```

### Step 2: Configure Cypress to use Sauce Visual for Cypress plugin

- Import the plugin in Cypress project configuration, at the top of the file:

```ts
import { CypressSauceVisual } from '@saucelabs/cypress-visual-plugin';
```

- Register the plugin to Cypress events in Cypress project configuration:

``` ts
```ts
export default defineConfig({
e2e: {
[...]
Expand All @@ -53,6 +55,7 @@ export default defineConfig({
```

- Register Sauce Visual for Cypress commands. Add the following line in your `cypress/support/e2e.ts`:

```ts
import '@saucelabs/cypress-visual-plugin/commands';
```
Expand All @@ -69,7 +72,6 @@ context('Sauce Demo', () => {
});
```


### Step 4: Configure your Sauce Labs credentials

Sauce Visual relies on environment variables for authentications.<br />
Expand All @@ -95,6 +97,7 @@ Builds will appear on Sauce Labs platform as soon as they have been created by t
Sauce Visual for Cypress plugin extends Cypress configuration, allowing to define the context, thus acting on which baselines new snapshots will be compared to. ([More info on baseline matching](/visual-testing/#baseline-matching))

Options:

- `region`: Sauce Labs Region where the new build will be created (default: `us-west-1`)
- `buildName`: Name of the build (default: `Cypress Visual Testing`)
- `project`: Name of the project (default: `None`)
Expand All @@ -103,6 +106,7 @@ Options:
They need to be set through the `saucelabs` attribute of `e2e` configuration.

Example:

```javascript
export default defineConfig({
e2e: {
Expand All @@ -127,13 +131,15 @@ Those ignored regions are specified when requesting a new snapshot.
#### User-specified ignored region
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 heigh of the region to ignore
*Note: all values are pixels*
_Note: all values are pixels_
Example:
```javascript
cy.sauceVisualCheck('login-page', {
ignoredRegions: [
Expand All @@ -154,6 +160,7 @@ Alternatively, an ignored region can be a specific element from the page.
If the selectors matches multiple elements, all will be ignored.
Example:
```javascript
cy.sauceVisualCheck('login-page', {
ignoredRegions: [
Expand All @@ -169,6 +176,7 @@ Sauce Visual is relying on native screenshot feature from Cypress. As `cy.snapsh
The field `cypress` from `options` will be transmitted as it to `cy.screenshot` command.
Example:
```javascript
cy.sauceVisualCheck('login-page', {
cypress: {
Expand All @@ -185,5 +193,4 @@ Screenshots will be captured and sent to Sauce Labs only when `cypress run` is e
## Example
An example project is available [here](https://github.com/saucelabs/visual-examples/tree/main/cypress).
An example project is available [here](https://github.com/saucelabs/visual-examples/tree/main/cypress).
168 changes: 91 additions & 77 deletions docs/visual-testing/integrations/java.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ You can alternatively take a look to our [example repository](#examples).
Sauce Labs Visual provides an library allowing integration with [WebDriver](https://www.selenium.dev/documentation/webdriver/).

Sauce Labs Visual plugin provides a library exposing a `VisualApi` object that provides actions:

- `visual.sauceVisualCheck()`: Takes a screenshot and send it to Sauce Labs Visual for comparison.
- `visual.sauceVisualResults()`: Waits for all diff calculations to complete and returns a summary of results.
See [Test results summary](#test-results-summary) for more details about summary format and sample usage.
Expand All @@ -29,20 +30,22 @@ Sauce Labs Visual plugin provides a library exposing a `VisualApi` object that p
### Step 1: Add Sauce Labs Visual dependecy

Add [Sauce Visual](https://central.sonatype.com/artifact/com.saucelabs.visual/java-client) dependency to your pom.xml
```xml
<dependency>
<groupId>com.saucelabs.visual</groupId>
<artifactId>java-client</artifactId>
<version>0.3.121</version>
<scope>test</scope>
</dependency>
```

*Note: You can find the latest versions available [here](https://central.sonatype.com/search?q=com.saucelabs.visual).*
```xml
<dependency>
<groupId>com.saucelabs.visual</groupId>
<artifactId>java-client</artifactId>
<version>0.3.121</version>
<scope>test</scope>
</dependency>
```

_Note: You can find the latest versions available [here](https://central.sonatype.com/search?q=com.saucelabs.visual)._

### Step 2: Configure Visual Testing integration

Declare a RemoteWebDriver and a VisualApi instance as class variables

```java
import org.openqa.selenium.remote.RemoteWebDriver;
import com.saucelabs.visual.VisualApi;
Expand All @@ -54,111 +57,115 @@ Declare a RemoteWebDriver and a VisualApi instance as class variables
Initialize `RemoteWebDriver` and `VisualApi`

<Tabs
defaultValue="JUnit"
defaultValue="JUnit"
  values={[
    {label: 'JUnit', value: 'JUnit'},
    {label: 'TestNG', value: 'TestNG'},
  ]}>
<TabItem value="JUnit">

```java
import org.junit.jupiter.api.BeforeAll;

@BeforeAll
public static void init() {
driver = new RemoteWebDriver(webDriverUrl, capabilities);
visual = new VisualApi.Builder(driver, sauceUsername, sauceAccessKey, DataCenter.US_WEST_1).build();
}
```
<TabItem value="JUnit">

```java
import org.junit.jupiter.api.BeforeAll;

@BeforeAll
public static void init() {
driver = new RemoteWebDriver(webDriverUrl, capabilities);
visual = new VisualApi.Builder(driver, sauceUsername, sauceAccessKey, DataCenter.US_WEST_1).build();
}
```

</TabItem>
<TabItem value="TestNG">

```java
import org.testng.annotations.BeforeSuite;
```java
import org.testng.annotations.BeforeSuite;

@BeforeSuite
public static void init() {
driver = new RemoteWebDriver(webDriverUrl, capabilities);
visual = new VisualApi.Builder(driver, sauceUsername, sauceAccessKey, DataCenter.US_WEST_1).build();
}
```

@BeforeSuite
public static void init() {
driver = new RemoteWebDriver(webDriverUrl, capabilities);
visual = new VisualApi.Builder(driver, sauceUsername, sauceAccessKey, DataCenter.US_WEST_1).build();
}
```
</TabItem>
</Tabs>


Don't forget to quit the WebDriver
<Tabs
defaultValue="JUnit"
defaultValue="JUnit"
  values={[
    {label: 'JUnit', value: 'JUnit'},
    {label: 'TestNG', value: 'TestNG'},
  ]}>
<TabItem value="JUnit">

```java
import org.junit.jupiter.api.AfterAll;

@AfterAll
public static void tearDown() {
if (driver != null) {
driver.quit();
}
}
```
<TabItem value="JUnit">

```java
import org.junit.jupiter.api.AfterAll;

@AfterAll
public static void tearDown() {
if (driver != null) {
driver.quit();
}
}
```

</TabItem>
<TabItem value="TestNG">

```java
import org.testng.annotations.AfterSuite;
```java
import org.testng.annotations.AfterSuite;

@AfterSuite
public static void tearDown() {
if (driver != null) {
driver.quit();
}
}
```

@AfterSuite
public static void tearDown() {
if (driver != null) {
driver.quit();
}
}
```
</TabItem>
</Tabs>


### Step 3: Add visual tests in your tests

Add a check to one of your tests:

<Tabs
defaultValue="JUnit"
defaultValue="JUnit"
  values={[
    {label: 'JUnit', value: 'JUnit'},
    {label: 'TestNG', value: 'TestNG'},
  ]}>
<TabItem value="JUnit">
<TabItem value="JUnit">

```java
import org.junit.jupiter.api.Test;
```java
import org.junit.jupiter.api.Test;

@Test
void checkLoginLooksTheSame() {
var loginPage = new LoginPage(driver);
loginPage.open();
@Test
void checkLoginLooksTheSame() {
var loginPage = new LoginPage(driver);
loginPage.open();

visual.sauceVisualCheck("Before Login");
}
```

visual.sauceVisualCheck("Before Login");
}
```
</TabItem>
<TabItem value="TestNG">

```java
import org.testng.annotations.Test;

@Test
void checkLoginLooksTheSame() {
var loginPage = new LoginPage(driver);
loginPage.open();

visual.sauceVisualCheck("Before Login");
}
```
```java
import org.testng.annotations.Test;

@Test
void checkLoginLooksTheSame() {
var loginPage = new LoginPage(driver);
loginPage.open();

visual.sauceVisualCheck("Before Login");
}
```

</TabItem>
</Tabs>

Expand All @@ -185,13 +192,15 @@ Builds will appear on Sauce Labs platform as soon as they have been created by t
### Test results summary

`VisualApi#sauceVisualResults()` returns a summary of test results in `Map<DiffStatus, Integer>` 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
- `DiffStatus.REJECTED`: Diffs that have detected changes and have been rejected

Sample usage:

```java
assertEquals(visual.sauceVisualResults().get(DiffStatus.UNAPPROVED), EXPECTED_TOTAL_UNAPPROVED_DIFFS);
```
Expand All @@ -203,11 +212,13 @@ When creating the service in `VisualApi`, extra fields can be set to define the
It needs to be defined through the `VisualApi.Builder` object.

Methods available:

- `withBuild(String build)`: Sets the name of the build
- `withProject(String project)`: Sets the name of the project
- `withBranch(String branch)`: Sets the name of the branch

Example:

```java
visual = new Builder(driver, username, accessKey, DataCenter.US_WEST_1)
.withBuild("Sauce Demo Test")
Expand All @@ -227,6 +238,7 @@ An ignored component can be a specific element from the page.
Those ignored components are specified when requesting a new snapshot.

Example:

```java
Options options = new Options();
options.setIgnoreElements(List.of(
Expand All @@ -244,9 +256,10 @@ Alternatively, ignored regions can be user-specified areas. A region is defined
- `width`: The width of the region to ignore
- `height`: The height of the region to ignore

*Note: all values are pixels*
_Note: all values are pixels_

Example:

```java
Options options = new Options();
IgnoreRegion ignoreRegion = new IgnoreRegion(
Expand All @@ -262,5 +275,6 @@ Example:
## Examples

Two examples are available:

- An example project [using Junit](https://github.com/saucelabs/visual-examples/tree/main/wd-java)
- An example project [using TestNG](https://github.com/saucelabs/visual-examples/tree/main/wd-java-testng)
2 changes: 1 addition & 1 deletion docs/visual-testing/integrations/storybook.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ This package leverage's Storybook's test-runner and metadata generation system f
2. Install this plugin in an existing project from the root:

```sh
npm i -D @saucelabs/visual-storybook
npm i --save-dev @saucelabs/visual-storybook
```

3. Eject your test-runner config and append the Sauce Visual storybook configuration:
Expand Down
Loading

0 comments on commit d48734f

Please sign in to comment.