4

我正在尝试使用 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，很可能不会修复。请参阅此链接了解更多详情。

4

4 回答 4

6

这可能可以通过多种方式完成，但最直接的方式是通过wdio-screenshot 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 种类型的屏幕截图（视口（标准）、文档（整页）和元素（以元素为目标））。

于 2018-12-28T22:30:41.623 回答
2

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

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

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

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

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

  5. 现在，对于任何失败的测试，allure 还会向您显示捕获的屏幕截图。请参阅随附的示例屏幕截图在此处输入图像描述

于 2019-01-29T18:38:41.983 回答
2

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

干杯!

于 2020-10-09T20:26:52.307 回答
-1

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

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

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

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

雅虎主页

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

于 2016-05-06T23:13:18.820 回答