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,
@@ -40,8 +41,17 @@
     methods: {
       getWindowInfo: function () {
         const res = uni.getWindowInfo();
-        // 获取状态栏+导航栏高度, 供截图对比使用
+        // 获取状态栏高度, 供截图对比使用
         setStatusBarHeight(res.statusBarHeight);
+        // 获取安全区信息,供截图使用
+        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);
@@ -51,12 +61,12 @@
         res_map.forEach((_, key) => {
           keys.push(key);
         });
-        keys.sort().forEach( key => {
+        keys.sort().forEach(key => {
           const value = res[key];
-          if(value != null){
+          if (value != null) {
             const item = {
               label: key,
-            	value: "" + ((typeof value == "object")? JSON.stringify(value) : value)
+              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();

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

@@ -16,6 +16,7 @@
         webviewContext: null as WebviewContext | null,
         isLoaded: false,
         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
@@ -16,6 +38,10 @@ export const setStatusBarHeight = (height : number) => {
   state.statusBarHeight = height
 }
 
+export const setSafeArea = (value : SafeArea) => {
+  state.safeArea = value
+}
+
 export const setDevicePixelRatio = (devicePixelRatio : number) => {
   state.devicePixelRatio = devicePixelRatio
 }