WebdriverIO-拍摄整页截图

问题描述

我正在尝试使用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对我不起作用.我认为是因为它尚未与[email protected]兼容.

The problem is that WebdriverCSS is not working for me. I think it's because it is not yet compatible with [email protected].

有什么办法可以使它起作用，或者可以使用其他解决方案?

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');

> 整个屏幕截图类似于 此 以尝试Instagram feed. (出于明显原因将屏幕快照留在行内)

> 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种类型的屏幕截图(视口(标准)，文档(全页)和 element (以element为目标)).

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

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