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 对象：plugins: { 'wdio-screenshot': {} }
3. 在您的测试中，添加以下步骤（对于文档（整页截图）：browser.saveDocumentScreenshot('<screenShotsPath>/screenshotName.png');

> 整页截图看起来像 this 用于 Instagram 供稿尝试。 （出于显而易见的原因将屏幕截图保留在行内）

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

• !Note-002: wdio-screenshot 支持 3 种类型的屏幕截图（viewport（标准）、文档（全页面）和元素（以元素为目标））。

Answer 2

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

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

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

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

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

5. 现在，对于任何失败的测试，allure 还会向您显示捕获的屏幕截图。 请看附上的示例截图

Answer 3

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

干杯！

Answer 4

您是否尝试过传递更高的 div id 并截屏

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

编辑：我也可以在做时看到整页屏幕截图

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

使用.scroll('#myElement') 滚动并再次截屏