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

您是否尝试过传递更高的 div ID 并对其进行屏幕截图

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

编辑：我也能看到整页截图

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

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

Answer 2

这可能可以通过多种方式完成，但最直接的方式是通过 wdio-screenshot WebdriverIO 插件。

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

> 整页屏幕截图看起来像 this 用于 Instagram 提要尝试。（出于显而易见的原因将屏幕截图内联）

!Note-001: 如果你不希望你的屏幕截图看起来像那样，那么我建议你使用一些 waitUntil 以保证您的内容已 成功加载和呈现。
!Note-002: wdio-screenshot支持3种截屏方式（viewport（标准） , document（整页）& element（元素定位））。

Answer 3

@mags：我看到你需要截图来了解故障点。我想分享我使用的截图。

像这样将魅力报告整合到wdio.conf文件中 reporterOptions: { allure: { outputDir: "allure-results" },
使用 npm install @wdio/allure-reporter --save-dev
执行测试套件后，运行此命令生成诱惑结果 allure generate ./allure-results --clean
以上命令执行完成后，运行命令allure open.
现在，对于任何失败的测试，allure 也会向您显示捕获的屏幕截图。请查看随附的示例屏幕截图

Answer 4

在 WebdriverIO v6 中，您可以使用 Puppeteer 进行屏幕截图。我在这里回答

干杯！

WebdriverIO - 获取整页屏幕截图

WebdriverIO - Take full-page screenshot

selenium

automated-tests

selenium-webdriver

webdriver-io

wdio-v4