selenium - WebdriverIO - 截取整页截图

Question

我正在尝试使用 WebdriverIO 截取整个页面的屏幕截图。

我读过最好的方法是使用 WebdriverCSS增强我的 WebdriverIO 流。 WebdriverCSS自动截图整个页面？？

问题是 WebdriverCSS 不适合我。我想是因为它还不兼容webdriverio@3.0.x .

有什么方法可以让它工作或我可以使用其他解决方案吗？

我的代码: (在回调中只产生未定义的值)

// Initialize WebdriverCSS for `client` instance
require('webdrivercss').init(driver, {
    // example options
    screenshotRoot: '../../screenshots',
    failedComparisonsRoot: '../../screenshots/diffs',
    misMatchTolerance: 0.05
});

// ...
// driver gets initialized and url opened
// ...

driver.webdrivercss('page', {
  name: 'body',
  elem: 'body'
}, function(err, res) {
  // here the values of err and res are always undefined
})
.saveScreenshot('../../screenshots/webdrivercsstest.png');
// the screenshot works, but it's not full page

!编辑:
这是 Chromium 中的一个已知 BUG，很可能不会修复。请看 this LINK更多细节。

Answer 1

这可能通过多种方式完成，但最直接的方式是通过 wdio-screenshot WebdriverIO 插件。

安装插件:npm install --save-dev wdio-screenshot

启用 wdio.conf.js 中的插件plugings 中的文件对象:plugins: { 'wdio-screenshot': {} }

在您的测试中，添加以下步骤(对于文档(整页截图):browser.saveDocumentScreenshot('<screenShotsPath>/screenshotName.png');

> 整页截图看起来像 this 用于 Instagram 提要尝试。 (出于明显的原因，将屏幕截图保留为内联)

!Note-001: 如果您不希望您的屏幕截图看起来像那样，那么我建议您使用一些 waitUntil以保证您的内容已成功加载和呈现。

!Note-002: wdio-screenshot支持 3 种类型的屏幕截图(视口(viewport)(标准)、文档(整页)和元素(以元素为目标))。