test：优化截图对比测试用例

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

@@ -67,7 +67,7 @@ const pages = [
 	'pages/composition-api/lifecycle/component-lifecycle/component-lifecycle',
 	'pages/built-in-component/teleport/teleport',
 	'pages/component-instance/watch-function/watch-function'
-	
+
 	// 仅app
 	// 'pages/composition/mixins/mixins',
 	// 'pages/composition/mixins/mixins-page2',
@@ -144,12 +144,12 @@ describe("shot-compare", () => {
 		shouldCompareScreenShot = version > 9
 	}
 
-  if (!shouldCompareScreenShot) {
-    it("other platform not support", async () => {
-      expect(1).toBe(1);
-    });
-    return
-  }
+	if (!shouldCompareScreenShot) {
+		it("other platform not support", async () => {
+			expect(1).toBe(1);
+		});
+		return
+	}
 
 	let page = null;
 	let pageIndex = 0;
@@ -157,15 +157,18 @@ describe("shot-compare", () => {
 	beforeAll(async () => {
 		page = await program.reLaunch(PAGE_PATH);
 		await page.waitFor(500);
+		await page.callMethod('getWindowInfo');
+		await page.callMethod('getDeviceInfo');
+
+		// 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-uvue/#/";
 
-    // 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-uvue/#/";
-    page.setData({
-      baseSrc,
-    });
-  });
+		page.setData({
+			baseSrc,
+		});
+	});
 
 	beforeEach(async () => {
 		page = await program.reLaunch(PAGE_PATH);
@@ -175,23 +178,23 @@ describe("shot-compare", () => {
 		pageIndex++;
 	});
 
-  test.each(pages)("%s", async () => {
-    const isNeedAdbScreenshot = needAdbScreenshot(pages[pageIndex]);
-    const isCustomNavigationBar = customNavigationPages.includes(pages[pageIndex]);
-    const {
-      statusBarHeight,
-      devicePixelRatio
-    } = await page.data();
-    const screenshotParams = {
-      fullPage: true,
-      adb: isNeedAdbScreenshot,
-      // adb 截图时跳过状态栏
-      area: {
-        x: 0,
-        y: statusBarHeight * devicePixelRatio,
-      },
-    }
-    const screenshotPath = `__webview__${pages[pageIndex].replace(/\//g, "-")}`;
+	test.each(pages)("%s", async () => {
+		const isNeedAdbScreenshot = needAdbScreenshot(pages[pageIndex]);
+		const isCustomNavigationBar = customNavigationPages.includes(pages[pageIndex]);
+		const {
+			statusBarHeight,
+			devicePixelRatio
+		} = await page.data();
+		const screenshotParams = {
+			fullPage: true,
+			adb: isNeedAdbScreenshot,
+			// adb 截图时跳过状态栏
+			area: {
+				x: 0,
+				y: statusBarHeight * devicePixelRatio,
+			},
+		}
+		const screenshotPath = `__webview__${pages[pageIndex].replace(/\//g, "-")}`;
 
 		// web in webview screenshot
 		// 加载依赖页面
@@ -212,36 +215,36 @@ describe("shot-compare", () => {
 			isCustomNavigationBar,
 		});
 
-    const startTime = Date.now();
-    await page.waitFor(async () => {
-      const isLoaded = await page.data("isLoaded");
-      return isLoaded || Date.now() - startTime > 3000;
-    });
-    await page.waitFor(800);
-
-    // web 端非 adb 截图时设置 offsetY 移除导航栏
-    const webSnapshot = await program.screenshot({
-      ...screenshotParams,
-      id: 'webview-screenshot-comparison',
-      offsetY: `${isCustomNavigationBar ? 0 : 44}`
-    });
-    expect(webSnapshot).toMatchImageSnapshot({
-      customSnapshotIdentifier() {
-        return screenshotPath;
-      },
-    });
-
-    // app-android page screenshot comparison
-    const navigateMethod = pages[pageIndex].startsWith("pages/tab-bar") ?
-      "switchTab" :
-      "navigateTo";
-    page = await program[navigateMethod](`/${pages[pageIndex]}`);
-    await page.waitFor(500);
-    const appAndroidSnapshot = await program.screenshot(screenshotParams);
-    expect(appAndroidSnapshot).toMatchImageSnapshot({
-      customSnapshotIdentifier() {
-        return screenshotPath;
-      },
-    });
-  });
-});
+		const startTime = Date.now();
+		await page.waitFor(async () => {
+			const isLoaded = await page.data("isLoaded");
+			return isLoaded || Date.now() - startTime > 3000;
+		});
+		await page.waitFor(800);
+
+		// web 端非 adb 截图时设置 offsetY 移除导航栏
+		const webSnapshot = await program.screenshot({
+			...screenshotParams,
+			id: 'webview-screenshot-comparison',
+			offsetY: `${isCustomNavigationBar ? 0 : 44}`
+		});
+		expect(webSnapshot).toMatchImageSnapshot({
+			customSnapshotIdentifier() {
+				return screenshotPath;
+			},
+		});
+
+		// app-android page screenshot comparison
+		const navigateMethod = pages[pageIndex].startsWith("pages/tab-bar") ?
+			"switchTab" :
+			"navigateTo";
+		page = await program[navigateMethod](`/${pages[pageIndex]}`);
+		await page.waitFor(500);
+		const appAndroidSnapshot = await program.screenshot(screenshotParams);
+		expect(appAndroidSnapshot).toMatchImageSnapshot({
+			customSnapshotIdentifier() {
+				return screenshotPath;
+			},
+		});
+	});
+});
\ No newline at end of file

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

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+	import { state, setStatusBarHeight, setDevicePixelRatio } from '@/store/index.uts'
 	export default {
 		data() {
 			return {
@@ -13,17 +14,15 @@
 				src: '',
 				webviewContext: null as WebviewContext | null,
 				isLoaded: false,
-				statusBarHeight: 0,
+				statusBarHeight: state.statusBarHeight,
 				isCustomNavigationBar: false,
-				devicePixelRatio: 1,
+				devicePixelRatio: state.devicePixelRatio,
 				webviewStyles: {
 					progress: false
 				}
 			}
 		},
 		onReady() {
-			this.getWindowInfo();
-			this.getDeviceInfo();
 			this.webviewContext = uni.createWebviewContext('webview-screenshot-comparison', this)
 		},
 		methods: {
@@ -35,13 +34,13 @@
 			},
 			getWindowInfo() {
 				const res = uni.getWindowInfo();
-				// 获取状态栏, 供截图对比使用
-				this.statusBarHeight = res.statusBarHeight;
+				// 获取状态栏, 供截图对比使用
+				setStatusBarHeight(res.statusBarHeight);
 			},
 			getDeviceInfo: function () {
 				const res = uni.getDeviceInfo();
 				// 获取像素比, 供截图对比使用
-				this.devicePixelRatio = res.devicePixelRatio !== null ? parseFloat(res.devicePixelRatio!) : 1
+				setDevicePixelRatio(res.devicePixelRatio !== null ? parseFloat(res.devicePixelRatio!) : 1);
 			}
 		}
 	}

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

