From f0d68c11a5c57b80d5b911746b6ebe0b8520ccc0 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Tue, 26 Nov 2024 13:26:17 +0100 Subject: [PATCH 01/14] fps native js --- .../_partials/_fullpage-description.md | 13 ---- docs/visual-testing/_partials/_fullpage-js.md | 74 +++++++++++++++++-- docs/visual-testing/mobile-native-testing.md | 1 - 3 files changed, 69 insertions(+), 19 deletions(-) delete mode 100644 docs/visual-testing/_partials/_fullpage-description.md diff --git a/docs/visual-testing/_partials/_fullpage-description.md b/docs/visual-testing/_partials/_fullpage-description.md deleted file mode 100644 index 77731368de..0000000000 --- a/docs/visual-testing/_partials/_fullpage-description.md +++ /dev/null @@ -1,13 +0,0 @@ -By default, only the current viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `fullPage` option. It will capture everything by scrolling and stitching multiple screenshots together. - -:::note -It's recommended to use the `hideAfterFirstScroll` option for fixed or sticky position elements such as sticky headers or consent banners. -::: - -Options: - -- `delayAfterScrollMs`: Delay in ms after scrolling and before taking screenshots. The default value is 0. We recommend using this option for lazy loading content. -- `disableCSSAnimation`: Disable CSS animations and the input caret in the app. The default value is true. -- `hideAfterFirstScroll`: One or more CSS selectors that we should remove from the page after the first scroll. Useful for hiding fixed elements such as headers, cookie banners, etc. -- `hideScrollBars`: Hide all scrollbars in the app. The default value is true. -- `scrollLimit`: Limit the number of screenshots taken for scrolling and stitching. The default value is 10. The value needs to be between 1 and 10. diff --git a/docs/visual-testing/_partials/_fullpage-js.md b/docs/visual-testing/_partials/_fullpage-js.md index abcc1b464d..135cea5b34 100644 --- a/docs/visual-testing/_partials/_fullpage-js.md +++ b/docs/visual-testing/_partials/_fullpage-js.md @@ -1,18 +1,33 @@ -import FullPageDescription from './_fullpage-description.md'; import FullPageLimit from './_fullpage-limit.md'; - +By default, only the current viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `fullPage` option. It will capture everything by scrolling and stitching multiple screenshots together. + + + +#### Web + +Options: + +- `delayAfterScrollMs`: Delay in ms after scrolling and before taking screenshots. The default value is 0. We recommend using this option for lazy loading content. +- `disableCSSAnimation`: Disable CSS animations and the input caret in the app. The default value is true. +- `hideAfterFirstScroll`: One or more CSS selectors that we should remove from the page after the first scroll. Useful for hiding fixed elements such as headers, cookie banners, etc. +- `hideScrollBars`: Hide all scrollbars in the app. The default value is true. +- `scrollLimit`: Limit the number of screenshots taken for scrolling and stitching. The default value is 10. The value needs to be between 1 and 10. + +:::note +It's recommended to use the `hideAfterFirstScroll` option for fixed or sticky position elements such as sticky headers or consent banners. +::: Example: ```ts await browser.sauceVisualCheck('Long content page', { - // Enable full page screenshots using the default options + // Enable full page screenshot using the default options fullPage: true, }); await browser.sauceVisualCheck('Long content page', { - // Enable full page screenshots and customize the behavior + // Enable full page screenshot and customize the behavior fullPage: { delayAfterScrollMs: 500, disableCSSAnimation: false, @@ -23,4 +38,53 @@ await browser.sauceVisualCheck('Long content page', { }); ``` - +#### Mobile Native (beta) + +Options: + +- `delayAfterScrollMs`: Delay in ms after scrolling and before taking screenshots. The default value is 0. We recommend using this option for lazy loading content. +- `nativeClipSelector`: Selector used to identify the first element to which clipping will be applied. +- `scrollElement`: Scrollable element used for scrolling. The default is root element. +- `scrollLimit`: Limit the number of screenshots taken for scrolling and stitching. The default value is 10. The value needs to be between 1 and 10. + +:::note +It is recommended to define the `scrollElement` as the appropriate scrollable container. +::: + +```ts +await browser.sauceVisualCheck('Long content page', { + // Enable full page screenshot and customize the behavior + fullPage: { + scrollElement: $('//XCUIElementTypeCollectionView'), + scrollLimit: 5 + }, +}); +``` + +Use only XPath selectors for ignore regions and clipping to an element. + +:::note +On iOS, selectors must be contained within the `scrollElement`. +::: + +```ts +await browser.sauceVisualCheck('Ignore regions - Long content page', { + // Enable full page screenshot and ignore elements + ignore: [ + { selector: { value: '//XCUIElementTypeCollectionView/XCUIElementTypeCell', type: 'XPATH' }} + ], + fullPage: { + scrollElement: $('//XCUIElementTypeCollectionView'), + }, +}); +``` + +```ts +await browser.sauceVisualCheck('Clip - Long content page', { + // Enable full page screenshot and clip to an element + fullPage: { + scrollElement: $('//XCUIElementTypeCollectionView'), + nativeClipSelector: { value: '//XCUIElementTypeCollectionView/XCUIElementTypeOther', type: 'XPATH' } + }, +}); +``` diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index e61cca7cae..2f10cc5fa2 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -25,6 +25,5 @@ When writing a visual test for mobile apps, we recommend the following: ## Limitations The following features are not yet available for mobile app testing: -- Full page screenshots - DOM capture and inspection - [Selective diffing](./selective-diffing.md) From 863a970c79a001db6c217c99043280c676365885 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Wed, 27 Nov 2024 13:31:24 +0100 Subject: [PATCH 02/14] java native fps --- docs/visual-testing/integrations/java.md | 94 ++++++++++++++++++++++-- 1 file changed, 89 insertions(+), 5 deletions(-) diff --git a/docs/visual-testing/integrations/java.md b/docs/visual-testing/integrations/java.md index b5b044b963..29f74af5bd 100644 --- a/docs/visual-testing/integrations/java.md +++ b/docs/visual-testing/integrations/java.md @@ -394,12 +394,12 @@ visual.sauceVisualCheck("Inventory Page", options); By default, only the current viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `enableFullPageScreenshots` option. It will capture everything by scrolling and stitching multiple screenshots together. -:::note -It's recommended to use the `withHideAfterFirstScroll` method for fixed or sticky position elements such as sticky headers or consent banners. -::: - Configuration should be specified using the `FullPageScreenshotConfig.Builder` object. + + +#### Web + Methods available: - `withDelayAfterScrollMs(int delayAfterScrollMs)`: Delay in ms after scrolling and before taking screenshots. The default value is 0. We recommend using this option for lazy loading content. @@ -408,6 +408,10 @@ Methods available: - `withHideScrollBars(Boolean hideScrollBars)`: Hide all scrollbars in the app. The default value is true. - `withScrollLimit(int scrollLimit)`: Limit the number of screenshots taken for scrolling and stitching. The default value is 10. The value needs to be between 1 and 10. +:::note +It's recommended to use the `withHideAfterFirstScroll` method for fixed or sticky position elements such as sticky headers or consent banners. +::: + Examples: ```java @@ -434,7 +438,87 @@ options.enableFullPageScreenshots(config); visual.sauceVisualCheck("Long content page", options); ``` - +#### Mobile Native (beta) + +Methods available: +- `withDelayAfterScrollMs(int delayAfterScrollMs)`: Delay in ms after scrolling and before taking screenshots. The default value is 0. We recommend using this option for lazy loading content. +- `withNativeClipSelector(SelectorIn nativeClipSelector)`: Selector used to identify the first element to which clipping will be applied. +- `withScrollElement(WebElement scrollElement)`: Scrollable element used for scrolling. The default is root element. +- `withScrollLimit(int scrollLimit)`: Limit the number of screenshots taken for scrolling and stitching. The default value is 10. The value needs to be between 1 and 10. + +:::note +It is recommended to define the `withScrollElement` as the appropriate scrollable container. +::: + +```java +import com.saucelabs.visual.CheckOptions; +import com.saucelabs.visual.model.FullPageScreenshotConfig; + +RemoteWebDriver driver; +... + +WebElement scrollElement = driver.findElement(AppiumBy.xpath("//XCUIElementTypeCollectionView")); +CheckOptions options = new CheckOptions(); +FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() + .withScrollElement(scrollElement) + .withScrollLimit(5) + .build(); +options.enableFullPageScreenshots(config); +visual.sauceVisualCheck("Long content page", options); +``` + +Use only XPath selectors for ignore regions and clipping to an element. + +:::note +On iOS, selectors must be contained within the `scrollElement`. +::: + +```java +import com.saucelabs.visual.CheckOptions; +import com.saucelabs.visual.model.FullPageScreenshotConfig; + +RemoteWebDriver driver; +... + +WebElement scrollElement = driver.findElement(AppiumBy.xpath("//XCUIElementTypeCollectionView")); +CheckOptions options = new CheckOptions(); +FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() + .withScrollElement(scrollElement) + .build(); +options.enableFullPageScreenshots(config); +List ignoreSelectors = List.of( + new IgnoreSelectorIn.Builder() + .withSelector( + new SelectorIn.Builder() + .withValue( + "//XCUIElementTypeCollectionView//XCUIElementTypeStaticText") + .withType(SelectorType.XPATH) + .build()) + .build()); +options.setIgnoreSelectors(ignoreSelectors); +visual.sauceVisualCheck("Long content page", options); +``` + +```java +import com.saucelabs.visual.CheckOptions; +import com.saucelabs.visual.model.FullPageScreenshotConfig; + +RemoteWebDriver driver; +... + +WebElement scrollElement = driver.findElement(AppiumBy.xpath("//XCUIElementTypeCollectionView")); +CheckOptions options = new CheckOptions(); +SelectorIn nativeClipSelector = new SelectorIn.Builder() + .withType(SelectorType.XPATH) + .withValue("//XCUIElementTypeCollectionView/XCUIElementTypeOther") + .build(); +FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() + .withScrollElement(scrollElement) + .withNativeClipSelector(nativeClipSelector) + .build(); +options.enableFullPageScreenshots(config); +visual.sauceVisualCheck("Long content page", options); +``` ### Clip to an Element From 55907ae2112ab7d609339fd33c6393b118453ea2 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Wed, 27 Nov 2024 13:53:22 +0100 Subject: [PATCH 03/14] add native fps limitations --- docs/visual-testing/mobile-native-testing.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index 2f10cc5fa2..8e16819b2f 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -27,3 +27,10 @@ When writing a visual test for mobile apps, we recommend the following: The following features are not yet available for mobile app testing: - DOM capture and inspection - [Selective diffing](./selective-diffing.md) + +Native full page screenshots are in beta and may have bugs. +Possible issues include: +- Slow screenshot capture +- Baseline and snapshot differences on iOS tablets +- Ignoring and clipping limited to elements within scrollElement on iOS +- Missing sticky elements at the bottom of the screen From 6faa22338eee15535724ccb2b8ab9a0995b8ff73 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Thu, 28 Nov 2024 12:49:22 +0100 Subject: [PATCH 04/14] comments --- docs/visual-testing/_partials/_fullpage-js.md | 122 ++++++++--- .../_partials/_fullpage-limit.md | 4 +- docs/visual-testing/integrations/java.md | 206 ++++++++++++------ 3 files changed, 238 insertions(+), 94 deletions(-) diff --git a/docs/visual-testing/_partials/_fullpage-js.md b/docs/visual-testing/_partials/_fullpage-js.md index 135cea5b34..ae9d30baba 100644 --- a/docs/visual-testing/_partials/_fullpage-js.md +++ b/docs/visual-testing/_partials/_fullpage-js.md @@ -1,3 +1,6 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + import FullPageLimit from './_fullpage-limit.md'; By default, only the current viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `fullPage` option. It will capture everything by scrolling and stitching multiple screenshots together. @@ -51,15 +54,30 @@ Options: It is recommended to define the `scrollElement` as the appropriate scrollable container. ::: -```ts -await browser.sauceVisualCheck('Long content page', { - // Enable full page screenshot and customize the behavior - fullPage: { - scrollElement: $('//XCUIElementTypeCollectionView'), - scrollLimit: 5 - }, -}); -``` + + + ```ts + await browser.sauceVisualCheck('Long content page', { + // Enable full page screenshot and customize the behavior + fullPage: { + scrollElement: $('//XCUIElementTypeCollectionView'), + scrollLimit: 5 + }, + }); + ``` + + + ```ts + await browser.sauceVisualCheck('Long content page', { + // Enable full page screenshot and customize the behavior + fullPage: { + scrollElement: $('//androidx.recyclerview.widget.RecyclerView'), + scrollLimit: 5 + }, + }); + ``` + + Use only XPath selectors for ignore regions and clipping to an element. @@ -67,24 +85,68 @@ Use only XPath selectors for ignore regions and clipping to an element. On iOS, selectors must be contained within the `scrollElement`. ::: -```ts -await browser.sauceVisualCheck('Ignore regions - Long content page', { - // Enable full page screenshot and ignore elements - ignore: [ - { selector: { value: '//XCUIElementTypeCollectionView/XCUIElementTypeCell', type: 'XPATH' }} - ], - fullPage: { - scrollElement: $('//XCUIElementTypeCollectionView'), - }, -}); -``` - -```ts -await browser.sauceVisualCheck('Clip - Long content page', { - // Enable full page screenshot and clip to an element - fullPage: { - scrollElement: $('//XCUIElementTypeCollectionView'), - nativeClipSelector: { value: '//XCUIElementTypeCollectionView/XCUIElementTypeOther', type: 'XPATH' } - }, -}); -``` + + + ```ts + await browser.sauceVisualCheck('Ignore regions - Long content page', { + // Enable full page screenshot and ignore elements + ignore: [ + { + selector: { + value: '//XCUIElementTypeStaticText[@name="Product Price"]', + type: 'XPATH' + } + } + ], + fullPage: { + scrollElement: $('//XCUIElementTypeCollectionView'), + }, + }); + ``` + + + ```ts + await browser.sauceVisualCheck('Ignore regions - Long content page', { + // Enable full page screenshot and ignore elements + ignore: [ + { + selector: { + value: '//android.widget.TextView[@content-desc="Product Price"]', + type: 'XPATH' + } + } + ], + fullPage: { + scrollElement: $('//androidx.recyclerview.widget.RecyclerView'), + }, + }); + ``` + + + + + + ```ts + await browser.sauceVisualCheck('Clip - Long content page', { + // Enable full page screenshot and clip to an element + fullPage: { + scrollElement: $('//XCUIElementTypeCollectionView'), + nativeClipSelector: { value: '//XCUIElementTypeCollectionView/XCUIElementTypeOther', type: 'XPATH' } + }, + }); + ``` + + + ```ts + await browser.sauceVisualCheck('Clip - Long content page', { + // Enable full page screenshot and clip to an element + fullPage: { + scrollElement: $('//androidx.recyclerview.widget.RecyclerView'), + nativeClipSelector: { value: '//androidx.recyclerview.widget.RecyclerView[@content-desc="Displays all products of catalog"]', type: 'XPATH' } + }, + }); + ``` + + + +Learn more about mobile native testing [here](/visual-testing/mobile-native-testing/) diff --git a/docs/visual-testing/_partials/_fullpage-limit.md b/docs/visual-testing/_partials/_fullpage-limit.md index f1417fc075..b89c5459f5 100644 --- a/docs/visual-testing/_partials/_fullpage-limit.md +++ b/docs/visual-testing/_partials/_fullpage-limit.md @@ -1,3 +1,5 @@ -:::note The maximum number of scrolls and stitches in a full page screenshot is 10. + +:::note +Use full page screenshots only when necessary, as they can slow down test execution. ::: diff --git a/docs/visual-testing/integrations/java.md b/docs/visual-testing/integrations/java.md index 29f74af5bd..a8be02fe09 100644 --- a/docs/visual-testing/integrations/java.md +++ b/docs/visual-testing/integrations/java.md @@ -428,12 +428,12 @@ import com.saucelabs.visual.model.FullPageScreenshotConfig; CheckOptions options = new CheckOptions(); FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() - .withDelayAfterScrollMs(500) - .withDisableCSSAnimation(false) - .withHideAfterFirstScroll("#header") - .withHideScrollBars(false) - .withScrollLimit(5) - .build(); + .withDelayAfterScrollMs(500) + .withDisableCSSAnimation(false) + .withHideAfterFirstScroll("#header") + .withHideScrollBars(false) + .withScrollLimit(5) + .build(); options.enableFullPageScreenshots(config); visual.sauceVisualCheck("Long content page", options); ``` @@ -450,22 +450,44 @@ Methods available: It is recommended to define the `withScrollElement` as the appropriate scrollable container. ::: -```java -import com.saucelabs.visual.CheckOptions; -import com.saucelabs.visual.model.FullPageScreenshotConfig; - -RemoteWebDriver driver; -... - -WebElement scrollElement = driver.findElement(AppiumBy.xpath("//XCUIElementTypeCollectionView")); -CheckOptions options = new CheckOptions(); -FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() - .withScrollElement(scrollElement) - .withScrollLimit(5) - .build(); -options.enableFullPageScreenshots(config); -visual.sauceVisualCheck("Long content page", options); -``` + + + ```java + import com.saucelabs.visual.CheckOptions; + import com.saucelabs.visual.model.FullPageScreenshotConfig; + + RemoteWebDriver driver; + ... + + WebElement scrollElement = driver.findElement(AppiumBy.xpath("//XCUIElementTypeCollectionView")); + CheckOptions options = new CheckOptions(); + FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() + .withScrollElement(scrollElement) + .withScrollLimit(5) + .build(); + options.enableFullPageScreenshots(config); + visual.sauceVisualCheck("Long content page", options); + ``` + + + ```java + import com.saucelabs.visual.CheckOptions; + import com.saucelabs.visual.model.FullPageScreenshotConfig; + + RemoteWebDriver driver; + ... + + WebElement scrollElement = driver.findElement(AppiumBy.xpath("//androidx.recyclerview.widget.RecyclerView")); + CheckOptions options = new CheckOptions(); + FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() + .withScrollElement(scrollElement) + .withScrollLimit(5) + .build(); + options.enableFullPageScreenshots(config); + visual.sauceVisualCheck("Long content page", options); + ``` + + Use only XPath selectors for ignore regions and clipping to an element. @@ -473,52 +495,110 @@ Use only XPath selectors for ignore regions and clipping to an element. On iOS, selectors must be contained within the `scrollElement`. ::: -```java -import com.saucelabs.visual.CheckOptions; -import com.saucelabs.visual.model.FullPageScreenshotConfig; - -RemoteWebDriver driver; -... -WebElement scrollElement = driver.findElement(AppiumBy.xpath("//XCUIElementTypeCollectionView")); -CheckOptions options = new CheckOptions(); -FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() - .withScrollElement(scrollElement) - .build(); -options.enableFullPageScreenshots(config); -List ignoreSelectors = List.of( - new IgnoreSelectorIn.Builder() + + + ```java + import com.saucelabs.visual.CheckOptions; + import com.saucelabs.visual.model.FullPageScreenshotConfig; + + RemoteWebDriver driver; + ... + + WebElement scrollElement = driver.findElement(AppiumBy.xpath("//XCUIElementTypeCollectionView")); + CheckOptions options = new CheckOptions(); + FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() + .withScrollElement(scrollElement) + .build(); + options.enableFullPageScreenshots(config); + List ignoreSelectors = List.of( + new IgnoreSelectorIn.Builder() .withSelector( - new SelectorIn.Builder() - .withValue( - "//XCUIElementTypeCollectionView//XCUIElementTypeStaticText") - .withType(SelectorType.XPATH) - .build()) + new SelectorIn.Builder() + .withValue("//XCUIElementTypeStaticText[@name="Product Price"]") + .withType(SelectorType.XPATH) + .build()) .build()); -options.setIgnoreSelectors(ignoreSelectors); -visual.sauceVisualCheck("Long content page", options); -``` - -```java -import com.saucelabs.visual.CheckOptions; -import com.saucelabs.visual.model.FullPageScreenshotConfig; + options.setIgnoreSelectors(ignoreSelectors); + visual.sauceVisualCheck("Long content page", options); + ``` + + + ```java + import com.saucelabs.visual.CheckOptions; + import com.saucelabs.visual.model.FullPageScreenshotConfig; + + RemoteWebDriver driver; + ... + + WebElement scrollElement = driver.findElement(AppiumBy.xpath("//androidx.recyclerview.widget.RecyclerView")); + CheckOptions options = new CheckOptions(); + FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() + .withScrollElement(scrollElement) + .build(); + options.enableFullPageScreenshots(config); + List ignoreSelectors = List.of( + new IgnoreSelectorIn.Builder() + .withSelector( + new SelectorIn.Builder() + .withValue("//android.widget.TextView[@content-desc="Product Price"]") + .withType(SelectorType.XPATH) + .build()) + .build()); + options.setIgnoreSelectors(ignoreSelectors); + visual.sauceVisualCheck("Long content page", options); + ``` + + -RemoteWebDriver driver; -... + + + ```java + import com.saucelabs.visual.CheckOptions; + import com.saucelabs.visual.model.FullPageScreenshotConfig; + + RemoteWebDriver driver; + ... + + WebElement scrollElement = driver.findElement(AppiumBy.xpath("//XCUIElementTypeCollectionView")); + CheckOptions options = new CheckOptions(); + SelectorIn nativeClipSelector = new SelectorIn.Builder() + .withType(SelectorType.XPATH) + .withValue("//XCUIElementTypeCollectionView/XCUIElementTypeOther") + .build(); + FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() + .withScrollElement(scrollElement) + .withNativeClipSelector(nativeClipSelector) + .build(); + options.enableFullPageScreenshots(config); + visual.sauceVisualCheck("Long content page", options); + ``` + + + ```java + import com.saucelabs.visual.CheckOptions; + import com.saucelabs.visual.model.FullPageScreenshotConfig; + + RemoteWebDriver driver; + ... + + WebElement scrollElement = driver.findElement(AppiumBy.xpath("//androidx.recyclerview.widget.RecyclerView")); + CheckOptions options = new CheckOptions(); + SelectorIn nativeClipSelector = new SelectorIn.Builder() + .withType(SelectorType.XPATH) + .withValue("//androidx.recyclerview.widget.RecyclerView[@content-desc='Displays all products of catalog']") + .build(); + FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() + .withScrollElement(scrollElement) + .withNativeClipSelector(nativeClipSelector) + .build(); + options.enableFullPageScreenshots(config); + visual.sauceVisualCheck("Long content page", options); + ``` + + -WebElement scrollElement = driver.findElement(AppiumBy.xpath("//XCUIElementTypeCollectionView")); -CheckOptions options = new CheckOptions(); -SelectorIn nativeClipSelector = new SelectorIn.Builder() - .withType(SelectorType.XPATH) - .withValue("//XCUIElementTypeCollectionView/XCUIElementTypeOther") - .build(); -FullPageScreenshotConfig config = new FullPageScreenshotConfig.Builder() - .withScrollElement(scrollElement) - .withNativeClipSelector(nativeClipSelector) - .build(); -options.enableFullPageScreenshots(config); -visual.sauceVisualCheck("Long content page", options); -``` +Learn more about mobile native testing [here](/visual-testing/mobile-native-testing/) ### Clip to an Element From aa7461ca6d02982d8382321e497b5d71550f6f70 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Thu, 28 Nov 2024 14:05:08 +0100 Subject: [PATCH 05/14] comments --- docs/visual-testing/mobile-native-testing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index 8e16819b2f..a9569d30bc 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -28,9 +28,9 @@ The following features are not yet available for mobile app testing: - DOM capture and inspection - [Selective diffing](./selective-diffing.md) -Native full page screenshots are in beta and may have bugs. +Native full-page screenshots are currently in beta and may have unexpected behavior. Possible issues include: - Slow screenshot capture - Baseline and snapshot differences on iOS tablets -- Ignoring and clipping limited to elements within scrollElement on iOS +- Ignoring and clipping limited to elements within `scrollElement` on iOS - Missing sticky elements at the bottom of the screen From ecf059c0bbf0a8db9d6f5c989994f61bce3fda88 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Thu, 28 Nov 2024 14:08:45 +0100 Subject: [PATCH 06/14] update dom and diffing limitations --- docs/visual-testing/mobile-native-testing.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index a9569d30bc..33d5f140a4 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -25,8 +25,7 @@ When writing a visual test for mobile apps, we recommend the following: ## Limitations The following features are not yet available for mobile app testing: -- DOM capture and inspection -- [Selective diffing](./selective-diffing.md) +- [Selective diffing](./selective-diffing.md) is constrained by what is available in Appium's page source. Native full-page screenshots are currently in beta and may have unexpected behavior. Possible issues include: From 77b097f98068e7b498ec2e57ac3d7ac8b559ca84 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Mon, 2 Dec 2024 15:30:40 +0100 Subject: [PATCH 07/14] comments --- docs/visual-testing/_partials/_fullpage-js.md | 10 ++++++++-- docs/visual-testing/_partials/_fullpage-limit.md | 2 +- docs/visual-testing/integrations/java.md | 2 +- docs/visual-testing/mobile-native-testing.md | 8 ++++---- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/docs/visual-testing/_partials/_fullpage-js.md b/docs/visual-testing/_partials/_fullpage-js.md index ae9d30baba..a9a0388ec0 100644 --- a/docs/visual-testing/_partials/_fullpage-js.md +++ b/docs/visual-testing/_partials/_fullpage-js.md @@ -131,7 +131,10 @@ On iOS, selectors must be contained within the `scrollElement`. // Enable full page screenshot and clip to an element fullPage: { scrollElement: $('//XCUIElementTypeCollectionView'), - nativeClipSelector: { value: '//XCUIElementTypeCollectionView/XCUIElementTypeOther', type: 'XPATH' } + nativeClipSelector: { + value: '//XCUIElementTypeCollectionView/XCUIElementTypeOther', + type: 'XPATH' + } }, }); ``` @@ -142,7 +145,10 @@ On iOS, selectors must be contained within the `scrollElement`. // Enable full page screenshot and clip to an element fullPage: { scrollElement: $('//androidx.recyclerview.widget.RecyclerView'), - nativeClipSelector: { value: '//androidx.recyclerview.widget.RecyclerView[@content-desc="Displays all products of catalog"]', type: 'XPATH' } + nativeClipSelector: { + value: '//androidx.recyclerview.widget.RecyclerView[@content-desc="Displays all products of catalog"]', + type: 'XPATH' + } }, }); ``` diff --git a/docs/visual-testing/_partials/_fullpage-limit.md b/docs/visual-testing/_partials/_fullpage-limit.md index b89c5459f5..a39883c3a8 100644 --- a/docs/visual-testing/_partials/_fullpage-limit.md +++ b/docs/visual-testing/_partials/_fullpage-limit.md @@ -1,5 +1,5 @@ The maximum number of scrolls and stitches in a full page screenshot is 10. :::note -Use full page screenshots only when necessary, as they can slow down test execution. +Use full page screenshots only when necessary, as they slow down test execution. ::: diff --git a/docs/visual-testing/integrations/java.md b/docs/visual-testing/integrations/java.md index a8be02fe09..129a3ab563 100644 --- a/docs/visual-testing/integrations/java.md +++ b/docs/visual-testing/integrations/java.md @@ -409,7 +409,7 @@ Methods available: - `withScrollLimit(int scrollLimit)`: Limit the number of screenshots taken for scrolling and stitching. The default value is 10. The value needs to be between 1 and 10. :::note -It's recommended to use the `withHideAfterFirstScroll` method for fixed or sticky position elements such as sticky headers or consent banners. +It's recommended to use the `withHideAfterFirstScroll` method for elements with a fixed or sticky position, such as sticky headers or consent banners. ::: Examples: diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index 33d5f140a4..7ae8683887 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -28,8 +28,8 @@ The following features are not yet available for mobile app testing: - [Selective diffing](./selective-diffing.md) is constrained by what is available in Appium's page source. Native full-page screenshots are currently in beta and may have unexpected behavior. -Possible issues include: +Identified limitations: - Slow screenshot capture -- Baseline and snapshot differences on iOS tablets -- Ignoring and clipping limited to elements within `scrollElement` on iOS -- Missing sticky elements at the bottom of the screen +- 1 pixel shifts in the screenshot (iOS tablets only) +- Ignoring and clipping limited to elements within `scrollElement` (iOS only) +- Sticky elements missing at the bottom of the screen From d5a56ac8e14d85a594cb205a3f99349be6681d51 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Mon, 2 Dec 2024 18:53:39 +0100 Subject: [PATCH 08/14] comments, add dom limitation --- docs/visual-testing/_partials/_fullpage-js.md | 7 ++++--- docs/visual-testing/_partials/_fullpage-limitation.md | 3 +++ docs/visual-testing/integrations/csharp.md | 2 +- docs/visual-testing/integrations/java.md | 5 +++-- docs/visual-testing/mobile-native-testing.md | 1 + 5 files changed, 12 insertions(+), 6 deletions(-) create mode 100644 docs/visual-testing/_partials/_fullpage-limitation.md diff --git a/docs/visual-testing/_partials/_fullpage-js.md b/docs/visual-testing/_partials/_fullpage-js.md index a9a0388ec0..fcc4eed974 100644 --- a/docs/visual-testing/_partials/_fullpage-js.md +++ b/docs/visual-testing/_partials/_fullpage-js.md @@ -2,8 +2,9 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import FullPageLimit from './_fullpage-limit.md'; +import FullPageLimitation from './_fullpage-limitation.md'; -By default, only the current viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `fullPage` option. It will capture everything by scrolling and stitching multiple screenshots together. +By default, only the viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `fullPage` option. It will capture everything by scrolling and stitching multiple screenshots together. @@ -51,7 +52,7 @@ Options: - `scrollLimit`: Limit the number of screenshots taken for scrolling and stitching. The default value is 10. The value needs to be between 1 and 10. :::note -It is recommended to define the `scrollElement` as the appropriate scrollable container. +It is recommended to set `scrollElement` to the appropriate scrollable container. ::: @@ -155,4 +156,4 @@ On iOS, selectors must be contained within the `scrollElement`. -Learn more about mobile native testing [here](/visual-testing/mobile-native-testing/) + diff --git a/docs/visual-testing/_partials/_fullpage-limitation.md b/docs/visual-testing/_partials/_fullpage-limitation.md new file mode 100644 index 0000000000..20860702c8 --- /dev/null +++ b/docs/visual-testing/_partials/_fullpage-limitation.md @@ -0,0 +1,3 @@ +:::note +Full page screenshot for mobile native testing is in beta. Read more about [mobile native limitation](/visual-testing/mobile-native-testing/) +::: diff --git a/docs/visual-testing/integrations/csharp.md b/docs/visual-testing/integrations/csharp.md index 9e92813bfd..4680730784 100644 --- a/docs/visual-testing/integrations/csharp.md +++ b/docs/visual-testing/integrations/csharp.md @@ -399,7 +399,7 @@ VisualClient.CaptureDom = true; ### Full page screenshots -By default, only the current viewport is captured when `.VisualCheck` is used. You can opt in to capturing the entire page by using the `FullPage` option. It will capture everything by scrolling and stitching multiple screenshots together. +By default, only the viewport is captured when `.VisualCheck` is used. You can opt in to capturing the entire page by using the `FullPage` option. It will capture everything by scrolling and stitching multiple screenshots together. Additionally, you have the option to configure full page settings using the `FullPageConfig` option. :::note diff --git a/docs/visual-testing/integrations/java.md b/docs/visual-testing/integrations/java.md index 129a3ab563..75462539e2 100644 --- a/docs/visual-testing/integrations/java.md +++ b/docs/visual-testing/integrations/java.md @@ -10,6 +10,7 @@ import EnvironmentVariables from '../_partials/_environment-variables.md'; import SelectiveDiffing from '../_partials/_selective-diffing.md'; import SelectiveDiffingGlobal from '../_partials/_selective-diffing-global.md'; import SelectiveDiffingRegion from '../_partials/_selective-diffing-region.md'; +import FullPageLimitation from '../_partials/_fullpage-limitation.md'; # Java WebDriver Integration @@ -392,7 +393,7 @@ visual.sauceVisualCheck("Inventory Page", options); ### Full page screenshots -By default, only the current viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `enableFullPageScreenshots` option. It will capture everything by scrolling and stitching multiple screenshots together. +By default, only the viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `enableFullPageScreenshots` option. It will capture everything by scrolling and stitching multiple screenshots together. Configuration should be specified using the `FullPageScreenshotConfig.Builder` object. @@ -598,7 +599,7 @@ On iOS, selectors must be contained within the `scrollElement`. -Learn more about mobile native testing [here](/visual-testing/mobile-native-testing/) + ### Clip to an Element diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index 7ae8683887..2f61341907 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -33,3 +33,4 @@ Identified limitations: - 1 pixel shifts in the screenshot (iOS tablets only) - Ignoring and clipping limited to elements within `scrollElement` (iOS only) - Sticky elements missing at the bottom of the screen +- The DOM capturing, inspection and selective diffing features have not yet been implemented From 2454d5837b934bd72cf9e60e6a6ed482b1b894d4 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Wed, 4 Dec 2024 12:23:27 +0100 Subject: [PATCH 09/14] comments --- docs/visual-testing/integrations/java.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/visual-testing/integrations/java.md b/docs/visual-testing/integrations/java.md index 75462539e2..63f2eb7616 100644 --- a/docs/visual-testing/integrations/java.md +++ b/docs/visual-testing/integrations/java.md @@ -253,7 +253,7 @@ When creating the service in `VisualApi`, extra fields can be set to define the It needs to be defined through the `VisualApi.Builder` object. -Methods available: +Available methods: - `withBuild(String build)`: Sets the name of the build - `withProject(String project)`: Sets the name of the project @@ -401,7 +401,7 @@ Configuration should be specified using the `FullPageScreenshotConfig.Builder` o #### Web -Methods available: +Available methods: - `withDelayAfterScrollMs(int delayAfterScrollMs)`: Delay in ms after scrolling and before taking screenshots. The default value is 0. We recommend using this option for lazy loading content. - `withDisableCSSAnimation(Boolean disableCSSAnimation)`: Disable CSS animations and the input caret in the app. The default value is true. @@ -441,16 +441,18 @@ visual.sauceVisualCheck("Long content page", options); #### Mobile Native (beta) -Methods available: +Available methods: - `withDelayAfterScrollMs(int delayAfterScrollMs)`: Delay in ms after scrolling and before taking screenshots. The default value is 0. We recommend using this option for lazy loading content. - `withNativeClipSelector(SelectorIn nativeClipSelector)`: Selector used to identify the first element to which clipping will be applied. - `withScrollElement(WebElement scrollElement)`: Scrollable element used for scrolling. The default is root element. - `withScrollLimit(int scrollLimit)`: Limit the number of screenshots taken for scrolling and stitching. The default value is 10. The value needs to be between 1 and 10. :::note -It is recommended to define the `withScrollElement` as the appropriate scrollable container. +It is recommended to use the `withScrollElement` method to set the appropriate scrollable container. ::: +Examples: + ```java @@ -490,10 +492,10 @@ It is recommended to define the `withScrollElement` as the appropriate scrollabl -Use only XPath selectors for ignore regions and clipping to an element. +Only XPath selectors can be used for ignore regions and clipping to an element. :::note -On iOS, selectors must be contained within the `scrollElement`. +On iOS, selectors **must** be contained within the `scrollElement`. ::: From b40abed731a1b9b835e133cafd97090eea5f8569 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Wed, 4 Dec 2024 13:03:33 +0100 Subject: [PATCH 10/14] Jenna comments --- docs/visual-testing/_partials/_fullpage-description.md | 1 + docs/visual-testing/_partials/_fullpage-js.md | 2 ++ docs/visual-testing/integrations/java.md | 2 ++ docs/visual-testing/mobile-native-testing.md | 7 +++++++ 4 files changed, 12 insertions(+) create mode 100644 docs/visual-testing/_partials/_fullpage-description.md diff --git a/docs/visual-testing/_partials/_fullpage-description.md b/docs/visual-testing/_partials/_fullpage-description.md new file mode 100644 index 0000000000..9f21ab24d3 --- /dev/null +++ b/docs/visual-testing/_partials/_fullpage-description.md @@ -0,0 +1 @@ +Full Page Screenshots capture the entire webpage, including content beyond the visible viewport, to ensure comprehensive visual testing. This feature helps teams identify layout or rendering issues across the full page and ensures consistency across devices and browsers. diff --git a/docs/visual-testing/_partials/_fullpage-js.md b/docs/visual-testing/_partials/_fullpage-js.md index fcc4eed974..cc8dd7b774 100644 --- a/docs/visual-testing/_partials/_fullpage-js.md +++ b/docs/visual-testing/_partials/_fullpage-js.md @@ -3,7 +3,9 @@ import TabItem from '@theme/TabItem'; import FullPageLimit from './_fullpage-limit.md'; import FullPageLimitation from './_fullpage-limitation.md'; +import FullPageDescription from './_fullpage-description.md'; + By default, only the viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `fullPage` option. It will capture everything by scrolling and stitching multiple screenshots together. diff --git a/docs/visual-testing/integrations/java.md b/docs/visual-testing/integrations/java.md index 63f2eb7616..c75dd6eeae 100644 --- a/docs/visual-testing/integrations/java.md +++ b/docs/visual-testing/integrations/java.md @@ -11,6 +11,7 @@ import SelectiveDiffing from '../_partials/_selective-diffing.md'; import SelectiveDiffingGlobal from '../_partials/_selective-diffing-global.md'; import SelectiveDiffingRegion from '../_partials/_selective-diffing-region.md'; import FullPageLimitation from '../_partials/_fullpage-limitation.md'; +import FullPageDescription from '../_partials/_fullpage-description.md'; # Java WebDriver Integration @@ -393,6 +394,7 @@ visual.sauceVisualCheck("Inventory Page", options); ### Full page screenshots + By default, only the viewport is captured when `.sauceVisualCheck` is used. You can opt in to capturing the entire page by using the `enableFullPageScreenshots` option. It will capture everything by scrolling and stitching multiple screenshots together. Configuration should be specified using the `FullPageScreenshotConfig.Builder` object. diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index 2f61341907..e34bf63329 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -34,3 +34,10 @@ Identified limitations: - Ignoring and clipping limited to elements within `scrollElement` (iOS only) - Sticky elements missing at the bottom of the screen - The DOM capturing, inspection and selective diffing features have not yet been implemented + +Learn more about native full-page options on the integration pages: + From a06cca1fc8b639335804e9918f1df049f1d978fe Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Wed, 4 Dec 2024 14:14:17 +0100 Subject: [PATCH 11/14] Konrad comment --- docs/visual-testing/mobile-native-testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index e34bf63329..f60751096c 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -25,7 +25,7 @@ When writing a visual test for mobile apps, we recommend the following: ## Limitations The following features are not yet available for mobile app testing: -- [Selective diffing](./selective-diffing.md) is constrained by what is available in Appium's page source. +- [Selective diffing](./selective-diffing.md) Native full-page screenshots are currently in beta and may have unexpected behavior. Identified limitations: From ef11c7a5851cf8ad009e0e852be043b13f2176e6 Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Thu, 5 Dec 2024 14:15:20 +0100 Subject: [PATCH 12/14] comment --- docs/visual-testing/mobile-native-testing.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index f60751096c..edbed12f18 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -35,6 +35,9 @@ Identified limitations: - Sticky elements missing at the bottom of the screen - The DOM capturing, inspection and selective diffing features have not yet been implemented + +## Integrations + Learn more about native full-page options on the integration pages:
  • Java
    • From 2eae3cd373a24994cddee77cde28da64e4b9492c Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Thu, 5 Dec 2024 14:21:35 +0100 Subject: [PATCH 13/14] comment --- docs/visual-testing/mobile-native-testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index edbed12f18..c36c2a27bc 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -33,7 +33,7 @@ Identified limitations: - 1 pixel shifts in the screenshot (iOS tablets only) - Ignoring and clipping limited to elements within `scrollElement` (iOS only) - Sticky elements missing at the bottom of the screen -- The DOM capturing, inspection and selective diffing features have not yet been implemented +- DOM capture is not available ## Integrations From cc0a9d1c53731958b08c6b096784e3ecd26b880f Mon Sep 17 00:00:00 2001 From: Pawel Tomaszewski Date: Thu, 5 Dec 2024 14:58:02 +0100 Subject: [PATCH 14/14] remove nightwatch fps section --- docs/visual-testing/integrations/nightwatch.md | 4 ---- docs/visual-testing/mobile-native-testing.md | 1 - 2 files changed, 5 deletions(-) diff --git a/docs/visual-testing/integrations/nightwatch.md b/docs/visual-testing/integrations/nightwatch.md index 4d13c926c2..dc3812e688 100644 --- a/docs/visual-testing/integrations/nightwatch.md +++ b/docs/visual-testing/integrations/nightwatch.md @@ -353,10 +353,6 @@ browser .end(); ``` -### Full page screenshots - - - ### Clip to an Element diff --git a/docs/visual-testing/mobile-native-testing.md b/docs/visual-testing/mobile-native-testing.md index c36c2a27bc..f67c0cb30e 100644 --- a/docs/visual-testing/mobile-native-testing.md +++ b/docs/visual-testing/mobile-native-testing.md @@ -41,6 +41,5 @@ Identified limitations: Learn more about native full-page options on the integration pages: