Add wdio example for native apps full page screenshot (#775)

* android * ios
saucelabs · Oct 21, 2024 · f9e95cc · f9e95cc
1 parent 9c5c3ec
commit f9e95cc
Show file tree

Hide file tree

Showing 7 changed files with 1,941 additions and 461 deletions.
diff --git a/wdio-android-app/app/SauceLabs-Demo-App.apk b/wdio-android-app/app/SauceLabs-Demo-App.apk
diff --git a/wdio-android-app/package-lock.json b/wdio-android-app/package-lock.json
diff --git a/wdio-android-app/package.json b/wdio-android-app/package.json
@@ -15,13 +15,14 @@
     "typescript": "^5.4.3"
   },
   "scripts": {
-    "sauce-visual": "wdio run ./tests/configs/wdio.saucelabs.mobile.conf.ts --spec tests/specs/visual.spec.ts",
-    "sauce-visual-check": "VISUAL_CHECK=true wdio run ./tests/configs/wdio.saucelabs.mobile.conf.ts --spec tests/specs/visual.spec.ts",
+    "sauce-visual": "FPS=true wdio run ./tests/configs/wdio.saucelabs.mobile.conf.ts --spec tests/specs/visual.spec.ts",
+    "sauce-visual-check": "FPS=true VISUAL_CHECK=true wdio run ./tests/configs/wdio.saucelabs.mobile.conf.ts --spec tests/specs/visual.spec.ts",
     "sauce-visual-emulator": "wdio run ./tests/configs/wdio.saucelabs.emulator.conf.ts --spec tests/specs/visual.spec.ts",
     "sauce-visual-emulator-check": "VISUAL_CHECK=true wdio run ./tests/configs/wdio.saucelabs.emulator.conf.ts --spec tests/specs/visual.spec.ts"
   },
   "dependencies": {
-    "@saucelabs/wdio-sauce-visual-service": "^0.6.0",
+    "@saucelabs/wdio-sauce-visual-service": "^0.7.0",
+    "@wdio/globals": "^9.1.2",
     "readline-sync": "^1.4.10",
     "saucectl": "^0.180.0",
     "update-dotenv": "^1.1.1"

diff --git a/wdio-android-app/tests/specs/visual.spec.ts b/wdio-android-app/tests/specs/visual.spec.ts
@@ -41,6 +41,18 @@ describe('Android Native App', () => {
     });
   });
 
+  // NOTE: Full page screenshot for native apps is in beta stage
+  // some of the functionality may not work as expected (especially virtual devices, clipping, ignore regions)
+  if (!!process.env.FPS) {
+    it('Full Page - Check App Catalog', async () => {
+      await browser.sauceVisualCheck(`Full Page - App Catalog`, {
+        fullPage: {
+          scrollElement: $('//androidx.recyclerview.widget.RecyclerView')
+        }
+      });
+    });
+  }
+
   it('Captures only catalog content', async () => {
     const catalogContent = await App.catalogContent;
     await browser.sauceVisualCheck(`Catalog Fragment`, {

diff --git a/wdio-ios-app/package-lock.json b/wdio-ios-app/package-lock.json
diff --git a/wdio-ios-app/package.json b/wdio-ios-app/package.json
@@ -15,13 +15,13 @@
     "typescript": "^5.4.3"
   },
   "scripts": {
-    "sauce-visual": "wdio run ./tests/configs/wdio.saucelabs.mobile.conf.ts --spec tests/specs/visual.spec.ts",
-    "sauce-visual-check": "VISUAL_CHECK=true wdio run ./tests/configs/wdio.saucelabs.mobile.conf.ts --spec tests/specs/visual.spec.ts",
+    "sauce-visual": "FPS=true wdio run ./tests/configs/wdio.saucelabs.mobile.conf.ts --spec tests/specs/visual.spec.ts",
+    "sauce-visual-check": "FPS=true VISUAL_CHECK=true wdio run ./tests/configs/wdio.saucelabs.mobile.conf.ts --spec tests/specs/visual.spec.ts",
     "sauce-visual-simulator": "wdio run ./tests/configs/wdio.saucelabs.simulator.conf.ts --spec tests/specs/visual.spec.ts",
     "sauce-visual-simulator-check": "VISUAL_CHECK=true wdio run ./tests/configs/wdio.saucelabs.simulator.conf.ts --spec tests/specs/visual.spec.ts"
   },
   "dependencies": {
-    "@saucelabs/wdio-sauce-visual-service": "^0.6.0",
+    "@saucelabs/wdio-sauce-visual-service": "^0.7.0",
     "readline-sync": "^1.4.10",
     "saucectl": "^0.180.0",
     "update-dotenv": "^1.1.1"

diff --git a/wdio-ios-app/tests/specs/visual.spec.ts b/wdio-ios-app/tests/specs/visual.spec.ts
@@ -41,6 +41,20 @@ describe('iOS Native App', () => {
     });
   });
 
+  // NOTE: Full page screenshot for native apps is in beta stage
+  // some of the functionality may not work as expected (especially virtual devices, clipping, ignore regions)
+  if (!!process.env.FPS) {
+    it('Full Page - Check App Catalog', async () => {
+      await browser.sauceVisualCheck(`Full Page - App Catalog`, {
+        fullPage: {
+          scrollElement: $('//XCUIElementTypeCollectionView')
+        }
+      });
+
+
+    }).timeout(4 * 60 * 1000); // scrolling on ios require more time
+  }
+
   it('Captures only catalog content', async () => {
     const catalogContent = await App.catalogContent;
     await browser.sauceVisualCheck(`Catalog Fragment`, {