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种类型的屏幕截图（视口（标准），文档（整页）和元素（针对元素））。