如何在无界面Chrome中启用打印媒体仿真？

Question

有没有办法在Linux中的无头Chrome中启用模拟设备模式或仿真打印媒体模式？

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

目标是在模拟打印媒体模式下获取完整页面截图，不注入或修改任何CSS。我已经能够通过Node.js对网页进行截图，但无法在模拟打印媒体模式下进行。我已经搜索过，但也找不到有用的CLI开关。

例如： 如何通过CLI或Node.js以编程方式实现这一点？这是否可能？

---

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

--

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

- Drakes

Answer 1

我使用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:
        """
        command_url = "/session/{session_id}/chromium/send_command".format(session_id=self.selenium.session_id)
        self.selenium.command_executor._commands["send_command"] = ("POST", command_url)
        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)

- haffmaestro

---

感谢您的回答。正如所述，在Django中确实起作用。 - Anoop Nair

@AnoopNair 不客气，不过我不确定为什么这个答案会被踩呢 :( - haffmaestro

可能是因为 OP 要求使用 Node.js 解决方案？ :-) - Anoop Nair

Answer 2

在最新的（tip-of-tree）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});

- Drakes

---

我知道这是一篇旧帖子，但我一直在尝试找出在哪里/如何执行此代码。我正在使用Capybara/Selenium，所以也许在我和Chrome实例之间有几层间接层，但仅将其作为Javascript执行并不起作用。不确定如何将这些命令实际发送到webdriver:/ - Ibrahim

哦，太好了，我已经为Rspec/capybara/selenium解决了这个问题：bridge = page.driver.browser.send(:bridge) path = '/session/:session_id/chromium/send_command' path[':session_id'] = bridge.session_id bridge.http.call(:post, path, cmd: 'Emulation.setEmulatedMedia', params: {media: 'print'}) - Ibrahim

Answer 3

对于任何正在寻找这个的人，我已经弄清楚了如何在Rspec+capybara+selenium中实现：

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

然后在你的规范(spec)中调用这个方法即可！

- Ibrahim