Sauce visual clip element (#2917)

* c# clip selector * clip element docs * clip element docs * clip element docs * capitalize title * drop clipSelector on docs * fix links * fix links * fix links * fix links --------- Co-authored-by: Kerem Beygo <[email protected]> Co-authored-by: Alex Plischke <[email protected]>
saucelabs · Sep 3, 2024 · 8814624 · 8814624
1 parent ff3d039
commit 8814624
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 26 deletions.
diff --git a/docs/visual-testing/_partials/_clipping-description.md b/docs/visual-testing/_partials/_clipping-description.md
@@ -1,4 +1,4 @@
-You can clip to a specific element on the page by using the `clipSelector` option when calling Sauce visual.
+You can clip to a specific element on the page by using the `clipElement` option when calling Sauce Visual.
 
 Notes:
 

diff --git a/docs/visual-testing/_partials/_clipping-webdriver.md b/docs/visual-testing/_partials/_clipping-webdriver.md
diff --git a/docs/visual-testing/integrations/csharp.md b/docs/visual-testing/integrations/csharp.md
@@ -4,6 +4,7 @@ sidebar_label: C#/.Net
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import ClippingDescription from '../_partials/_clipping-description.md';
 import EnvironmentVariables from '../_partials/_environment-variables.md';
 import FullPageLimit from '../_partials/_fullpage-limit.md';
 import SelectiveDiffing from '../_partials/_selective-diffing.md';
@@ -441,6 +442,21 @@ await VisualClient.VisualCheck("C# full page config",
 
 <FullPageLimit />
 
+### Clip to an Element
+
+<ClippingDescription />
+
+Example:
+
+```csharp
+var element = Driver.FindElementByCssSelector(".your-css-selector");
+await VisualClient.VisualCheck("Visible Sale Banner",
+    new VisualCheckOptions()
+    {
+        ClipElement = element,
+    });
+```
+
 ## Examples
 
 Two examples are available:

diff --git a/docs/visual-testing/integrations/cypress.md b/docs/visual-testing/integrations/cypress.md
@@ -4,7 +4,6 @@ sidebar_label: Cypress
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import ClippingDescription from '../_partials/_clipping-description.md';
 import EnvironmentVariables from '../_partials/_environment-variables.md';
 import SelectiveDiffing from '../_partials/_selective-diffing.md';
 import SelectiveDiffingGlobal from '../_partials/_selective-diffing-global.md';
@@ -321,9 +320,9 @@ cy.sauceVisualCheck('Inventory Page', {
 });
 ```
 
-### Clip to an element
+### Clip to an Element
 
-<ClippingDescription />
+You can clip to a specific element on the page by using the `clipSelector` option.
 
 Example:
 

diff --git a/docs/visual-testing/integrations/java.md b/docs/visual-testing/integrations/java.md
@@ -437,18 +437,24 @@ visual.sauceVisualCheck("Long content page", options);
 
 <FullPageLimit />
 
-### Clip to an element
+### Clip to an Element
 
 <ClippingDescription />
 
 Example:
 
 ```java
 import com.saucelabs.visual.CheckOptions;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.remote.RemoteWebDriver;
 
-CheckOptions options = new CheckOptions();
-options.setClipSelector(".your-css-selector");
-visual.sauceVisualCheck("Visible Sale Banner", options);
+RemoteWebDriver driver;
+...
+
+WebElement element = driver.findElement(By.cssSelector(".your-css-selector"));
+visual.sauceVisualCheck(
+        "Visible Sale Banner", new CheckOptions.Builder().withClipElement(element).build());
 ```
 
 ## Examples

diff --git a/docs/visual-testing/integrations/nightwatch.md b/docs/visual-testing/integrations/nightwatch.md
@@ -5,7 +5,7 @@ sidebar_label: Nightwatch
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import FullPageJS from '../_partials/_fullpage-js.md'
-import ClippingWDIO from '../_partials/_clipping-webdriver.md';
+import ClippingDescription from '../_partials/_clipping-description.md';
 import EnvironmentVariables from '../_partials/_environment-variables.md';
 import SelectiveDiffing from '../_partials/_selective-diffing.md';
 import SelectiveDiffingGlobal from '../_partials/_selective-diffing-global.md';
@@ -358,9 +358,18 @@ browser
 
 <FullPageJS />
 
-### Clip to an element
+### Clip to an Element
 
-<ClippingWDIO />
+<ClippingDescription />
+
+Example:
+
+```ts
+await browser.sauceVisualCheck('Visible Sale Banner', {
+  // An element that we should crop the screenshot to
+  clipElement: browser.element('.your-css-selector')
+})
+```
 
 ### Fail on failures
 

diff --git a/docs/visual-testing/integrations/webdriverio.md b/docs/visual-testing/integrations/webdriverio.md
@@ -3,7 +3,7 @@ sidebar_label: WebdriverIO
 ---
 
 import FullPageJS from '../_partials/_fullpage-js.md';
-import ClippingWDIO from '../_partials/_clipping-webdriver.md';
+import ClippingDescription from '../_partials/_clipping-description.md';
 import EnvironmentVariables from '../_partials/_environment-variables.md';
 import SelectiveDiffing from '../_partials/_selective-diffing.md';
 import SelectiveDiffingGlobal from '../_partials/_selective-diffing-global.md';
@@ -268,9 +268,18 @@ browser.sauceVisualCheck('Before Login', {
 
 <FullPageJS />
 
-### Clip to an element
+### Clip to an Element
 
-<ClippingWDIO />
+<ClippingDescription />
+
+Example:
+
+```ts
+await browser.sauceVisualCheck('Visible Sale Banner', {
+  // An element that we should crop the screenshot to
+  clipElement: await $('.your-css-selector')
+})
+```
 
 ## Example