test: 优化截图对比测试

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

@@ -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() {

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,7 +32,7 @@
       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');
@@ -39,27 +46,11 @@
         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);
-`);
         }
       },
       loaded() {
         this.isLoaded = true
-        this.appendWebHeadPlaceholder();
+        this.customNavigationBarPageAppendWebHeadPlaceholder();
       },
       error(event : WebViewErrorEvent) {
         console.log('webview load error', JSON.stringify(event.detail));