test: 优化截图对比测试

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

 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-    <!-- #endif -->
+  <!-- #endif -->
     <view>
       <page-head :title="title"></page-head>
       <view class="uni-common-mt">
         <view class="uni-list">
           <view class="uni-list">
-            <view
-              class="uni-list-cell"
-              v-for="(item, _) in items"
-              style="align-items: center"
-            >
+            <view class="uni-list-cell" v-for="(item, _) in items" style="align-items: center">
               <view class="uni-pd">
                 <view class="uni-label" style="width: 180px">{{
                   item.label
                 }}</view>
               </view>
               <view class="uni-list-cell-db">
-                <textarea
-                  :auto-height="true"
-                  :disabled="true"
-                  placeholder="未获取"
-                  :value="item.value"
-                />
+                <textarea :auto-height="true" :disabled="true" placeholder="未获取" :value="item.value" />
               </view>
             </view>
           </view>
@@ -35,45 +26,49 @@
         </view>
       </view>
     </view>
-    <!-- #ifdef APP -->
+  <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 <script>
-type Item = {
-	label : string,
-	value : string,
-}
-export default {
-	data() {
-		return {
-			title: 'getDeviceInfo',
-			items: [] as Item[],
-		}
-	},
-	onUnload:function(){
-	},
-	methods: {
-		getDeviceInfo: function () {
-			const res = uni.getDeviceInfo();
-      this.items = [] as Item[];
-      for(const key in res){
-        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);
-        }
+  import { setDevicePixelRatio } from '@/store/index.uts'
+
+  type Item = {
+    label : string,
+    value : string,
+  }
+  export default {
+    data() {
+      return {
+        title: 'getDeviceInfo',
+        items: [] as Item[],
+      }
+    },
+    onUnload: function () {
+    },
+    methods: {
+      getDeviceInfo: function () {
+        const res = uni.getDeviceInfo();
+        // 获取像素比, 供截图对比使用
+        setDevicePixelRatio(res.devicePixelRatio !== null ? parseFloat(res.devicePixelRatio!) : 1)
+        this.items = [] as Item[];
+        for (const key in res) {
+          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);
+          }
+        }
       }
-		}
-	}
-}
+    }
+  }
 </script>
 
 <style>
-.uni-pd {
-  padding-left: 30rpx;
-}
-</style>
+  .uni-pd {
+    padding-left: 30rpx;
+  }
+</style>

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

 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-common-mt">
-			<view class="uni-list">
-				<view class="uni-list-cell" v-for="(item,_) in items" style="align-items: center;">
-					<view class="uni-pd">
-						<view class="uni-label" style="width:180px;">{{item.label}}</view>
-					</view>
-					<view class="uni-list-cell-db">
-						<textarea :auto-height="true" :disabled="true" placeholder="未获取" :value="item.value" />
-					</view>
-				</view>
-			</view>
-			<view class="uni-padding-wrap">
-				<view class="uni-btn-v">
-					<button type="primary" @tap="getWindowInfo">获取窗口信息</button>
-				</view>
-			</view>
-		</view>
-	</view>
+  <view>
+    <page-head :title="title"></page-head>
+    <view class="uni-common-mt">
+      <view class="uni-list">
+        <view class="uni-list-cell" v-for="(item, _) in items" style="align-items: center">
+          <view class="uni-pd">
+            <view class="uni-label" style="width: 180px">{{ item.label }}</view>
+          </view>
+          <view class="uni-list-cell-db">
+            <textarea :auto-height="true" :disabled="true" placeholder="未获取" :value="item.value" />
+          </view>
+        </view>
+      </view>
+      <view class="uni-padding-wrap">
+        <view class="uni-btn-v">
+          <button type="primary" @tap="getWindowInfo">获取窗口信息</button>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 <script>
-	type Item = {
-		label : string,
-		value : string,
-	}
-	export default {
-		data() {
-			return {
-				title: 'getWindowInfo',
-				items: [] as Item[],
-			}
-		},
-		onUnload: function () {
-		},
-		methods: {
-			getWindowInfo: function () {
-				const res = uni.getWindowInfo();
-        this.items = [] as Item[];
-				for(const key in res){
-				  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);
-          }
-				}
-			},
-      //自动化测试例专用
-      jest_getWindowInfo():GetWindowInfoResult{
-        return uni.getWindowInfo();
+  import { setHeaderHeight } from '@/store/index.uts'
+
+  type Item = {
+    label : string,
+    value : string,
+  }
+  export default {
+    data() {
+      return {
+        title: 'getWindowInfo',
+        items: [] as Item[],
+      }
+    },
+    onUnload: function () {
+    },
+    methods: {
+      getWindowInfo: function () {
+        const res = uni.getWindowInfo();
+        // 获取状态栏+导航栏高度, 供截图对比使用
+        setHeaderHeight(res.screenHeight - res.windowHeight);
+        this.items = [] as Item[];
+        for (const key in res) {
+          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);
+          }
+        }
+      },
+      //自动化测试例专用
+      jest_getWindowInfo() : GetWindowInfoResult {
+        return uni.getWindowInfo();
       },
-		}
-	}
+    }
+  }
 </script>
 
 <style>
