puppeteer - 有没有办法触发标准缩放(不是 headless )

标签 puppeteer chrome-devtools-protocol

我正在关闭 headless 模式运行 puppeteer,以便自动化和远程控制另一台计算机上的可见 Chromium 浏览器。

有没有一种方法可以触发或模拟浏览器上的缩放,就像在 UI 菜单或 ctrl + 中一样?/crtl -命令?

注入(inject) CSS 或使用各​​种记录在案的缩放命令并不能完全复制这一点,例如,使用 vh 定义的元素/vw单位不会调整。

我目前的解决方案

Emulation.setDeviceMetricsOverride 中使用视口(viewport)比例缩小效果很好,但它似乎是在调整页面光栅的大小而不是在目标大小上渲染,导致放大时文本模糊。

调整视口(viewport)大小并使用 Emulation.setPageScaleFactor在放大时效果很好,但是在我的测试中似乎忽略了小于 1 的 pageScaleFactor。

这两种解决方案的一个问题是,它需要提前知道浏览器窗口的宽度/高度,并且依赖于不改变,而不是具有流畅的视口(viewport)。我也不确定我缺少标准浏览器缩放的其他哪些功能。

我的缩放代码现在是:


async applyFrameZoom(page, zoom) {
    // page is a puppeteer.Page instance
    // zoom is an integer percentage

    const session = await page.target().createCDPSession();

    let window = await session.send('Browser.getWindowForTarget', {
        targetId: page.target()._targetId
    });

    let width = window.bounds.width;
    let height = window.bounds.height;

    if (!zoom || zoom === 100) {
        // Unset any zoom
        await session.send('Emulation.clearDeviceMetricsOverride');
        await session.send('Emulation.resetPageScaleFactor');
    } else if (zoom > 100) {
        // Unset other zooming method
        await session.send('Emulation.clearDeviceMetricsOverride');

        // Zoom in by reducing size then adjusting page scale (unable to zoom out using this method)
        await page.setViewport({
            width: Math.round(width / (zoom / 100)),
            height: Math.round(height / (zoom / 100))
        });

        await session.send('Emulation.setPageScaleFactor', {
            pageScaleFactor: (zoom / 100)
        });

        await session.send('Emulation.setVisibleSize', {
            width: width,
            height: height
        });
    } else {
        // Unset other zooming method
        await session.send('Emulation.resetPageScaleFactor');

        // Zoom out by emulating a scaled device (makes text blurry when zooming in with this method)
        await session.send('Emulation.setDeviceMetricsOverride', {
            width: Math.round(width / (zoom / 100)),
            height: Math.round(height / (zoom / 100)),
            mobile: false,
            deviceScaleFactor: 1,
            dontSetVisibleSize: true,
            viewport: {
                x: 0,
                y: 0,
                width: width,
                height: height,
                scale: (zoom / 100)
            }
        });
    }

    await this.frame.waitForSelector('html');
    this.frame.evaluate(function () {
        window.dispatchEvent(new Event('resize'));
    });
}

有一个更好的方法吗?

最佳答案

--force-device-scale-factor命令行选项似乎适用于缩放完整的 chrome UI,无论是放大还是缩小。
使用 puppeteer 将其传递给 chrome:

puppeteer.launch({
    args: ["--force-device-scale-factor=0.5"],
    headless: false,
})
(用 Chrome 78/puppeteer 1.20.0 测试)

但是如果您需要在不重新启动 chrome 的情况下进行缩放或者不想缩放整个 UI,实际上有一种方法可以使用 puppeteer 触发原生 chrome 缩放。
我创建了一个存储库来证明 here .
它的工作原理是 绕过 chrome 扩展 ,它可以访问 chrome.tabs.setZoom API。chrome-extension/manifest.json :
{
    "name": "my-extension-name",
    "description": "A minimal chrome extension to help puppeteer with zooming",
    "version": "1.0",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "permissions": []
}

chrome-extension/background.js :
function setZoom(tabId, zoomFactor) {
    chrome.tabs.setZoom(tabId, zoomFactor)
}
main.js :
const puppeteer = require('puppeteer');

(async () => {
    const extensionPath = require('path').join(__dirname, 'chrome-extension');
    const extensionName = 'my-extension-name';

    const browser = await puppeteer.launch({
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`
        ],
        headless: false,
    });
    const page = await browser.newPage();
    await page.goto('https://google.com');
    
    // get the background page of the extension
    const targets = await browser.targets();
    const extenstionPageTarget = targets.find(
        (target) => target._targetInfo.title === extensionName
    );
    const extensionPage = await extenstionPageTarget.page();

    // do the zooming by invoking setZoom of background.js
    const zoomFactor = 0.5
    await extensionPage.evaluate((zoomFactor) => {
        // a tabId of undefined defaults to the currently active tab
        const tabId = undefined;
        setZoom(tabId, zoomFactor);
    }, zoomFactor);
})();
我还没有找到获取 tabId 的方法使用 puppeteer 的页面,尽管这可能通过扩展再次成为可能。
但是,如果您要缩放的页面是当前事件的页面,则上述操作会起作用。
请注意 loading chrome extensions does not currently work in headless mode ,但幸运的是,这在您的情况下不是问题。

关于puppeteer - 有没有办法触发标准缩放(不是 headless ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57802309/

相关文章:

javascript - 如何在不确定数组上使用 Promise all

javascript - Puppeteer - 如何更改文档中某些页面的方向?

javascript - 如何在 playwright 中运行自定义 js 函数

google-chrome - Chrome DevTools 协议(protocol) - 拦截和修改 websocket 请求

node.js - 使用 devtool 协议(protocol)从嵌入式 iframe 捕获请求(XHR、JS、CSS)

puppeteer - Target.sendMessageToTarget 已弃用 – 现在如何使用 devtools 协议(protocol)的扁平化样式?

javascript - Puppeteer 中的重复请求 ID

javascript - 在 puppeteer 的 headless true 模式下找不到选择器的 Node

javascript - 如何使用 puppeteer 的 x/y 坐标单击元素?

node.js - 如何通过 'chrome devtool protocol '获取DOM树