From ebffe13161bdd504d697a3a99da06900baaee677 Mon Sep 17 00:00:00 2001 From: yutao Date: Mon, 20 Jan 2025 16:53:58 +0800 Subject: [PATCH] feat: use jpeg as default image format --- packages/midscene/src/utils.ts | 16 +++++++--- packages/shared/src/img/box-select.ts | 3 +- packages/shared/src/img/draw-box.ts | 3 +- packages/shared/src/img/transform.ts | 5 ++-- packages/visualizer/scripts/build-html.ts | 29 +++++++++++++------ .../src/component/playground-component.tsx | 6 +++- .../src/puppeteer/base-page.ts | 15 +++------- 7 files changed, 48 insertions(+), 29 deletions(-) diff --git a/packages/midscene/src/utils.ts b/packages/midscene/src/utils.ts index ca3f37457..6424302e4 100644 --- a/packages/midscene/src/utils.ts +++ b/packages/midscene/src/utils.ts @@ -40,10 +40,10 @@ function getReportTpl() { if (!reportTpl && (window as any).get_midscene_report_tpl) { reportTpl = (window as any).get_midscene_report_tpl(); } - assert( - reportTpl, - 'reportTpl should be set before writing report in browser', - ); + // assert( + // reportTpl, + // 'reportTpl should be set before writing report in browser', + // ); return reportTpl; } @@ -70,6 +70,10 @@ export function reportHTMLContent( dumpData: string | ReportDumpWithAttributes[], ): string { const tpl = getReportTpl(); + if (!tpl) { + console.warn('reportTpl is not set, will not write report'); + return ''; + } let reportContent: string; if ( (Array.isArray(dumpData) && dumpData.length === 0) || @@ -121,6 +125,10 @@ export function writeDumpReport( const reportPath = join(getLogDirByType('report'), `${fileName}.html`); const reportContent = reportHTMLContent(dumpData); + if (!reportContent) { + console.warn('reportContent is empty, will not write report'); + return null; + } writeFileSync(reportPath, reportContent); return reportPath; diff --git a/packages/shared/src/img/box-select.ts b/packages/shared/src/img/box-select.ts index fd9a4bf91..3421ff94d 100644 --- a/packages/shared/src/img/box-select.ts +++ b/packages/shared/src/img/box-select.ts @@ -238,7 +238,8 @@ export const compositeElementInfoImg = async (options: { return compositeImage; }) .then(async (compositeImage: Jimp) => { - const base64 = await compositeImage.getBase64Async(Jimp.MIME_PNG); + compositeImage.quality(75); + const base64 = await compositeImage.getBase64Async(Jimp.MIME_JPEG); return base64; }) .catch((error: unknown) => { diff --git a/packages/shared/src/img/draw-box.ts b/packages/shared/src/img/draw-box.ts index 9b285b9b2..34b62e033 100644 --- a/packages/shared/src/img/draw-box.ts +++ b/packages/shared/src/img/draw-box.ts @@ -41,7 +41,8 @@ export async function drawBoxOnImage(options: { ); // Convert back to base64 - const resultBase64 = await image.getBase64Async(Jimp.MIME_PNG); + image.quality(75); + const resultBase64 = await image.getBase64Async(Jimp.MIME_JPEG); return resultBase64; } diff --git a/packages/shared/src/img/transform.ts b/packages/shared/src/img/transform.ts index 43aef5f5d..926be7351 100644 --- a/packages/shared/src/img/transform.ts +++ b/packages/shared/src/img/transform.ts @@ -36,7 +36,7 @@ export async function transformImgPathToBase64(inputPath: string) { // Use Jimp to process images and generate base64 data const Jimp = await getJimp(); const image = await Jimp.read(inputPath); - const buffer = await image.getBufferAsync(Jimp.MIME_PNG); + const buffer = await image.getBufferAsync(Jimp.MIME_JPEG); return buffer.toString('base64'); } @@ -72,7 +72,8 @@ export async function resizeImg( finalNewSize.height, Jimp.RESIZE_NEAREST_NEIGHBOR, ); - const resizedBuffer = await image.getBufferAsync(Jimp.MIME_PNG); + image.quality(75); + const resizedBuffer = await image.getBufferAsync(Jimp.MIME_JPEG); return resizedBuffer; } diff --git a/packages/visualizer/scripts/build-html.ts b/packages/visualizer/scripts/build-html.ts index 986f62d99..3a139117d 100644 --- a/packages/visualizer/scripts/build-html.ts +++ b/packages/visualizer/scripts/build-html.ts @@ -62,27 +62,31 @@ function emptyDumpReportHTML() { const tplRetrieverFn = `window.get_midscene_report_tpl = () => { const tpl = document.getElementById('midscene_report_tpl').innerText; + if (!tpl) { + return ''; + } const tplDecoded = decodeURIComponent(tpl); return tplDecoded; };`; function putReportTplIntoHTML(html: string, outsourceMode = false) { assert(html.indexOf('') !== -1, 'HTML must contain '); - const tplWrapper = ``; - if (outsourceMode) { + const tplWrapper = ``; // in Chrome extension return html.replace( '', `${tplWrapper}\n`, ); } - return html.replace( - '', - `${tplWrapper}\n`, - ); + + return html; + // return html.replace( + // '', + // `${tplWrapper}\n`, + // ); } function reportHTMLWithDump( @@ -95,8 +99,15 @@ function reportHTMLWithDump( dumpContent = ``; } + const emptyDumpHTML = emptyDumpReportHTML(); + assert( + emptyDumpHTML.length < + (process.env.CI ? 10 * 1000 * 1000 : 20 * 1000 * 1000), + `emptyDumpHTML is too large, length: ${emptyDumpHTML.length}`, + ); + const reportHTML = replaceStringWithFirstAppearance( - emptyDumpReportHTML(), + emptyDumpHTML, '{{dump}}', dumpContent || '{{dump}}', ); diff --git a/packages/visualizer/src/component/playground-component.tsx b/packages/visualizer/src/component/playground-component.tsx index 7128f3271..295ee9ce7 100644 --- a/packages/visualizer/src/component/playground-component.tsx +++ b/packages/visualizer/src/component/playground-component.tsx @@ -438,7 +438,11 @@ export function Playground({ replayScripts={replayScriptsInfo.scripts} imageWidth={replayScriptsInfo.width} imageHeight={replayScriptsInfo.height} - reportFileContent={result?.reportHTML} + reportFileContent={ + serviceMode === 'In-Browser-Extension' && result?.reportHTML + ? result?.reportHTML + : null + } /> ); } else if (result?.result) { diff --git a/packages/web-integration/src/puppeteer/base-page.ts b/packages/web-integration/src/puppeteer/base-page.ts index 27b7b9b53..37c51eded 100644 --- a/packages/web-integration/src/puppeteer/base-page.ts +++ b/packages/web-integration/src/puppeteer/base-page.ts @@ -55,20 +55,13 @@ export class Page< async screenshotBase64(): Promise { // get viewport size from underlyingPage // const viewportSize = await this.size(); - const path = getTmpFile('png')!; - + const imgType = 'jpeg'; + const path = getTmpFile(imgType)!; await this.underlyingPage.screenshot({ path, - type: 'png', + type: imgType, + quality: 75, }); - // let buf: Buffer; - // if (viewportSize.dpr && viewportSize.dpr > 1) { - // buf = await resizeImg(readFileSync(path), { - // width: viewportSize.width, - // height: viewportSize.height, - // }); - // writeFileSync(path, buf); - // } return base64Encoded(path, true); }