test: 优化截图对比测试

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

@@ -192,12 +192,12 @@ 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/template/scroll-sticky/scroll-sticky",
-  // "pages/API/exit/exit",
+  // "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
@@ -210,8 +210,8 @@ const childToParentPagesMap = new Map([
 ]);
 
 const customNavigationPages = [
-  "pages/template/navbar-lite/navbar-lite",
-  "pages/template/pull-zoom-image/pull-zoom-image",
+  "pages/template/navbar-lite/navbar-lite",
+  "pages/template/pull-zoom-image/pull-zoom-image",
   "pages/template/scroll-fold-nav/scroll-fold-nav"
 ]
 
@@ -267,7 +267,7 @@ describe("shot-compare", () => {
 
     test.each(pages)("%s", async () => {
       const isNeedAdbScreenshot = needAdbScreenshot(pages[pageIndex]);
-      const isCustomNavigation = customNavigationPages.includes(pages[pageIndex]);
+      const isCustomNavigationBar = customNavigationPages.includes(pages[pageIndex]);
       const {
         headerHeight,
         devicePixelRatio
@@ -299,7 +299,7 @@ describe("shot-compare", () => {
       await page.setData({
         src: `${baseSrc}${pages[pageIndex]}`,
         isLoaded: false,
-        needRemoveWebHead: !isNeedAdbScreenshot,
+        isCustomNavigationBar,
       });
 
       const startTime = Date.now();
@@ -315,7 +315,8 @@ describe("shot-compare", () => {
       // web 端非 adb 截图时设置 offsetY 移除导航栏
       const webSnapshot = await program.screenshot({
         ...screenshotParams,
-        offsetY: `${isCustomNavigation ? 0 : headerHeight}`
+        id: 'webview-screenshot-comparison',
+        offsetY: `${isCustomNavigationBar ? 0 : 44}`
       });
       expect(webSnapshot).toMatchImageSnapshot({
         customSnapshotIdentifier() {
@@ -344,4 +345,4 @@ describe("shot-compare", () => {
       expect(1).toBe(1);
     });
   }
-});
+});

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

 <template>
+  <view v-if="!isCustomNavigationBar" :style="placeholderStyle"></view>
   <web-view id="webview-screenshot-comparison" class="webview-screenshot-comparison" :webview-styles="webviewStyles"
     :src="src" @loaded="loaded" @error="error">
   </web-view>
@@ -15,6 +16,12 @@
         webviewContext: null as WebviewContext | null,
         isLoaded: false,
         headerHeight: state.headerHeight,
+        isCustomNavigationBar: false,
+        placeholderStyle: {
+          display: 'block',
+          height: `${state.headerHeight - 44}px`,
+          backgroundColor: '#007aff'
+        },
         devicePixelRatio: state.devicePixelRatio,
         webviewStyles: {
           progress: false
@@ -25,41 +32,25 @@
       this.webviewContext = uni.createWebviewContext('webview-screenshot-comparison', this)
     },
     methods: {
-      appendWebHeadPlaceholder() {
+      customNavigationBarPageAppendWebHeadPlaceholder() {
         if (this.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';
-        `)
+            const uniNavbar = document.querySelector('.uni-navbar');
+            uniNavbar.style.paddingTop = '${state.headerHeight - 44}px';
+          `)
         } else if (this.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 if (this.src.indexOf('pages/template/pull-zoom-image/pull-zoom-image') > -1) {
-          return
-        } 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 = '${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);
-`);
+        const heightSeat = document.querySelector('.height-seat');
+        heightSeat.style.height = '125px';
+        heightSeat.style.backgroundColor = '#f0f8ff';
+        const topBox = document.querySelector('.top-box');
+        topBox.style.top = '35px';
+      `)
         }
       },
       loaded() {
         this.isLoaded = true
-        this.appendWebHeadPlaceholder();
+        this.customNavigationBarPageAppendWebHeadPlaceholder();
       },
       error(event : WebViewErrorEvent) {
         console.log('webview load error', JSON.stringify(event.detail));