-	.uni-pd {
-		padding-left: 30rpx;
-	}
-</style>
+  .uni-pd {
+    padding-left: 30rpx;
+  }
+</style>
\ No newline at end of file

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

@@ -37,7 +37,6 @@ const pages = [
   "pages/component/scroll-view/scroll-view-refresher",
   "pages/tabBar/API",
   "pages/API/get-app/get-app",
-  "pages/API/exit/exit",
   "pages/API/get-current-pages/get-current-pages",
   "pages/API/get-launch-options-sync/get-launch-options-sync",
   "pages/API/navigator/navigator",
@@ -79,7 +78,6 @@ const pages = [
   "pages/API/unicloud-file-api/unicloud-file-api",
   "pages/API/unicloud-database/unicloud-database",
   "pages/API/get-window-info/get-window-info",
-  "pages/API/element-takesnapshot/element-takesnapshot",
   "pages/API/get-element-by-id/get-element-by-id",
   "pages/API/get-element-by-id/get-element-by-id-multiple-root-node",
   "pages/API/navigator/new-page/onLoad",
@@ -148,7 +146,6 @@ const pages = [
   "pages/template/navbar-lite/navbar-lite",
   "pages/template/pull-zoom-image/pull-zoom-image",
   "pages/template/scroll-fold-nav/scroll-fold-nav",
-  "pages/template/scroll-sticky/scroll-sticky",
 
   // 自动获取焦点
   // "pages/component/input/input",
@@ -163,7 +160,6 @@ const pages = [
 
   // 动态内容
   // "pages/component/web-view/web-view"
-  // "pages/template/calendar/calendar",
   // "pages/template/custom-refresher/custom-refresher",
   // "pages/component/picker-view/picker-view",
   // "pages/template/long-list/long-list",
@@ -184,6 +180,7 @@ const pages = [
   // "pages/API/websocket-global/websocket-global"
 
   // 仅 app
+  // "pages/template/calendar/calendar",
   // pages/component/unicloud-db-contacts/list
   // pages/component/unicloud-db-contacts/add
   // pages/component/unicloud-db-contacts/edit
@@ -195,9 +192,13 @@ const pages = [
   // "pages/component/sticky-section/sticky-section",
   // pages/API/facial-recognition-verify/facial-recognition-verify
   // pages/API/get-file-system-manager/get-file-system-manager
-  // "pages/API/install-apk/install-apk",
+  // "pages/API/install-apk/install-apk",
+  // "pages/template/scroll-sticky/scroll-sticky",
+  // "pages/API/exit/exit",
+  // "pages/API/element-takesnapshot/element-takesnapshot",
 
-  // 仅 web
+  // 仅 web
+  // pages/template/browser-canvas/browser-canvas
   // pages/template/schema/schema
   // pages/template/share/share
 ];
@@ -208,6 +209,12 @@ const childToParentPagesMap = new Map([
   ],
 ]);
 
+const customNavigationPages = [
+  "pages/template/navbar-lite/navbar-lite",
+  "pages/template/pull-zoom-image/pull-zoom-image",
+  "pages/template/scroll-fold-nav/scroll-fold-nav"
+]
+
 const needAdbScreenshotPages = [
   "pages/tabBar/component",
   "pages/tabBar/API",
@@ -218,6 +225,7 @@ const needAdbScreenshotPages = [
   "pages/API/loading/loading",
   "pages/API/toast/toast",
 ];
+
 const needAdbScreenshot = (url) => {
   return needAdbScreenshotPages.includes(url);
 };
@@ -231,12 +239,19 @@ describe("shot-compare", () => {
     let pageIndex = 0;
     let baseSrc = "";
     beforeAll(async () => {
+      // 获取导航栏+状态栏高度
+      page = await program.reLaunch('/pages/API/get-window-info/get-window-info')
+      await page.callMethod('getWindowInfo')
+      // 获取设备像素比
+      page = await program.reLaunch('/pages/API/get-device-info/get-device-info')
+      await page.callMethod('getDeviceInfo')
       page = await program.reLaunch(PAGE_PATH);
       await page.waitFor(500);
 
       // set webview-screenshot-comparison page baseSrc
       baseSrc =
-        process.env.UNI_WEB_SERVICE_URL ? `${process.env.UNI_WEB_SERVICE_URL}/#/` : "http://test.dcloud.io/unix_h5_build/98_dev_hello-uni-app-x/#/";
+        process.env.UNI_WEB_SERVICE_URL ? `${process.env.UNI_WEB_SERVICE_URL}/#/` :
+        "http://test.dcloud.io/unix_h5_build/98_dev_hello-uni-app-x/#/";
       page.setData({
         baseSrc,
       });
@@ -252,6 +267,20 @@ describe("shot-compare", () => {
 
     test.each(pages)("%s", async () => {
       const isNeedAdbScreenshot = needAdbScreenshot(pages[pageIndex]);
+      const isCustomNavigation = customNavigationPages.includes(pages[pageIndex]);
+      const {
+        headerHeight,
+        devicePixelRatio
+      } = await page.data();
+      const screenshotParams = {
+        fullPage: true,
+        adb: isNeedAdbScreenshot,
+        // adb 截图时跳过状态栏
+        area: {
+          x: 0,
+          y: (headerHeight - 44) * devicePixelRatio,
+        },
+      }
       const screenshotPath = `__webview__${pages[pageIndex].replace(/\//g, "-")}`;
 
       // web in webview screenshot
@@ -259,11 +288,10 @@ describe("shot-compare", () => {
       if (childToParentPagesMap.get(pages[pageIndex])) {
         await page.setData({
           src: `${baseSrc}${childToParentPagesMap.get(pages[pageIndex])}`,
-          isLoaded: false,
-          needRemoveWebHead: !isNeedAdbScreenshot,
+          isLoaded: false
         });
         await page.waitFor(async () => {
-          const isLoaded = page.data("isLoaded");
+          const isLoaded = await page.data("isLoaded");
           return isLoaded || Date.now() - startTime > 10000;
         });
         await page.waitFor(200);
@@ -276,21 +304,18 @@ describe("shot-compare", () => {
 
       const startTime = Date.now();
       await page.waitFor(async () => {
-        const isLoaded = page.data("isLoaded");
+        const isLoaded = await page.data("isLoaded");
         return isLoaded || Date.now() - startTime > 3000;
       });
-      await page.waitFor(200);
+      await page.waitFor(800);
       if (pages[pageIndex].includes("load-font-face")) {
         await page.waitFor(3000);
       }
 
+      // web 端非 adb 截图时设置 offsetY 移除导航栏
       const webSnapshot = await program.screenshot({
-        fullPage: isNeedAdbScreenshot ? false : true,
-        adb: isNeedAdbScreenshot ? true : false,
-        area: {
-          x: 0,
-          y: 100,
-        },
+        ...screenshotParams,
+        offsetY: `${isCustomNavigation ? 0 : headerHeight}`
       });
       expect(webSnapshot).toMatchImageSnapshot({
         customSnapshotIdentifier() {
@@ -307,14 +332,7 @@ describe("shot-compare", () => {
       if (pages[pageIndex].includes("load-font-face")) {
         await page.waitFor(3000);
       }
-      const appAndroidSnapshot = await program.screenshot({
-        fullPage: isNeedAdbScreenshot ? false : true,
-        adb: isNeedAdbScreenshot ? true : false,
-        area: {
-          x: 0,
-          y: 100,
-        },
-      });
+      const appAndroidSnapshot = await program.screenshot(screenshotParams);
       expect(appAndroidSnapshot).toMatchImageSnapshot({
         customSnapshotIdentifier() {
           return screenshotPath;
@@ -326,4 +344,4 @@ describe("shot-compare", () => {
       expect(1).toBe(1);
     });
   }
-});
+});

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

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+  import { state } from '@/store/index.uts'
+
   export default {
     data() {
       return {
@@ -12,7 +14,8 @@
         src: '',
         webviewContext: null as WebviewContext | null,
         isLoaded: false,
-        needRemoveWebHead: false,
+        headerHeight: state.headerHeight,
+        devicePixelRatio: state.devicePixelRatio,
         webviewStyles: {
           progress: false
         }
@@ -22,31 +25,39 @@
       this.webviewContext = uni.createWebviewContext('webview-screenshot', this)
     },
     methods: {
-      removeWebHead() {
-        this.webviewContext?.evalJS(`document.querySelector('uni-page-head').style.display='none'`);
-      },
       appendWebHeadPlaceholder() {
-        this.webviewContext?.evalJS(`
+        if (src.indexOf('pages/template/navbar-lite/navbar-lite') > -1) {
+          this.webviewContext?.evalJS(`
+            const uniNavbar = document.querySelector('.uni-navbar');
+            uniNavbar.style.paddingTop = '${state.headerHeight - 44}px';
+          `)
+        } else if (src.indexOf('pages/template/scroll-fold-nav/scroll-fold-nav') > -1) {
+          this.webviewContext?.evalJS(`
+            const heightSeat = document.querySelector('.height-seat');
+            heightSeat.style.height = '125px';
+            heightSeat.style.backgroundColor = '#f0f8ff';
+            const topBox = document.querySelector('.top-box');
+            topBox.style.top = '35px';
+          `)
+        } else {
+          this.webviewContext?.evalJS(`
   const hasWebHeadPlaceholder = document.querySelector('.web-head-placeholder-for-screenshot-comparison');
   if (hasWebHeadPlaceholder) {
     return;
   }
   const webHeadPlaceholder = document.createElement('div');
-  webHeadPlaceholder.style.height = '52px';
+  webHeadPlaceholder.style.height = '${state.headerHeight - 44}px';
   webHeadPlaceholder.style.backgroundColor = '#007aff';
   webHeadPlaceholder.classList.add('web-head-placeholder-for-screenshot-comparison');
   const uniPage = document.querySelector('uni-page');
   const uniPageHead = document.querySelector('uni-page-head');
   uniPage.insertBefore(webHeadPlaceholder, uniPageHead);
   `);
+        }
       },
       loaded() {
         this.isLoaded = true
-        if (this.needRemoveWebHead) {
-          this.removeWebHead();
-        } else {
-          this.appendWebHeadPlaceholder();
-        }
+        this.appendWebHeadPlaceholder();
       },
       error(event : WebViewErrorEvent) {
         console.log('webview load error', JSON.stringify(event.detail));

store/index.uts

-type State = {
-  lifeCycleNum: number
-}
-
-export const state = reactive({ lifeCycleNum: 0 } as State)
-
-export const setLifeCycleNum = (num: number) => {
-  state.lifeCycleNum = num
+type State = {
+  lifeCycleNum : number,
+  // 状态栏 + 导航栏高度
+  headerHeight : number,
+  // 设备像素比
+  devicePixelRatio : number
+}
+
+export const state = reactive({ lifeCycleNum: 0, headerHeight: 0, devicePixelRatio: 1 } as State)
+
+export const setLifeCycleNum = (num : number) => {
+  state.lifeCycleNum = num
+}
+
+export const setHeaderHeight = (height : number) => {
+  state.headerHeight = height
+}
+
+export const setDevicePixelRatio = (devicePixelRatio : number) => {
+  state.devicePixelRatio = devicePixelRatio
 }