Iris 1289 - java, js native fps

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

@@ -1,18 +1,36 @@
-import FullPageDescription from './_fullpage-description.md';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 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 +41,112 @@
 });
 ```
 
-<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.
+:::
+
+<Tabs>
+    <TabItem value="ios" label="iOS">
+        ```ts
+        await browser.sauceVisualCheck('Long content page', {
+            // Enable full page screenshot and customize the behavior
+            fullPage: {
+                scrollElement: $('//XCUIElementTypeCollectionView'),
+                scrollLimit: 5
+            },
+        });
+        ```
+    </TabItem>
+    <TabItem value="android" label="Android">
+        ```ts
+        await browser.sauceVisualCheck('Long content page', {
+            // Enable full page screenshot and customize the behavior
+            fullPage: {
+                scrollElement: $('//androidx.recyclerview.widget.RecyclerView'),  
+                scrollLimit: 5
+            },
+        });
+        ```
+    </TabItem>
+</Tabs>
+
+Use only XPath selectors for ignore regions and clipping to an element.
+
+:::note
+On iOS, selectors must be contained within the `scrollElement`.
+:::
+
+<Tabs>
+    <TabItem value="ios" label="iOS">
+        ```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'),
+            },
+        });
+        ```
+    </TabItem>
+    <TabItem value="android" label="Android">
+        ```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'),  
+            },
+        });
+        ```
+    </TabItem>
+</Tabs>
+
+<Tabs>
+    <TabItem value="ios" label="iOS">
+        ```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' }
+            },
+        });
+        ```
+    </TabItem>
+    <TabItem value="android" label="Android">
+        ```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' }
+            },
+        });
+        ```
+    </TabItem>
+</Tabs>
+
+Learn more about mobile native testing [here](/visual-testing/mobile-native-testing/) 

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.
 :::

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
@@ -424,17 +428,177 @@
 
 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);
 ```
 
-<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.
+:::
+
+<Tabs>
+    <TabItem value="ios" label="iOS">
+        ```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);
+        ```
+    </TabItem>
+    <TabItem value="android" label="Android">
+        ```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);
+        ```
+    </TabItem>
+</Tabs>
+
+Use only XPath selectors for ignore regions and clipping to an element.
+
+:::note
+On iOS, selectors must be contained within the `scrollElement`.
+:::
+
+
+<Tabs>
+    <TabItem value="ios" label="iOS">
+        ```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("//XCUIElementTypeStaticText[@name="Product Price"]")
+                        .withType(SelectorType.XPATH)
+                        .build())
+                .build());
+        options.setIgnoreSelectors(ignoreSelectors);
+        visual.sauceVisualCheck("Long content page", options);
+        ```
+    </TabItem>
+    <TabItem value="android" label="Android">
+        ```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<IgnoreSelectorIn> 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);
+        ```
+    </TabItem>
+</Tabs>
+
+<Tabs>
+    <TabItem value="ios" label="iOS">
+        ```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);
+        ```
+    </TabItem>
+    <TabItem value="android" label="Android">
+        ```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);
+        ```
+    </TabItem>
+</Tabs>
+
+Learn more about mobile native testing [here](/visual-testing/mobile-native-testing/)
 
 ### Clip to an Element