@@ -148,7 +148,9 @@ describe("shot-compare", () => {
 	beforeAll(async () => {
 		page = await program.reLaunch(PAGE_PATH);
 		await page.waitFor(500);
-
+		await page.callMethod('getWindowInfo');
+		await page.callMethod('getDeviceInfo');
+		
 		// set webview-screenshot page baseSrc
 		baseSrc =
 			process.env.UNI_WEB_SERVICE_URL ? `${process.env.UNI_WEB_SERVICE_URL}/#/` :
@@ -172,7 +174,7 @@ describe("shot-compare", () => {
 		const {
 			headerHeight,
 			devicePixelRatio
-		} = await page.data();
+		} = await page.data();
 		const screenshotParams = {
 			fullPage: true,
 			adb: isNeedAdbScreenshot,

pages/webview-screenshot/webview-screenshot.uvue

@@ -5,7 +5,8 @@
   </web-view>
 </template>
 
-<script>
+<script>
+	import { state, setStatusBarHeight, setDevicePixelRatio } from '@/store/index.uts'
   export default {
     data() {
       return {
@@ -16,13 +17,11 @@
         webviewStyles: {
           progress: false
         },
-				headerHeight: 0,
-				devicePixelRatio: 1
+				headerHeight: state.statusBarHeight,
+				devicePixelRatio: state.devicePixelRatio
       }
     },
     onReady() {
-			this.getWindowInfo();
-			this.getDeviceInfo();
       this.webviewContext = uni.createWebviewContext('webview-screenshot', this)
     },
     methods: {
@@ -35,12 +34,12 @@
 			getWindowInfo() {
 				const res = uni.getWindowInfo();
 				// 获取状态栏, 供截图对比使用
-				this.headerHeight = res.statusBarHeight;
+				setStatusBarHeight(res.statusBarHeight);
 			},
 			getDeviceInfo: function () {
 				const res = uni.getDeviceInfo();
 				// 获取像素比, 供截图对比使用
-				this.devicePixelRatio = res.devicePixelRatio !== null ? parseFloat(res.devicePixelRatio!) : 1
+				setDevicePixelRatio(res.devicePixelRatio !== null ? parseFloat(res.devicePixelRatio!) : 1);
 			}
     }
   }

store/index.uts

@@ -2,13 +2,19 @@ export type State = {
   lifeCycleNum: number
   componentMsg: number,
   appLaunchPath: string
-  appShowPath: string
+  appShowPath: string,
+	// 状态栏高度
+	statusBarHeight : number,
+	// 设备像素比
+	devicePixelRatio : number
 }
 export const state = reactive({
   lifeCycleNum: 0,
   componentMsg: 0,
   appLaunchPath: '',
   appShowPath: '',
+	statusBarHeight: 0, 
+	devicePixelRatio: 1
 } as State)
 
 export const setLifeCycleNum = (num: number) => {
@@ -26,3 +32,12 @@ export const setAppLaunchPath = (path: string) => {
 export const setAppShowPath = (path: string) => {
   state.appShowPath = path
 }
+
+export const setStatusBarHeight = (height : number) => {
+  state.statusBarHeight = height
+}
+
+export const setDevicePixelRatio = (devicePixelRatio : number) => {
+  state.devicePixelRatio = devicePixelRatio
+}
+