Skip to content
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

Baseline management doc and images added #3005

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
46 changes: 46 additions & 0 deletions docs/visual-testing/workflows/baseline-management.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
sidebar_label: Baseline Management (BETA)
---

import useBaseUrl from '@docusaurus/useBaseUrl';

# Baseline Management

The Baseline Management feature lets you oversee the approved visual snapshots from your tests.
It allows you to track visual regressions through time and check baselines for different branches and projects.
Additionally, you can view the baseline history, download images, and view associated build details.

While logged in to Sauce Labs, navigate to this feature by clicking the "Visual -> Baselines" in the side navigation.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
While logged in to Sauce Labs, navigate to this feature by clicking the "Visual -> Baselines" in the side navigation.
While logged in to Sauce Labs, you can access this feature by clicking "Visual -> Baselines" in the side navigation.


<img src={useBaseUrl('img/sauce-visual/baselines-navigation.jpg')} alt="Baselines navigation item" />

## Baselines Page

The Baselines page allows you to view all accepted snapshots in a project and branch.
Select a Project at the top and then Branch to view baselines.
If these are not set for your tests, all baselines will be displayed together under the `(not set)` option.

You can further filter baselines by OS, browser, or device. Options to sort and group are also available.

<img src={useBaseUrl('img/sauce-visual/baselines-page.jpg')} alt="Baselines page results" />

## Baseline History View

Baseline History allows you to view and manage historical snapshots of a single test baseline.
This view opens after you click on any snapshot from the Baselines page.

<img src={useBaseUrl('img/sauce-visual/baseline-history.jpg')} alt="Baseline history view displaying a snapshot with list of changes in time" />

Once inside Baseline History view, you can perform the following actions by clicking the `...` button on any item in the list:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Once inside Baseline History view, you can perform the following actions by clicking the `...` button on any item in the list:
Once inside the Baseline History view, you can perform the following actions by clicking the `...` button on any item in the list:


- **Set as New Baseline**: Mark older approvals of a snapshot as the new baseline for visual comparison.
- **Download Image**: Download individual snapshot for local viewing or archiving.
- **View Build**: Access visual build details where a certain version of the snapshot was approved.

<img src={useBaseUrl('img/sauce-visual/baseline-history-options.jpg')} alt="Baseline history options dropdown showing three options" />

## Accessing Baseline History From Build Details
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Accessing Baseline History From Build Details
## Accessing Baseline History from Diff Overlay

I think this is more accurate
https://docs.dev.saucelabs.net/pr-preview/pr-3005/visual-testing/workflows/review/#diff-review-overlay


For easier reviewing experience and navigating to and from baselines, the test runs with pre-approved baselines will show a link to Baseline history at the top.

<img src={useBaseUrl('img/sauce-visual/build-overlay-history.jpg')} alt="Build run displaying a link to Baseline history at the top" />
1 change: 1 addition & 0 deletions sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -1707,6 +1707,7 @@ module.exports = {
items: [
'visual-testing/workflows/test-execution',
'visual-testing/workflows/review',
'visual-testing/workflows/baseline-management',
'visual-testing/workflows/ci',
'visual-testing/workflows/api-lifecycle',
],
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/sauce-visual/baseline-history.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/sauce-visual/baselines-navigation.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/sauce-visual/baselines-page.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.