一尘不染

WebdriverIO-拍摄整页截图

selenium

我正在尝试使用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,很可能不会修复。请参阅此链接以获取更多详细信息。


阅读 301

收藏
2020-06-26

共1个答案

一尘不染

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

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

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

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

  • !Note-002: wdio-screenshot支持3种类型的屏幕截图( 视口 (标准), 文档 (整页)和 元素 (针对元素))。

2020-06-26