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]>

Author: 3 people

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:
 

docs/visual-testing/_partials/_clipping-webdriver.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:

docs/visual-testing/integrations/csharp.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:
 

docs/visual-testing/integrations/cypress.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

docs/visual-testing/integrations/java.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
 

docs/visual-testing/integrations/nightwatch.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