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插件。

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

> 的完整屏幕截图类似于 this ，用于Instagram feed尝试。 （出于明显原因将屏幕截图留在行内）

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

• ！Note-002：：browser.saveDocumentScreenshot('<screenShotsPath>/screenshotName.png');支持3种类型的屏幕截图（视口（标准），文档（整页）和元素（针对元素））。

Answer 2

在WebdriverIO v6中，您可以使用Puppeteer截屏。 我已经在这里https://stackoverflow.com/a/64286853/2475987

回答了

干杯！

Answer 3

@mags：我看到您需要屏幕截图才能了解故障点。我想分享我用于屏幕截图的内容。

1. 像这样将魅力报告集成到wdio.conf文件中 reporterOptions: { allure: { outputDir: "allure-results" },

2. 使用npm install @wdio/allure-reporter --save-dev

安装魅力

3. 执行测试套件后，运行此命令以生成诱人的结果 allure generate ./allure-results --clean

4. 上述命令执行完成后，运行命令allure open。

5. 现在所有测试失败了，诱惑力还会显示捕获的屏幕截图。 请查看随附的示例屏幕截图

Answer 4

你试过传递一个更高的div id并拍摄那个

的截屏

browser
    .init()
    .url("https://search.yahoo.com")
    .webdrivercss('startpage',[
            {
                name: 'fullpage',
                elem: '#purple-syc'
            }

编辑：我在执行

时也能看到整页屏幕

.saveScreenshot('./webdrivercss.png');

使用.scroll('#myElement')滚动并再次拍摄屏幕