Sauce visual clip element

docs/visual-testing/_partials/_clipping-element.md

@@ -0,0 +1 @@
+Alternatively, you can also pass an element directly if you've already queried one from Selenium:

docs/visual-testing/integrations/csharp.md

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

docs/visual-testing/integrations/cypress.md

@@ -321,7 +321,7 @@ cy.sauceVisualCheck('Inventory Page', {
 });
 ```
 
-### Clip to an element
+### Clip to an Element
 
 <ClippingDescription />
 

docs/visual-testing/integrations/java.md

@@ -5,6 +5,7 @@ sidebar_label: Java
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import ClippingDescription from '../_partials/_clipping-description.md';
+import ClippingElement from '../_partials/_clipping-element.md';
 import FullPageLimit from '../_partials/_fullpage-limit.md';
 import EnvironmentVariables from '../_partials/_environment-variables.md';
 import SelectiveDiffing from '../_partials/_selective-diffing.md';
@@ -437,7 +438,7 @@ visual.sauceVisualCheck("Long content page", options);
 
 <FullPageLimit />
 
-### Clip to an element
+### Clip to an Element
 
 <ClippingDescription />
 
@@ -451,6 +452,25 @@ options.setClipSelector(".your-css-selector");
 visual.sauceVisualCheck("Visible Sale Banner", options);
 ```
 
+<ClippingElement />
+
+Example:
+
+```java
+import com.saucelabs.visual.CheckOptions;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.remote.RemoteWebDriver;
+
+RemoteWebDriver driver;
+...
+
+CheckOptions options = new CheckOptions();
+WebElement element = driver.findElement(By.cssSelector(".your-css-selector"));
+options.setClipElement(element);
+visual.sauceVisualCheck("Visible Sale Banner", options);
+```
+
 ## Examples
 
 Two examples are available:

docs/visual-testing/integrations/nightwatch.md

@@ -6,6 +6,7 @@ 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 ClippingElement from '../_partials/_clipping-element.md';
 import EnvironmentVariables from '../_partials/_environment-variables.md';
 import SelectiveDiffing from '../_partials/_selective-diffing.md';
 import SelectiveDiffingGlobal from '../_partials/_selective-diffing-global.md';
@@ -358,10 +359,21 @@ browser
 
 <FullPageJS />
 
-### Clip to an element
+### Clip to an Element
 
 <ClippingWDIO />
 
+<ClippingElement />
+
+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
 
 By default, Sauce Visual will not fail the test if there are any failures during the comparison process. A failure will be logged in the Sauce Labs Visual dashboard, but the test will continue to run.

docs/visual-testing/integrations/webdriverio.md

@@ -4,6 +4,7 @@ sidebar_label: WebdriverIO
 
 import FullPageJS from '../_partials/_fullpage-js.md';
 import ClippingWDIO from '../_partials/_clipping-webdriver.md';
+import ClippingElement from '../_partials/_clipping-element.md';
 import EnvironmentVariables from '../_partials/_environment-variables.md';
 import SelectiveDiffing from '../_partials/_selective-diffing.md';
 import SelectiveDiffingGlobal from '../_partials/_selective-diffing-global.md';
@@ -268,10 +269,21 @@ browser.sauceVisualCheck('Before Login', {
 
 <FullPageJS />
 
-### Clip to an element
+### Clip to an Element
 
 <ClippingWDIO />
 
+<ClippingElement />
+
+Example:
+
+```ts
+await browser.sauceVisualCheck('Visible Sale Banner', {
+  // An element that we should crop the screenshot to
+  clipElement: await $('.your-css-selector')
+})
+```
+
 ## Example
 
 An example project is available [here](https://github.com/saucelabs/visual-examples/tree/main/wdio).