有没有办法触发标准缩放（不是无头）

Question

我在关闭无头模式的情况下运行 puppeteer，以便在另一台计算机上自动化和远程控制可见的 Chromium 浏览器。

有没有办法像在 UI 菜单或ctrl +/crtl -命令中一样在浏览器上触发或模拟缩放？

注入 CSS 或使用各​​种记录的比例命令并不能完全复制这一点，例如，使用vh/vw单位定义的元素不会得到调整。

---

我目前的解决方案

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

调整视口大小并使用Emulation.setPageScaleFactor可以很好地放大，但是在我的测试中似乎忽略了小于 1 的 pageScaleFactor。

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

我的缩放代码现在是：

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'));
    });
}

有一个更好的方法吗？

Answer 1

我只是使用 Javascript 来帮助放大/缩小。

await page.evaluate(() => document.body.style.zoom = 0.5  );

这对我来说很有效。

Answer 2

命令--force-device-scale-factor行选项似乎适用于缩放整个 chrome UI，无论是放大还是缩小。

使用 puppeteer 将其传递给 chrome：

puppeteer.launch({
    args: ["--force-device-scale-factor=0.5"],
    headless: false,
})

（使用 chromium 78 / puppeteer 1.20.0 进行测试）

但是，如果您需要在不重新启动 chrome 的情况下进行缩放，或者不想缩放整个 UI，实际上有一种方法可以使用 puppeteer 触发本机 chrome 缩放。

我已经创建了一个存储库来证明这一点。它的工作原理是绕过 chrome 扩展，该扩展可以访问chrome.tabs.setZoom API。

chrome-extension/manifest.json:

puppeteer.launch({
    args: ["--force-device-scale-factor=0.5"],
    headless: false,
})

chrome-extension/background.js:

{
    "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": []
}

main.js:

function setZoom(tabId, zoomFactor) {
    chrome.tabs.setZoom(tabId, zoomFactor)
}

我还没有找到使用 puppeteer 获取页面的方法tabId，尽管这可能可以通过扩展再次实现。但如果您要缩放的页面是当前活动的页面，则上述操作即可。

请注意，加载 chrome 扩展目前无法在无头模式下工作，但幸运的是，这在您的情况下不是问题。