chore: optimize code style

.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"
 }

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 */

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<R, Arg>(pageFunction: PageFunction<Arg, R>, arg?: Arg): Promise<R>;
+};
 export type WebKeyInput = KeyInput;

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<OutputType = any> {
   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,

packages/web-integration/src/common/utils.ts

@@ -14,6 +14,15 @@ export type WebUIContext = UIContext<WebElementInfo> & {
   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<ElementInfo>;
 }