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

！EDIT：
这是Chromium中的一个已知BUG，很可能不会修复。请参阅此链接以获取更多详细信息。

Answer 1

这可能有很多种方法，但是最直接的方法是通过 wdio屏幕快照 WebdriverIO插件。

1. 安装插件： npm install --save-dev wdio-screenshot
2. wdio.conf.js在plugings对象的文件中启用插件：plugins: { 'wdio-screenshot': {} }
3. 在测试中，添加以下步骤（ 对于文档（全屏截图 ）：browser.saveDocumentScreenshot('<screenShotsPath>/screenshotName.png');

> 全页面截图看起来像 这样
一个Instagram的饲料尝试。（ 出于明显原因，将屏幕截图留在了内联中 ）

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

• ！Note-002： wdio-screenshot支持3种类型的屏幕截图（ 视口 （标准）， 文档 （整页）和 元素 （针对元素））。