test: 支持 ios 端 webview & app 截图对比

pages/API/action-sheet/action-sheet.test.js

@@ -18,7 +18,7 @@ describe('API-loading', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -30,7 +30,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -59,7 +59,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -70,7 +70,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -101,7 +101,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -112,7 +112,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -142,7 +142,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -153,7 +153,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -183,7 +183,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -194,7 +194,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -224,7 +224,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -235,7 +235,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -268,7 +268,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -279,7 +279,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -309,7 +309,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -320,7 +320,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -350,7 +350,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -361,7 +361,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -391,7 +391,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -402,7 +402,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -433,7 +433,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -444,7 +444,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -474,7 +474,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -485,7 +485,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -515,7 +515,7 @@ describe('API-loading', () => {
 
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -526,7 +526,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()

pages/API/get-window-info/get-window-info.uvue

@@ -19,7 +19,8 @@
   </view>
 </template>
 <script>
-  import { setStatusBarHeight } from '@/store/index.uts'
+  import { setStatusBarHeight, setSafeArea } from '@/store/index.uts'
+  import type { SafeArea } from '@/store/index.uts'
 
   type Item = {
     label : string,
@@ -33,33 +34,42 @@
       }
     },
     onUnload: function () {
-    },
-    onReady() {
-      this.getWindowInfo()
+    },
+    onReady() {
+      this.getWindowInfo()
     },
     methods: {
       getWindowInfo: function () {
         const res = uni.getWindowInfo();
-        // 获取状态栏+导航栏高度, 供截图对比使用
+        // 获取状态栏高度, 供截图对比使用
         setStatusBarHeight(res.statusBarHeight);
-        this.items = [] as Item[];
-
-        const res_str = JSON.stringify(res);
-        const res_obj =  JSON.parseObject(res_str);
-        const res_map = res_obj!.toMap();
-        let keys = [] as string[]
-        res_map.forEach((_, key) => {
-           keys.push(key);
-        });
-        keys.sort().forEach( key => {
-          const value = res[key];
-          if(value != null){
-            const item = {
-            	label: key,
-            	value: "" + ((typeof value == "object")? JSON.stringify(value) : value)
-            } as Item;
-            this.items.push(item);
-          }
+        // 获取安全区信息,供截图使用
+        setSafeArea({
+          top: res.safeArea.top,
+          left: res.safeArea.left,
+          right: res.safeArea.right,
+          bottom: res.safeArea.bottom,
+          width: res.safeArea.width,
+          height: res.safeArea.height,
+        } as SafeArea);
+        this.items = [] as Item[];
+
+        const res_str = JSON.stringify(res);
+        const res_obj = JSON.parseObject(res_str);
+        const res_map = res_obj!.toMap();
+        let keys = [] as string[]
+        res_map.forEach((_, key) => {
+          keys.push(key);
+        });
+        keys.sort().forEach(key => {
+          const value = res[key];
+          if (value != null) {
+            const item = {
+              label: key,
+              value: "" + ((typeof value == "object") ? JSON.stringify(value) : value)
+            } as Item;
+            this.items.push(item);
+          }
         });
       },
       //自动化测试例专用

pages/API/modal/modal.test.js

@@ -20,7 +20,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -31,7 +31,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -60,7 +60,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -71,7 +71,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -101,7 +101,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -112,7 +112,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -142,7 +142,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -153,7 +153,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -183,7 +183,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -194,7 +194,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -223,7 +223,7 @@ describe('API-loading', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -234,7 +234,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -263,7 +263,7 @@ describe('API-loading', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -274,7 +274,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -303,7 +303,7 @@ describe('API-loading', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -314,7 +314,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -343,7 +343,7 @@ describe('API-loading', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -354,7 +354,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -384,7 +384,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -395,7 +395,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -425,7 +425,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -436,7 +436,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -466,7 +466,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -477,7 +477,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -507,7 +507,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -518,7 +518,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -548,7 +548,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -559,7 +559,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -589,7 +589,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -600,7 +600,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -630,7 +630,7 @@ describe('API-loading', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -641,7 +641,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -671,7 +671,7 @@ describe('API-loading', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -682,7 +682,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -711,7 +711,7 @@ describe('API-loading', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -722,7 +722,7 @@ describe('API-loading', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()

pages/API/navigator/new-page/onLoad.test.js

@@ -61,7 +61,7 @@ describe("onLoad", () => {
     await page.callMethod("navigateToOnLoadWithType", "showToast");
     await page.waitFor(1000);
     const image = await program.screenshot({
-      adb: true,
+      deviceShot: true,
       area: {
         x: 0,
         y: 200,
@@ -79,7 +79,7 @@ describe("onLoad", () => {
     await page.callMethod("navigateToOnLoadWithType", "showLoading");
     await page.waitFor(1000);
     const image = await program.screenshot({
-      adb: true,
+      deviceShot: true,
       area: {
         x: 0,
         y: 200,
@@ -97,7 +97,7 @@ describe("onLoad", () => {
     await page.callMethod("navigateToOnLoadWithType", "showModal");
     await page.waitFor(1000);
     const image = await program.screenshot({
-      adb: true,
+      deviceShot: true,
       area: {
         x: 0,
         y: 200,
@@ -115,7 +115,7 @@ describe("onLoad", () => {
     await page.callMethod("navigateToOnLoadWithType", "showActionSheet");
     await page.waitFor(1000);
     const image = await program.screenshot({
-      adb: true,
+      deviceShot: true,
       area: {
         x: 0,
         y: 200,

pages/API/toast/toast.test.js

@@ -23,7 +23,7 @@ describe('API-toast', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -34,7 +34,7 @@ describe('API-toast', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -54,7 +54,7 @@ describe('API-toast', () => {
       const windowWidth = res.windowWidth * res.pixelRatio;
 
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -65,7 +65,7 @@ describe('API-toast', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -83,7 +83,7 @@ describe('API-toast', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -94,7 +94,7 @@ describe('API-toast', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -110,7 +110,7 @@ describe('API-toast', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -121,7 +121,7 @@ describe('API-toast', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -143,7 +143,7 @@ describe('API-toast', () => {
       const windowHeight = res.windowHeight * res.pixelRatio;
       const windowWidth = res.windowWidth * res.pixelRatio;
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: {
           x: 0,
           y: 200,
@@ -154,7 +154,7 @@ describe('API-toast', () => {
       expect(image).toMatchImageSnapshot();
     }else{
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         fullPage: true
       });
       expect(image).toMatchImageSnapshot()
@@ -170,7 +170,7 @@ describe('API-toast', () => {
   //     const windowHeight = uni.getWindowInfo().windowHeight;
   //     const windowWidth = uni.getWindowInfo().windowWidth;
   //     const image = await program.screenshot({
-  //       adb: true,
+  //       deviceShot: true,
   //       area: {
   //         x: 0,
   //         y: 200,
@@ -181,7 +181,7 @@ describe('API-toast', () => {
   //     expect(image).toMatchImageSnapshot();
   //   }else{
   //     const image = await program.screenshot({
-  //       adb: true,
+  //       deviceShot: true,
   //       fullPage: true
   //     });
   //     expect(image).toMatchImageSnapshot()

pages/template/navbar-lite/navbar-lite.test.js

@@ -37,7 +37,7 @@ describe("setCustomNavigationBarColor", () => {
     await page.waitFor(1000);
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: adbScreenShotArea,
       });
       expect(image).toMatchImageSnapshot();
@@ -51,7 +51,7 @@ describe("setCustomNavigationBarColor", () => {
     await page.waitFor(1000);
     if (isAndroid) {
       const image = await program.screenshot({
-        adb: true,
+        deviceShot: true,
         area: adbScreenShotArea,
       });
       expect(image).toMatchImageSnapshot();
@@ -59,4 +59,4 @@ describe("setCustomNavigationBarColor", () => {
     const lifeCycleNum = await page.callMethod("getLifeCycleNum");
     expect(lifeCycleNum - originLifeCycleNum).toBe(4);
   });
-});
+});

pages/webview-screenshot-comparison/webview-screenshot-comparison.test.js

@@ -289,12 +289,13 @@ describe("shot-compare", () => {
     const isCustomNavigationBar = customNavigationPages.includes(pages[pageIndex]);
     const {
       statusBarHeight,
+      safeArea,
       devicePixelRatio
     } = await page.data();
     const screenshotParams = {
       fullPage: true,
-      adb: isNeedAdbScreenshot,
-      // adb 截图时跳过状态栏
+      deviceShot: isNeedAdbScreenshot,
+      // deviceShot 截图时跳过状态栏
       area: {
         x: 0,
         y: statusBarHeight * devicePixelRatio,
@@ -331,11 +332,11 @@ describe("shot-compare", () => {
       await page.waitFor(3000);
     }
 
-    // web 端非 adb 截图时设置 offsetY 移除导航栏
+    // web 端非 deviceShot 截图时设置 offsetY 移除导航栏
     const webSnapshot = await program.screenshot({
       ...screenshotParams,
       id: 'webview-screenshot-comparison',
-      offsetY: `${isCustomNavigationBar ? 0 : 44}`
+      offsetY: `${isCustomNavigationBar ? 0 : 44 + safeArea.top}`
     });
     expect(webSnapshot).toMatchImageSnapshot({
       customSnapshotIdentifier() {

pages/webview-screenshot-comparison/webview-screenshot-comparison.uvue

@@ -15,7 +15,8 @@
         src: '',
         webviewContext: null as WebviewContext | null,
         isLoaded: false,
-        statusBarHeight: state.statusBarHeight,
+        statusBarHeight: state.statusBarHeight,
+        safeArea: state.safeArea,
         isCustomNavigationBar: false,
         devicePixelRatio: state.devicePixelRatio,
         webviewStyles: {

pages/webview-screenshot/webview-screenshot.test.js

@@ -284,8 +284,8 @@ describe("shot-compare", () => {
     } = await page.data();
     const screenshotParams = {
       fullPage: true,
-      adb: isNeedAdbScreenshot,
-      // adb 截图时跳过状态栏
+      deviceShot: isNeedAdbScreenshot,
+      // deviceShot 截图时跳过状态栏
       area: {
         x: 0,
         y: (headerHeight - 44) * devicePixelRatio,
@@ -323,7 +323,7 @@ describe("shot-compare", () => {
       await page.waitFor(3000);
     }
 
-    // web 端非 adb 截图时设置 offsetY 移除导航栏
+    // web 端非 deviceShot 截图时设置 offsetY 移除导航栏
     const webSnapshot = await program.screenshot({
       ...screenshotParams,
       offsetY: `${isCustomNavigation ? 0 : headerHeight}`

store/index.uts

+export type SafeArea = {
+  top : number,
+  right : number,
+  bottom : number,
+  left : number,
+  width : number,
+  height : number,
+}
+
 type State = {
   lifeCycleNum : number,
   // 状态栏高度
   statusBarHeight : number,
+  safeArea : SafeArea
   // 设备像素比
   devicePixelRatio : number
 }
 
-export const state = reactive({ lifeCycleNum: 0, statusBarHeight: 0, devicePixelRatio: 1 } as State)
+export const state = reactive({
+  lifeCycleNum: 0,
+  statusBarHeight: 0,
+  devicePixelRatio: 1,
+  safeArea: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+  }
+} as State)
 
 export const setLifeCycleNum = (num : number) => {
   state.lifeCycleNum = num
@@ -14,6 +36,10 @@ export const setLifeCycleNum = (num : number) => {
 
 export const setStatusBarHeight = (height : number) => {
   state.statusBarHeight = height
+}
+
+export const setSafeArea = (value : SafeArea) => {
+  state.safeArea = value
 }
 
 export const setDevicePixelRatio = (devicePixelRatio : number) => {