Question

有没有办法在Linux中的无头Chrome中启用simulated device mode或emulated print media mode？

可以在DevTools中手动完成，如下所示：

目标是在模拟打印媒体模式下拍摄整页截图，而无需注入或修改任何CSS。我已经可以通过Node.js截取网页截图，但不能在模拟打印媒体模式下截取。我搜索过，但也找不到有用的CLI switch。

实施例：

如何通过CLI或Node.js以编程方式执行此操作？它甚至可能吗？

使用Node.js与无头Chrome DevTools协议进行交互的参考：https://developers.google.com/web/updates/2017/04/headless-chrome

-

更新：我已经研究了 Emulation 下的Chrome DevTools Protocol Viewer个文档，并且有Emulation.setEmulatedMedia的规定。设置 Emulation.setEmulatedMedia({media: "print"});以打印仿真模式呈现页面。

Answer 1

在 Emulation 下的最新（树顶）Chrome DevTools Protocol Viewer文档中，有一个关于模拟媒体的部分。这一行将启用打印媒体模拟：

Emulation.setEmulatedMedia({media: "print"});

此外，如果视口宽度设置为8.5英寸纸张的宽度（~816px @ 96 DPI），则屏幕截图将类似于彩色打印预览。

const viewportWidth = 816;    // 8.5 in
const viewportHeight = 1056;  // 11 in

const deviceMetrics = {
    width: viewportWidth,
    height: viewportHeight,
    deviceScaleFactor: 0,
    mobile: false,
    fitWindow: false
};
Emulation.setDeviceMetricsOverride(deviceMetrics);
Emulation.setVisibleSize({width: viewportWidth, height: viewportHeight});

Answer 2

对于任何想要这个的人，我想出了如何为Rspec +水豚+硒做这件事：

def enable_print_emulation
  bridge = Capybara.current_session.driver.browser.send(:bridge)
  path = "/session/#{bridge.session_id}/chromium/send_command"

  bridge.http.call(:post, path, cmd: 'Emulation.setEmulatedMedia',
                                params: {media: 'print'})
end

然后只需在您的规范中调用此方法即可！

Answer 3

弄清楚了如何在Django（python）中使用Selenium和Chromedriver。

    def set_media_emulation(self, media):
        """
            This is used to trigger between print mode and screen to allow
            @media (print) css styles to take effect
            call this in your testcase like self.set_media_emulation('print')
            or self.set_media_emulation('screen')
        :param media:
        :return:
        """
        self.selenium.command_executor._commands["send_command"] = ("POST", '/session/$sessionId/chromium/send_command')
        params = {'cmd': 'Emulation.setEmulatedMedia', 'params': {'media': media}}
        return self.selenium.execute("send_command", params)

self.selenium是

from selenium.webdriver import Chrome

self.selenium = Chrome(desired_capabilities=desired_capabilities,
                                           options=chrome_options,
                                           service_args=['--verbose'],
                                           service_log_path=self.selenium_log_path)

如何在无头Chrome中启用打印媒体模拟？

3 个答案: