WebdriverIO - 截取整页截图 [英] WebdriverIO - Take full-page screenshot

问题描述

我正在尝试使用 WebdriverIO 截取整个页面的屏幕截图.

I'm trying to take a screenshot of the full page using WebdriverIO.

我了解到最好的方法是使用 WebdriverCSS 来增强我的 WebdriverIO 流程.WebdriverCSS自动截图整个页面??

I've read that the best method is to use WebdriverCSS to enhance my WebdriverIO flows. WebdriverCSS automatically screenshots the entire page??

问题是 WebdriverCSS 不适合我.我想是因为它还不兼容webdriverio@3.0.x.

The problem is that WebdriverCSS is not working for me. I think it's because it is not yet compatible with webdriverio@3.0.x.

有什么方法可以让它工作或我可以使用其他解决方案吗?

Is there any way to make it work or another solution that I could use?

我的代码:(在回调中只产生未定义的值)

// 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 is a known BUG in Chromium which most likely will not be fixed. Please see this LINK for more details.

推荐答案

这可能有很多方法可以完成，但最直接的方法是通过 wdio-screenshot WebdriverIO 插件.

This can probably be done in quite a handful of ways, but the most straight forward way would be via the wdio-screenshot WebdriverIO plugin.

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

1. Install the plugin: npm install --save-dev wdio-screenshot
2. Enable the plugin in the wdio.conf.js file in the plugings object: plugins: { 'wdio-screenshot': {} }
3. Inside your test, add the following step (for a document(full-page screenshot): browser.saveDocumentScreenshot('<screenShotsPath>/screenshotName.png');

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

> The full-page screenshot looks like this for an Instagram feed attempt. (left the screenshot inline for obvious reasons)

• !Note-001:如果您不希望您的屏幕截图看起来像那样，那么我建议您使用一些 waitUntil 以保证您的内容已加载&渲染成功.

• !Note-001: If you don't want your screenshot to look like that, then I recommend you use some waitUntil to guarantee your content has loaded & rendered successfully.

!Note-002: wdio-screenshot 支持 3 种类型的屏幕截图(viewport(标准)，document(整页)和元素(以元素为目标)).

!Note-002: wdio-screenshot supports 3 types of screenshots (viewport (standard), document (full-page) & element (element-targeted)).

这篇关于WebdriverIO - 截取整页截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！