Merge pull request #2665 from saucelabs/IRIS-488-fullpage-screenshot-…

…selenium-sdk IRIS-488-fullpage-screenshot-selenium-sdk
saucelabs · Mar 20, 2024 · 2ae7df4 · 2ae7df4
2 parents d5417b5 + 7e51752
commit 2ae7df4
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/docs/visual-testing/integrations/nightwatch.md b/docs/visual-testing/integrations/nightwatch.md
@@ -315,6 +315,34 @@ browser
   .end();
 ```
 
+### Full page screenshots
+
+If you want to see more than what's on the screen, you can take a full-page screenshot. It'll capture everything by scrolling and stitching it together.
+
+:::note
+It's recommended to use the `hideAfterFirstScroll` option for elements like sticky header.
+:::
+
+Options:
+
+- `delayAfterScrollMs`: Delay in ms after scrolling and before taking screenshots (helps with lazy loading content)
+- `hideAfterFirstScroll`: Hide elements on the page after first scroll (uses css selectors)
+
+Example:
+
+```ts
+await browser.sauceVisualCheck('Long content page', {
+  fullPage: true,
+});
+
+await browser.sauceVisualCheck('Long content page', {
+  fullPage: {
+    delayAfterScroll: 500,
+    hideAfterFirstScroll: ["#header"],
+  },
+});
+```
+
 ### Fail on failures
 
 By default, Sauce Visual will not fail the test if there are any failures during the comparison process. A failure will be logged in the Sauce Labs Visual dashboard, but the test will continue to run.

diff --git a/docs/visual-testing/integrations/webdriverio.md b/docs/visual-testing/integrations/webdriverio.md
@@ -223,6 +223,34 @@ browser.sauceVisualCheck('Before Login', {
 });
 ```
 
+### Full page screenshots
+
+If you want to see more than what's on the screen, you can take a full-page screenshot. It'll capture everything by scrolling and stitching it together.  
+
+:::note
+It's recommended to use the `hideAfterFirstScroll` option for elements like sticky header. 
+:::
+
+Options:
+
+- `delayAfterScrollMs`: Delay in ms after scrolling and before taking screenshots (helps with lazy loading content)
+- `hideAfterFirstScroll`: Hide elements on the page after first scroll (uses css selectors)
+
+Example:
+
+```ts
+await browser.sauceVisualCheck('Long content page', {
+  fullPage: true,
+});
+
+await browser.sauceVisualCheck('Long content page', {
+  fullPage: {
+    delayAfterScroll: 500,
+    hideAfterFirstScroll: ["#header"],
+  },
+});
+```
+
 ## Example
 
 An example project is available [here](https://github.com/saucelabs/visual-examples/tree/main/wdio).