Iris 1289 - java, js native fps

docs/visual-testing/_partials/_fullpage-js.md

@@ -1,18 +1,33 @@
-import FullPageDescription from './_fullpage-description.md';
 import FullPageLimit from './_fullpage-limit.md';
 
-<FullPageDescription />
+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.
+
+<FullPageLimit />
+
+#### 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 @@
 });
 ```
 
-<FullPageLimit />
+#### 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' }
+  },
+});
+```

docs/visual-testing/integrations/java.md

@@ -394,12 +394,12 @@
 
 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.
 
+<FullPageLimit />
+
+#### 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 @@
 - `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 @@
 visual.sauceVisualCheck("Long content page", options);
 ```
 
-<FullPageLimit />
+#### 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<IgnoreSelectorIn> 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
 

docs/visual-testing/mobile-native-testing.md

@@ -25,6 +25,12 @@
 ## Limitations
 
 The following features are not yet available for mobile app testing:
-- Full page screenshots
 - 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