IRIS-963 Add selective-diffing to visual docs (#2773)

* IRIS-963 Add selective-diffing to visual docs * Apply suggestions from code review --------- Co-authored-by: Benjamin Karran <[email protected]>
saucelabs · May 8, 2024 · ca88c75 · ca88c75
1 parent d1a20dc
commit ca88c75
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/docs/visual-testing/integrations/java.md b/docs/visual-testing/integrations/java.md
@@ -390,6 +390,25 @@ options.setClipSelector(".your-css-selector");
 visual.sauceVisualCheck("Visible Sale Banner", options);
 ```
 
+#### Selective Diffing (BETA)
+
+[Selective regions](../selective-diffing.md) are an even more powerful way to control diffing.
+
+```java
+EnumSet<DiffingFlag> visualChanges = EnumSet.of(DiffingFlag.Visual);
+
+visual.sauceVisualCheck(
+        "Before Login",
+        new CheckOptions.Builder()
+            .withDiffingMethod(DiffingMethod.BALANCED)
+            .disable(EnumSet.of(DiffingFlag.Position, DiffingFlag.Dimensions))
+            .enable(visualChanges, loginPage.getInputUsername())
+            .disable(visualChanges, loginPage.getInputUsername())
+            .build());
+```
+
+You can find the full example in our [examples repo](#examples).
+
 ## Examples
 
 Two examples are available:

diff --git a/docs/visual-testing/selective-diffing.md b/docs/visual-testing/selective-diffing.md
@@ -0,0 +1,33 @@
+---
+id: selective-diffing
+title: Sauce Labs Visual Testing
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+## Selective Diffing
+
+Sauce Visual allows you to ignore only certain types of changes.
+We support the following change types:
+- **Content:** The text, image or other content changes.
+- **Dimensions:** When the size of an element changes.
+- **Position:** When the position (top left corner) of an element changes.
+- **Structure:** When an element or attribute was added, deleted or moved.
+- **Style:** When CSS was changed.
+- **Visual:** When something visually changed that cannot be categorized.
+
+> Note: To benefit from selective diffing, you need
+>   - A baseline with a DOM capture
+>   - A snapshot with a DOM capture
+>   - To request the BALANCED diffing method during the visual check
+
+For each snapshot, you can specify which types of changes should be detected or ignored.
+
+In addition to setting the types of changes on a snapshot level, you can also define *regions*
+based on selectors / elements in your testing framework.
+For each region, you can again opt in or opt out of change types.
+The regional setting overrides all settings that you may have done on a snapshot level.
+
+> Please note that overlapping regions with competing diffing settings will result in undefined behavior.