From 8814624e3061210ccc4d016f089df4e56a8e1c8b Mon Sep 17 00:00:00 2001 From: Kerem Date: Tue, 3 Sep 2024 13:45:42 +0000 Subject: [PATCH] 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 Co-authored-by: Alex Plischke --- .../_partials/_clipping-description.md | 2 +- .../_partials/_clipping-webdriver.md | 12 ------------ docs/visual-testing/integrations/csharp.md | 16 ++++++++++++++++ docs/visual-testing/integrations/cypress.md | 5 ++--- docs/visual-testing/integrations/java.md | 14 ++++++++++---- docs/visual-testing/integrations/nightwatch.md | 15 ++++++++++++--- docs/visual-testing/integrations/webdriverio.md | 15 ++++++++++++--- 7 files changed, 53 insertions(+), 26 deletions(-) delete mode 100644 docs/visual-testing/_partials/_clipping-webdriver.md diff --git a/docs/visual-testing/_partials/_clipping-description.md b/docs/visual-testing/_partials/_clipping-description.md index f72743621e..aae8fc9cfe 100644 --- 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 deleted file mode 100644 index fa86e09411..0000000000 --- a/docs/visual-testing/_partials/_clipping-webdriver.md +++ /dev/null @@ -1,12 +0,0 @@ -import ClippingDescription from './_clipping-description.md' - - - -Example: - -```ts -await browser.sauceVisualCheck('Visible Sale Banner', { - // A document.querySelector compatible selector that we should crop the screenshot to - clipSelector: '.your-css-selector', -}) -``` diff --git a/docs/visual-testing/integrations/csharp.md b/docs/visual-testing/integrations/csharp.md index f7a879ab78..a1bf721bc4 100644 --- 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", +### Clip to an Element + + + +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 index f0ab5f2b25..7b8b335ac4 100644 --- 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 - +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 index ccb30b40cb..0773742388 100644 --- a/docs/visual-testing/integrations/java.md +++ b/docs/visual-testing/integrations/java.md @@ -437,7 +437,7 @@ visual.sauceVisualCheck("Long content page", options); -### Clip to an element +### Clip to an Element @@ -445,10 +445,16 @@ 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 index cf1aec37fd..9c1410dc80 100644 --- 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 -### Clip to an element +### Clip to an Element - + + +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 index 326f3ecffc..03088ce00c 100644 --- 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', { -### Clip to an element +### Clip to an Element - + + +Example: + +```ts +await browser.sauceVisualCheck('Visible Sale Banner', { + // An element that we should crop the screenshot to + clipElement: await $('.your-css-selector') +}) +``` ## Example