diff --git a/docs/visual-testing.md b/docs/visual-testing.md index f9fc51a528..caee53b961 100644 --- a/docs/visual-testing.md +++ b/docs/visual-testing.md @@ -3,6 +3,8 @@ title: Sauce Visual Testing sidebar_label: Overview --- +import IntegrationE2ELinks from './visual-testing/_partials/_integration-e2e-links.md'; + Get clear and instant visibility into the impact of code changes on your UI across browsers, devices, and operating systems with our automated visual testing solution, which generates side-by-side comparisons of your UI versions with DOM diffs inspection. Know exactly where and what has changed so that you can deliver a consistent and intuitive user experience. @@ -147,14 +149,7 @@ Sauce Visual provides integrations with different kind of frameworks:

E2E Testing

- +
diff --git a/docs/visual-testing/_partials/_integration-e2e-links.md b/docs/visual-testing/_partials/_integration-e2e-links.md new file mode 100644 index 0000000000..4f52c7f616 --- /dev/null +++ b/docs/visual-testing/_partials/_integration-e2e-links.md @@ -0,0 +1,9 @@ + diff --git a/docs/visual-testing/workflows/review.md b/docs/visual-testing/workflows/review.md index aecda720a3..8efab4902a 100644 --- a/docs/visual-testing/workflows/review.md +++ b/docs/visual-testing/workflows/review.md @@ -154,6 +154,57 @@ The process of reviewing and approving the visual differences is the same as des The user interface including the actions you can take are described in [User Interface](#user-interface). +## Enhancing test accuracy + +Ignored regions are areas of a user interface excluded from visual checks. +These regions often contain dynamic content or non-critical elements that change frequently. +Defining ignore regions helps focus on significant UI discrepancies, reducing false positives and enhancing test accuracy. + +### Code ignored regions +- **Definition**: defined only in the code and are linked to specific snapshots. +- **Initialization**: can be added from the first run. +- **Specification**: defined by provided dimensions or by elements. +- **Auto-Adjustment**: automatically adjusted size with the corresponding element. +- **Auto-Propagation**: populated across all screenshot variations (capabilities). + +Check our integration documentation to learn how to get started. + +[Cypress](../../integrations/cypress/#ignored-regions), [C#/.Net](../../integrations/csharp/#ignored-regions), +[Java](../../integrations/java/#ignored-regions), [Nightwatch](../../integrations/nightwatch/#ignored-regions), +[WebdriverIO](../../integrations/webdriverio/#ignored-regions), [Python](../../integrations/python/#ignored-regions), +[Python (Robot Framework)](../../integrations/python-robot-framework/#ignored-regions) + +### UI ignored regions (available soon) + +:::note +We recommend using Code ignored regions over UI ignore regions whenever possible +::: + +- **Definition**: can be defined only on UI. Every modification will create a new baseline and link UI ignored regions to specific baseline. +- **Initialization**: can be added after the first run and snapshot approval. +- **Specification**: defined by provided dimensions. +- **Manual-Adjustment**: defined size should adjust for changes in dimensions, like longer or wrapped text. +- **Manual-Propagation**: needs to be manually added to all screenshot variations (capabilities). + +#### Defining regions + +Open "Ignored regions" in diff review overlay +Open Ignored regions + +Click "Add New Region" +Add Ignored regions + +1 - Adjust the region size and position by dragging it with the mouse
+1a - Optionally, you can change the ignoring types. Before using, please read [Selective Diffing](../../selective-diffing/)
+2 - Click "Save All" +Save Ignored regions + +Congratulations! You added a new UI ignored region. Now you can continue the review process. + +:::note +Updated UI Ignored Regions will be reflected in both future and older builds. +::: + ## User Interface Selecting one of the builds allows you to get to the "Diff Review" page, where you can Accept or Reject detected diffs. @@ -165,7 +216,7 @@ By default, you will see diffs in a Side-by-side view, which lets you easily com - Zoom in or out of the snapshots. - Zoom to 100% or fit snapshot to the screen. - Highlight or hide diffs for easier discovery of the changes. -- Open Diff Inspection +- Open Diff Inspector There are conditional actions you can use, depending on the type of view you have activated: @@ -188,7 +239,8 @@ The list below shows the available actions and their keyboard shortcuts. | Hide diffs icon | Hide diffs \[H\] | | Sync pan and zoom icon | Sync pan and zoom \[P\] | | View current icon | Toggle Baseline and Current snapshots \[T\] | -| Show Diff Inspection | Toggle Diff Inspection \[I\] | +| Show Diff Inspector | Diff Inspector \[I\] | +| Show Ignored Regions | Ignored Regions \[J\] | ### Additional Keyboard Actions diff --git a/docs/visual-testing/workflows/test-execution.md b/docs/visual-testing/workflows/test-execution.md index 81d60413d1..7d4892dee8 100644 --- a/docs/visual-testing/workflows/test-execution.md +++ b/docs/visual-testing/workflows/test-execution.md @@ -5,6 +5,7 @@ sidebar_label: Test Execution import useBaseUrl from '@docusaurus/useBaseUrl'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import IntegrationE2ELinks from '../_partials/_integration-e2e-links.md'; # Test Execution Workflow @@ -23,12 +24,7 @@ Sauce Visual provides integrations with different kind of frameworks:

E2E Testing

- +
diff --git a/static/img/sauce-visual/build-overlay-ignore-add.jpg b/static/img/sauce-visual/build-overlay-ignore-add.jpg new file mode 100644 index 0000000000..06975f3550 Binary files /dev/null and b/static/img/sauce-visual/build-overlay-ignore-add.jpg differ diff --git a/static/img/sauce-visual/build-overlay-ignore-save.jpg b/static/img/sauce-visual/build-overlay-ignore-save.jpg new file mode 100644 index 0000000000..ef123422e8 Binary files /dev/null and b/static/img/sauce-visual/build-overlay-ignore-save.jpg differ diff --git a/static/img/sauce-visual/build-overlay-ignore.jpg b/static/img/sauce-visual/build-overlay-ignore.jpg new file mode 100644 index 0000000000..4ccd075458 Binary files /dev/null and b/static/img/sauce-visual/build-overlay-ignore.jpg differ diff --git a/static/img/sauce-visual/ignored-regions.png b/static/img/sauce-visual/ignored-regions.png new file mode 100644 index 0000000000..1141011696 Binary files /dev/null and b/static/img/sauce-visual/ignored-regions.png differ