@donggui/web 1.5.5-donggui.3

package/dist/es/puppeteer/base-page.mjs

@@ -0,0 +1,564 @@
+import { sleep } from "@midscene/core/utils";
+import { DEFAULT_WAIT_FOR_NAVIGATION_TIMEOUT, DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY, DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT } from "@midscene/shared/constants";
+import { treeToList } from "@midscene/shared/extractor";
+import { createImgBase64ByFormat } from "@midscene/shared/img";
+import { getDebug } from "@midscene/shared/logger";
+import { getElementInfosScriptContent, getExtraReturnLogic } from "@midscene/shared/node";
+import { assert } from "@midscene/shared/utils";
+import { buildRectFromElementInfo, judgeOrderSensitive, sanitizeXpaths } from "../common/cache-helper.mjs";
+import { commonWebActionsForWebPage } from "../web-page.mjs";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+const debugPage = getDebug('web:page');
+class Page {
+    actionSpace() {
+        const defaultActions = commonWebActionsForWebPage(this, this.enableTouchEventsInActionSpace);
+        const customActions = this.customActions || [];
+        return [
+            ...defaultActions,
+            ...customActions
+        ];
+    }
+    async evaluate(pageFunction, arg) {
+        let result;
+        debugPage('evaluate function begin');
+        this.interfaceType, result = await this.underlyingPage.evaluate(pageFunction, arg);
+        debugPage('evaluate function end');
+        return result;
+    }
+    async evaluateJavaScript(script) {
+        return this.evaluate(script);
+    }
+    async waitForNavigation(moment, actionName) {
+        if (0 === this.waitForNavigationTimeout) return void debugPage('waitForNavigation timeout is 0, skip waiting');
+        if ('puppeteer' === this.interfaceType || 'playwright' === this.interfaceType) {
+            debugPage(`waitForNavigation begin at moment ${moment} with timeout: ${this.waitForNavigationTimeout} and actionName: ${actionName}`);
+            try {
+                await this.underlyingPage.waitForSelector('html', {
+                    timeout: this.waitForNavigationTimeout
+                });
+            } catch (error) {
+                console.warn('[midscene:warning] Waiting for the "navigation" has timed out, but Midscene will continue execution. Please check https://midscenejs.com/faq.html#customize-the-network-timeout for more information on customizing the network timeout');
+            }
+            debugPage('waitForNavigation end');
+        }
+    }
+    async waitForNetworkIdle(moment, actionName) {
+        if ('puppeteer' === this.interfaceType) {
+            if (0 === this.waitForNetworkIdleTimeout) return void debugPage('waitForNetworkIdle timeout is 0, skip waiting');
+            debugPage(`waitForNetworkIdle begin at moment ${moment} with timeout: ${this.waitForNetworkIdleTimeout} and concurrency: ${DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY} and actionName: ${actionName}`);
+            try {
+                await this.underlyingPage.waitForNetworkIdle({
+                    idleTime: 200,
+                    concurrency: DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY,
+                    timeout: this.waitForNetworkIdleTimeout
+                });
+            } catch (error) {
+                console.warn('[midscene:warning] Waiting for the "network idle" has timed out, but Midscene will continue execution. Please check https://midscenejs.com/faq.html#customize-the-network-timeout for more information on customizing the network timeout');
+            }
+            debugPage('waitForNetworkIdle end');
+        }
+    }
+    async getElementsInfo() {
+        await this.waitForNavigation('getElementsInfo');
+        debugPage('getElementsInfo begin');
+        const tree = await this.getElementsNodeTree();
+        debugPage('getElementsInfo end');
+        return treeToList(tree);
+    }
+    async getXpathsByPoint(point, isOrderSensitive) {
+        const elementInfosScriptContent = getElementInfosScriptContent();
+        return this.evaluateJavaScript(`${elementInfosScriptContent}midscene_element_inspector.getXpathsByPoint({left: ${point.left}, top: ${point.top}}, ${isOrderSensitive})`);
+    }
+    async getElementInfoByXpath(xpath) {
+        const elementInfosScriptContent = getElementInfosScriptContent();
+        return this.evaluateJavaScript(`${elementInfosScriptContent}midscene_element_inspector.getElementInfoByXpath(${JSON.stringify(xpath)})`);
+    }
+    async cacheFeatureForPoint(center, options) {
+        const point = {
+            left: center[0],
+            top: center[1]
+        };
+        try {
+            const isOrderSensitive = await judgeOrderSensitive(options, debugPage);
+            const xpaths = await this.getXpathsByPoint(point, isOrderSensitive);
+            const sanitized = sanitizeXpaths(xpaths);
+            if (!sanitized.length) debugPage('cacheFeatureForPoint: no xpath found at point %o', center);
+            return {
+                xpaths: sanitized
+            };
+        } catch (error) {
+            debugPage('cacheFeatureForPoint failed: %s', error);
+            return {
+                xpaths: []
+            };
+        }
+    }
+    async rectMatchesCacheFeature(feature) {
+        const xpaths = sanitizeXpaths(feature.xpaths);
+        debugPage('rectMatchesCacheFeature: trying %d xpath(s)', xpaths.length);
+        for (const xpath of xpaths)try {
+            debugPage('rectMatchesCacheFeature: evaluating xpath: %s', xpath);
+            const elementInfo = await this.getElementInfoByXpath(xpath);
+            if (elementInfo?.rect) {
+                debugPage('rectMatchesCacheFeature: found element, rect: %o', elementInfo.rect);
+                return buildRectFromElementInfo(elementInfo);
+            }
+            debugPage('rectMatchesCacheFeature: element found but no rect (elementInfo: %o)', elementInfo);
+        } catch (error) {
+            debugPage('rectMatchesCacheFeature failed for xpath %s: %s', xpath, error);
+        }
+        throw new Error(`No matching element rect found for the provided cache feature (tried ${xpaths.length} xpath(s): ${xpaths.join(', ')})`);
+    }
+    async getElementsNodeTree() {
+        await this.waitForNavigation('getElementsNodeTree');
+        const scripts = await getExtraReturnLogic(true);
+        assert(scripts, "scripts should be set before writing report in browser");
+        const startTime = Date.now();
+        const captureElementSnapshot = await this.evaluate(scripts);
+        const endTime = Date.now();
+        debugPage(`getElementsNodeTree end, cost: ${endTime - startTime}ms`);
+        return captureElementSnapshot;
+    }
+    async size() {
+        if (this.viewportSize) return this.viewportSize;
+        const sizeInfo = await this.evaluate(()=>({
+                width: window.innerWidth,
+                height: window.innerHeight
+            }));
+        this.viewportSize = sizeInfo;
+        return sizeInfo;
+    }
+    async screenshotBase64() {
+        const imgType = 'jpeg';
+        const quality = 90;
+        const startTime = Date.now();
+        debugPage('screenshotBase64 begin');
+        let base64;
+        if ('puppeteer' === this.interfaceType) {
+            const result = await this.underlyingPage.screenshot({
+                type: imgType,
+                quality,
+                encoding: 'base64'
+            });
+            base64 = createImgBase64ByFormat(imgType, result);
+        } else if ('playwright' === this.interfaceType) {
+            const buffer = await this.underlyingPage.screenshot({
+                type: imgType,
+                quality,
+                timeout: 10000
+            });
+            base64 = createImgBase64ByFormat(imgType, buffer.toString('base64'));
+        } else throw new Error('Unsupported page type for screenshot');
+        const endTime = Date.now();
+        debugPage(`screenshotBase64 end, cost: ${endTime - startTime}ms`);
+        return base64;
+    }
+    async url() {
+        return this.underlyingPage.url();
+    }
+    describe() {
+        const url = this.underlyingPage.url();
+        return url || '';
+    }
+    get mouse() {
+        return {
+            click: async (x, y, options)=>{
+                await this.mouse.move(x, y);
+                const { button = 'left', count = 1 } = options || {};
+                debugPage(`mouse click ${x}, ${y}, ${button}, ${count}`);
+                if (2 === count && 'playwright' === this.interfaceType) await this.underlyingPage.mouse.dblclick(x, y, {
+                    button
+                });
+                else if ('puppeteer' === this.interfaceType) {
+                    const page = this.underlyingPage;
+                    if ('left' === button && 1 === count) await page.mouse.click(x, y);
+                    else await page.mouse.click(x, y, {
+                        button,
+                        count
+                    });
+                } else if ('playwright' === this.interfaceType) await this.underlyingPage.mouse.click(x, y, {
+                    button,
+                    clickCount: count
+                });
+            },
+            wheel: async (deltaX, deltaY)=>{
+                debugPage(`mouse wheel ${deltaX}, ${deltaY}`);
+                if ('puppeteer' === this.interfaceType) await this.underlyingPage.mouse.wheel({
+                    deltaX,
+                    deltaY
+                });
+                else if ('playwright' === this.interfaceType) await this.underlyingPage.mouse.wheel(deltaX, deltaY);
+            },
+            move: async (x, y)=>{
+                this.everMoved = true;
+                debugPage(`mouse move to ${x}, ${y}`);
+                return this.underlyingPage.mouse.move(x, y);
+            },
+            drag: async (from, to)=>{
+                debugPage(`begin mouse drag from ${from.x}, ${from.y} to ${to.x}, ${to.y}`);
+                await this.underlyingPage.mouse.move(from.x, from.y);
+                await sleep(200);
+                await this.underlyingPage.mouse.down();
+                await sleep(300);
+                await this.underlyingPage.mouse.move(to.x, to.y, {
+                    steps: 20
+                });
+                await sleep(500);
+                await this.underlyingPage.mouse.up();
+                await sleep(200);
+                debugPage(`end mouse drag from ${from.x}, ${from.y} to ${to.x}, ${to.y}`);
+            }
+        };
+    }
+    get keyboard() {
+        return {
+            type: async (text)=>{
+                debugPage(`keyboard type ${text}`);
+                return this.underlyingPage.keyboard.type(text, {
+                    delay: 80
+                });
+            },
+            press: async (action)=>{
+                const keys = Array.isArray(action) ? action : [
+                    action
+                ];
+                debugPage('keyboard press', keys);
+                for (const k of keys){
+                    const commands = k.command ? [
+                        k.command
+                    ] : [];
+                    await this.underlyingPage.keyboard.down(k.key, {
+                        commands
+                    });
+                }
+                for (const k of [
+                    ...keys
+                ].reverse())await this.underlyingPage.keyboard.up(k.key);
+            },
+            down: async (key)=>{
+                debugPage(`keyboard down ${key}`);
+                return this.underlyingPage.keyboard.down(key);
+            },
+            up: async (key)=>{
+                debugPage(`keyboard up ${key}`);
+                return this.underlyingPage.keyboard.up(key);
+            }
+        };
+    }
+    async clearInput(element) {
+        const backspace = async ()=>{
+            await sleep(100);
+            await this.keyboard.press([
+                {
+                    key: 'Backspace'
+                }
+            ]);
+        };
+        const isMac = 'darwin' === process.platform;
+        debugPage('clearInput begin');
+        if (isMac) {
+            if ('puppeteer' === this.interfaceType) {
+                element && await this.mouse.click(element.center[0], element.center[1], {
+                    count: 3
+                });
+                await backspace();
+            }
+            element && await this.mouse.click(element.center[0], element.center[1]);
+            await this.underlyingPage.keyboard.down('Meta');
+            await this.underlyingPage.keyboard.press('a');
+            await this.underlyingPage.keyboard.up('Meta');
+            await backspace();
+        } else {
+            element && await this.mouse.click(element.center[0], element.center[1]);
+            await this.underlyingPage.keyboard.down('Control');
+            await this.underlyingPage.keyboard.press('a');
+            await this.underlyingPage.keyboard.up('Control');
+            await backspace();
+        }
+        debugPage('clearInput end');
+    }
+    async moveToPointBeforeScroll(point) {
+        if (point) await this.mouse.move(point.left, point.top);
+        else if (!this.everMoved) {
+            const size = await this.size();
+            const targetX = Math.floor(size.width / 2);
+            const targetY = Math.floor(size.height / 2);
+            await this.mouse.move(targetX, targetY);
+        }
+    }
+    async scrollUntilTop(startingPoint) {
+        await this.moveToPointBeforeScroll(startingPoint);
+        return this.mouse.wheel(0, -9999999);
+    }
+    async scrollUntilBottom(startingPoint) {
+        await this.moveToPointBeforeScroll(startingPoint);
+        return this.mouse.wheel(0, 9999999);
+    }
+    async scrollUntilLeft(startingPoint) {
+        await this.moveToPointBeforeScroll(startingPoint);
+        return this.mouse.wheel(-9999999, 0);
+    }
+    async scrollUntilRight(startingPoint) {
+        await this.moveToPointBeforeScroll(startingPoint);
+        return this.mouse.wheel(9999999, 0);
+    }
+    async scrollUp(distance, startingPoint) {
+        const innerHeight = await this.evaluate(()=>window.innerHeight);
+        const scrollDistance = distance || 0.7 * innerHeight;
+        await this.moveToPointBeforeScroll(startingPoint);
+        return this.mouse.wheel(0, -scrollDistance);
+    }
+    async scrollDown(distance, startingPoint) {
+        const innerHeight = await this.evaluate(()=>window.innerHeight);
+        const scrollDistance = distance || 0.7 * innerHeight;
+        await this.moveToPointBeforeScroll(startingPoint);
+        return this.mouse.wheel(0, scrollDistance);
+    }
+    async scrollLeft(distance, startingPoint) {
+        const innerWidth = await this.evaluate(()=>window.innerWidth);
+        const scrollDistance = distance || 0.7 * innerWidth;
+        await this.moveToPointBeforeScroll(startingPoint);
+        return this.mouse.wheel(-scrollDistance, 0);
+    }
+    async scrollRight(distance, startingPoint) {
+        const innerWidth = await this.evaluate(()=>window.innerWidth);
+        const scrollDistance = distance || 0.7 * innerWidth;
+        await this.moveToPointBeforeScroll(startingPoint);
+        return this.mouse.wheel(scrollDistance, 0);
+    }
+    async navigate(url) {
+        debugPage(`navigate to ${url}`);
+        if ('puppeteer' === this.interfaceType) await this.underlyingPage.goto(url);
+        else if ('playwright' === this.interfaceType) await this.underlyingPage.goto(url);
+        else throw new Error('Unsupported page type for navigate');
+    }
+    async reload() {
+        debugPage('reload page');
+        if ('puppeteer' === this.interfaceType) await this.underlyingPage.reload();
+        else if ('playwright' === this.interfaceType) await this.underlyingPage.reload();
+        else throw new Error('Unsupported page type for reload');
+    }
+    async goBack() {
+        debugPage('go back');
+        if ('puppeteer' === this.interfaceType) await this.underlyingPage.goBack();
+        else if ('playwright' === this.interfaceType) await this.underlyingPage.goBack();
+        else throw new Error('Unsupported page type for go back');
+    }
+    async beforeInvokeAction(name, param) {
+        if (this.onBeforeInvokeAction) await this.onBeforeInvokeAction(name, param);
+    }
+    async afterInvokeAction(name, param) {
+        await Promise.all([
+            this.waitForNavigation('afterInvokeAction', name),
+            this.waitForNetworkIdle('afterInvokeAction', name)
+        ]);
+        if (this.onAfterInvokeAction) await this.onAfterInvokeAction(name, param);
+    }
+    async destroy() {}
+    async swipe(from, to, duration) {
+        const LONG_PRESS_THRESHOLD = 500;
+        const MIN_PRESS_THRESHOLD = 150;
+        duration = duration || 100;
+        if (duration < MIN_PRESS_THRESHOLD) duration = MIN_PRESS_THRESHOLD;
+        if (duration > LONG_PRESS_THRESHOLD) duration = LONG_PRESS_THRESHOLD;
+        debugPage(`mouse swipe from ${from.x}, ${from.y} to ${to.x}, ${to.y} with duration ${duration}ms`);
+        if ('puppeteer' === this.interfaceType) {
+            const page = this.underlyingPage;
+            await page.mouse.move(from.x, from.y);
+            await page.mouse.down({
+                button: 'left'
+            });
+            const steps = 30;
+            const delay = duration / steps;
+            for(let i = 1; i <= steps; i++){
+                const x = from.x + (to.x - from.x) * (i / steps);
+                const y = from.y + (to.y - from.y) * (i / steps);
+                await page.mouse.move(x, y);
+                await new Promise((resolve)=>setTimeout(resolve, delay));
+            }
+            await page.mouse.up({
+                button: 'left'
+            });
+        } else if ('playwright' === this.interfaceType) {
+            const page = this.underlyingPage;
+            await page.mouse.move(from.x, from.y);
+            await page.mouse.down();
+            const steps = 30;
+            const delay = duration / steps;
+            for(let i = 1; i <= steps; i++){
+                const x = from.x + (to.x - from.x) * (i / steps);
+                const y = from.y + (to.y - from.y) * (i / steps);
+                await page.mouse.move(x, y);
+                await page.waitForTimeout(delay);
+            }
+            await page.mouse.up({
+                button: 'left'
+            });
+        }
+    }
+    async longPress(x, y, duration) {
+        duration = duration || 500;
+        const LONG_PRESS_THRESHOLD = 600;
+        const MIN_PRESS_THRESHOLD = 300;
+        if (duration > LONG_PRESS_THRESHOLD) duration = LONG_PRESS_THRESHOLD;
+        if (duration < MIN_PRESS_THRESHOLD) duration = MIN_PRESS_THRESHOLD;
+        debugPage(`mouse longPress at ${x}, ${y} for ${duration}ms`);
+        if ('puppeteer' === this.interfaceType) {
+            const page = this.underlyingPage;
+            await page.mouse.move(x, y);
+            await page.mouse.down({
+                button: 'left'
+            });
+            await new Promise((res)=>setTimeout(res, duration));
+            await page.mouse.up({
+                button: 'left'
+            });
+        } else if ('playwright' === this.interfaceType) {
+            const page = this.underlyingPage;
+            await page.mouse.move(x, y);
+            await page.mouse.down({
+                button: 'left'
+            });
+            await page.waitForTimeout(duration);
+            await page.mouse.up({
+                button: 'left'
+            });
+        }
+    }
+    async ensurePuppeteerFileChooserSession(page) {
+        if (this.puppeteerFileChooserSession) return this.puppeteerFileChooserSession;
+        const session = await page.target().createCDPSession();
+        await session.send('Page.enable');
+        await session.send('DOM.enable');
+        await session.send('Page.setInterceptFileChooserDialog', {
+            enabled: true
+        });
+        this.puppeteerFileChooserSession = session;
+        return session;
+    }
+    async registerFileChooserListener(handler) {
+        if ('puppeteer' !== this.interfaceType) throw new Error('registerFileChooserListener is only supported in Puppeteer');
+        const page = this.underlyingPage;
+        const session = await this.ensurePuppeteerFileChooserSession(page);
+        if (this.puppeteerFileChooserHandler) session.off('Page.fileChooserOpened', this.puppeteerFileChooserHandler);
+        let capturedError;
+        this.puppeteerFileChooserHandler = async (event)=>{
+            if (void 0 === event.backendNodeId) return void debugPage('puppeteer file chooser opened without backendNodeId, skip');
+            try {
+                await handler({
+                    accept: async (files)=>{
+                        const { node } = await session.send('DOM.describeNode', {
+                            backendNodeId: event.backendNodeId
+                        });
+                        const hasWebkitDirectory = node.attributes?.includes('webkitdirectory') || node.attributes?.includes('directory');
+                        if (hasWebkitDirectory) throw new Error('Directory upload (webkitdirectory) is not supported in Puppeteer. Please use Playwright instead, which supports directory upload since version 1.45.');
+                        if (files.length > 1) {
+                            const hasMultiple = node.attributes?.includes('multiple');
+                            if (!hasMultiple) throw new Error('Non-multiple file input can only accept single file');
+                        }
+                        await session.send('DOM.setFileInputFiles', {
+                            files,
+                            backendNodeId: event.backendNodeId
+                        });
+                    }
+                });
+            } catch (error) {
+                capturedError = error;
+            }
+        };
+        session.on('Page.fileChooserOpened', this.puppeteerFileChooserHandler);
+        return {
+            dispose: ()=>{
+                if (this.puppeteerFileChooserHandler) session.off('Page.fileChooserOpened', this.puppeteerFileChooserHandler);
+                session.detach();
+                this.puppeteerFileChooserHandler = void 0;
+                if (this.puppeteerFileChooserSession === session) this.puppeteerFileChooserSession = void 0;
+            },
+            getError: ()=>capturedError
+        };
+    }
+    constructor(underlyingPage, interfaceType, opts){
+        _define_property(this, "underlyingPage", void 0);
+        _define_property(this, "waitForNavigationTimeout", void 0);
+        _define_property(this, "waitForNetworkIdleTimeout", void 0);
+        _define_property(this, "viewportSize", void 0);
+        _define_property(this, "onBeforeInvokeAction", void 0);
+        _define_property(this, "onAfterInvokeAction", void 0);
+        _define_property(this, "customActions", void 0);
+        _define_property(this, "enableTouchEventsInActionSpace", void 0);
+        _define_property(this, "puppeteerFileChooserSession", void 0);
+        _define_property(this, "puppeteerFileChooserHandler", void 0);
+        _define_property(this, "interfaceType", void 0);
+        _define_property(this, "everMoved", false);
+        this.underlyingPage = underlyingPage;
+        this.interfaceType = interfaceType;
+        this.waitForNavigationTimeout = opts?.waitForNavigationTimeout ?? DEFAULT_WAIT_FOR_NAVIGATION_TIMEOUT;
+        this.waitForNetworkIdleTimeout = opts?.waitForNetworkIdleTimeout ?? DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT;
+        this.onBeforeInvokeAction = opts?.beforeInvokeAction;
+        this.onAfterInvokeAction = opts?.afterInvokeAction;
+        this.customActions = opts?.customActions;
+        this.enableTouchEventsInActionSpace = opts?.enableTouchEventsInActionSpace ?? false;
+    }
+}
+function forceClosePopup(page, debugProfile) {
+    page.on('popup', async (popup)=>{
+        if (!popup) return void console.warn('got a popup event, but the popup is not ready yet, skip');
+        const url = await popup.url();
+        console.log(`Popup opened: ${url}`);
+        if (popup.isClosed()) debugProfile(`popup is already closed, skip close ${url}`);
+        else try {
+            await popup.close();
+        } catch (error) {
+            debugProfile(`failed to close popup ${url}, error: ${error}`);
+        }
+        if (page.isClosed()) debugProfile(`page is already closed, skip goto ${url}`);
+        else try {
+            await page.goto(url);
+        } catch (error) {
+            debugProfile(`failed to goto ${url}, error: ${error}`);
+        }
+    });
+}
+function forceChromeSelectRendering(page) {
+    const styleContent = `
+/* Add by Midscene because of forceChromeSelectRendering is enabled*/
+select {
+  &, &::picker(select) {
+    appearance: base-select !important;
+  }
+}`;
+    const styleId = 'midscene-force-select-rendering';
+    const injectStyle = async ()=>{
+        try {
+            await page.evaluate(({ id, content })=>{
+                if (document.getElementById(id)) return;
+                const style = document.createElement('style');
+                style.id = id;
+                style.textContent = content;
+                document.head.appendChild(style);
+            }, {
+                id: styleId,
+                content: styleContent
+            });
+            debugPage('Midscene - Added base-select appearance style for select elements because of forceChromeSelectRendering is enabled');
+        } catch (err) {
+            console.log('Midscene - Failed to add base-select appearance style:', err);
+        }
+    };
+    injectStyle();
+    page.on('load', ()=>{
+        injectStyle();
+    });
+}
+export { Page, debugPage, forceChromeSelectRendering, forceClosePopup };
+
+//# sourceMappingURL=base-page.mjs.map