Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 e9e01e31 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

test: 优化截图对比测试

上级 11c703bf
隐藏空白更改
内联 并排
Showing with 189 addition and 149 deletion
pages/API/get-device-info/get-device-info.uvue
浏览文件 @ e9e01e31
<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
浏览文件 @ e9e01e31
<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>
\ No newline at end of file
.uni-pd {
padding-left: 30rpx;
}
</style>
pages/webview-screenshot-comparison/webview-screenshot-comparison.test.js
浏览文件 @ e9e01e31
......@@ -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
浏览文件 @ e9e01e31
......@@ -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
浏览文件 @ e9e01e31
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
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或