From 637ac3b3ab1feb7a45e53e5edac38f8d5d5aabcb Mon Sep 17 00:00:00 2001 From: "zhouxiao.shaw" Date: Tue, 27 Aug 2024 15:32:27 +0800 Subject: [PATCH 1/2] fix(web): fix page screen zoom error --- .vscode/settings.json | 16 +--------------- packages/web-integration/playwright.config.ts | 1 + packages/web-integration/src/common/page.d.ts | 4 +++- packages/web-integration/src/common/tasks.ts | 9 +++++++-- packages/web-integration/src/common/utils.ts | 13 ++++++++++++- 5 files changed, 24 insertions(+), 19 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 755ea14c..ad62fffb 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,20 +3,6 @@ "source.organizeImports.biome": "explicit" }, "editor.defaultFormatter": "biomejs.biome", - "eslint.validate": [ - "javascript", - "javascriptreact", - "typescript", - "typescriptreact", - "vue", - "html" - ], - "eslint.nodePath": "node_modules", - "eslint.trace.server": "verbose", - "eslint.workingDirectories": [ - { - "mode": "auto" - } - ], + "editor.formatOnSave": true, "editor.formatOnSaveMode": "modifications" } diff --git a/packages/web-integration/playwright.config.ts b/packages/web-integration/playwright.config.ts index 7575e06a..6f660260 100644 --- a/packages/web-integration/playwright.config.ts +++ b/packages/web-integration/playwright.config.ts @@ -37,6 +37,7 @@ export default defineConfig({ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', + deviceScaleFactor: 2, // 设置设备缩放因子为2 }, /* Configure projects for major browsers */ diff --git a/packages/web-integration/src/common/page.d.ts b/packages/web-integration/src/common/page.d.ts index 72d1b0fa..e5ca3ab8 100644 --- a/packages/web-integration/src/common/page.d.ts +++ b/packages/web-integration/src/common/page.d.ts @@ -1,5 +1,7 @@ import type { Page as PlaywrightPage } from 'playwright'; import type { KeyInput, Page as PuppeteerPage } from 'puppeteer'; -export type WebPage = PlaywrightPage | PuppeteerPage; +export type WebPage = (PlaywrightPage | PuppeteerPage) & { + evaluate(pageFunction: PageFunction, arg?: Arg): Promise; +}; export type WebKeyInput = KeyInput; diff --git a/packages/web-integration/src/common/tasks.ts b/packages/web-integration/src/common/tasks.ts index 2d6dfc77..543f3da0 100644 --- a/packages/web-integration/src/common/tasks.ts +++ b/packages/web-integration/src/common/tasks.ts @@ -29,7 +29,11 @@ import { base64Encoded } from '@midscene/shared/img'; import type { KeyInput, Page as PuppeteerPage } from 'puppeteer'; import type { WebElementInfo } from '../web-element'; import { type AiTaskCache, TaskCache } from './task-cache'; -import { type WebUIContext, parseContextFromWebPage } from './utils'; +import { + type WebUIContext, + parseContextFromWebPage, + setPageWidthToBody, +} from './utils'; interface ExecutionResult { output: OutputType; @@ -52,7 +56,8 @@ export class PageTaskExecutor { } private async recordScreenshot(timing: ExecutionRecorderItem['timing']) { - const file = getTmpFile('jpeg'); + const file = getTmpFile('png'); + await setPageWidthToBody(this.page); await this.page.screenshot({ ...commonScreenshotParam, path: file, diff --git a/packages/web-integration/src/common/utils.ts b/packages/web-integration/src/common/utils.ts index 58aedfe4..81c65dbf 100644 --- a/packages/web-integration/src/common/utils.ts +++ b/packages/web-integration/src/common/utils.ts @@ -14,6 +14,15 @@ export type WebUIContext = UIContext & { url: string; }; +export async function setPageWidthToBody(page: WebPage) { + await page.evaluate(() => { + const bodyWidth = window?.getComputedStyle(document.body).width; + if (bodyWidth && document?.body) { + document.body.style.width = bodyWidth; + } + }); +} + export async function parseContextFromWebPage( page: WebPage, _opt?: PlaywrightParserOpt, @@ -22,6 +31,8 @@ export async function parseContextFromWebPage( const url = page.url(); const file = getTmpFile('jpeg'); + + await setPageWidthToBody(page); await page.screenshot({ path: file, type: 'jpeg', quality: 75 }); const screenshotBuffer = readFileSync(file); const screenshotBase64 = base64Encoded(file); @@ -51,7 +62,7 @@ export async function getElementInfosFromPage(page: WebPage) { const elementInfosScriptContent = readFileSync(scriptPath, 'utf-8'); const extraReturnLogic = `${elementInfosScriptContent}midscene_element_inspector.extractTextWithPosition()`; - const captureElementSnapshot = await (page as any).evaluate(extraReturnLogic); + const captureElementSnapshot = await page.evaluate(extraReturnLogic); return captureElementSnapshot as Array; } From ead031b43a27d6e8f36f30df2baf3eed70284e1f Mon Sep 17 00:00:00 2001 From: "zhouxiao.shaw" Date: Wed, 28 Aug 2024 14:34:20 +0800 Subject: [PATCH 2/2] chore: delete unless code --- packages/web-integration/playwright.config.ts | 2 +- packages/web-integration/src/common/tasks.ts | 7 +------ packages/web-integration/src/common/utils.ts | 10 ---------- 3 files changed, 2 insertions(+), 17 deletions(-) diff --git a/packages/web-integration/playwright.config.ts b/packages/web-integration/playwright.config.ts index 6f660260..e2b89e5a 100644 --- a/packages/web-integration/playwright.config.ts +++ b/packages/web-integration/playwright.config.ts @@ -37,7 +37,7 @@ export default defineConfig({ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', - deviceScaleFactor: 2, // 设置设备缩放因子为2 + deviceScaleFactor: process.platform === 'darwin' ? 2 : 1, // Device scaling factor }, /* Configure projects for major browsers */ diff --git a/packages/web-integration/src/common/tasks.ts b/packages/web-integration/src/common/tasks.ts index 543f3da0..f229bed3 100644 --- a/packages/web-integration/src/common/tasks.ts +++ b/packages/web-integration/src/common/tasks.ts @@ -29,11 +29,7 @@ import { base64Encoded } from '@midscene/shared/img'; import type { KeyInput, Page as PuppeteerPage } from 'puppeteer'; import type { WebElementInfo } from '../web-element'; import { type AiTaskCache, TaskCache } from './task-cache'; -import { - type WebUIContext, - parseContextFromWebPage, - setPageWidthToBody, -} from './utils'; +import { type WebUIContext, parseContextFromWebPage } from './utils'; interface ExecutionResult { output: OutputType; @@ -57,7 +53,6 @@ export class PageTaskExecutor { private async recordScreenshot(timing: ExecutionRecorderItem['timing']) { const file = getTmpFile('png'); - await setPageWidthToBody(this.page); await this.page.screenshot({ ...commonScreenshotParam, path: file, diff --git a/packages/web-integration/src/common/utils.ts b/packages/web-integration/src/common/utils.ts index 81c65dbf..9a005cfd 100644 --- a/packages/web-integration/src/common/utils.ts +++ b/packages/web-integration/src/common/utils.ts @@ -14,15 +14,6 @@ export type WebUIContext = UIContext & { url: string; }; -export async function setPageWidthToBody(page: WebPage) { - await page.evaluate(() => { - const bodyWidth = window?.getComputedStyle(document.body).width; - if (bodyWidth && document?.body) { - document.body.style.width = bodyWidth; - } - }); -} - export async function parseContextFromWebPage( page: WebPage, _opt?: PlaywrightParserOpt, @@ -32,7 +23,6 @@ export async function parseContextFromWebPage( const url = page.url(); const file = getTmpFile('jpeg'); - await setPageWidthToBody(page); await page.screenshot({ path: file, type: 'jpeg', quality: 75 }); const screenshotBuffer = readFileSync(file); const screenshotBase64 = base64Encoded(file);