selenium-webdriver - webdrivercss 不保存截图

Question

我是 webdriverio 和 webdrivercss 的新手。我需要制作一些 DOM 元素的屏幕截图。所以，我写了以下内容：

// init WebdriverIO
var client = require('webdriverio').remote({desiredCapabilities:{browserName: 'firefox'}});
// init WebdriverCSS
require('webdrivercss').init(client);
client
    .init()
    .url('http://webdriver.io/')
    .webdrivercss('startpage',[
        {
            name: 'header',
            elem: '.mainnav'
        }
    ], function(err, res) {
            console.log(err, res);
    })
    .end();

结果，我得到了空的 ./webdrivercss 目录和“err”、“res”回调参数作为“未定义”值。

节点版本“v0.12.7”。

Answer 1

我之前也在处理这个问题。原来WebdriverCSS与最新版本的WebdriverIO不兼容。

@christian-bromann于 7 月 9 日发表评论

嗨@terekim，我目前正在更新WebdriverCSS，以便它可以与WebdriverIO v3 一起使用。目前它不起作用。敬请期待。

https://github.com/webdriverio/webdrivercss/issues/89

WebdriverCSS的最新子v3版本是.2.4.5

Answer 2

如果您需要创建某些特定元素的屏幕截图，您需要

1. 创建浏览器截图

2. 获取页面上的大小和位置，并从步骤 1 中截取的屏幕截图中剪切；

c#的代码：

public Bitmap getElementImg(Point point, Size size)
    {
        Screenshot myScreenShot = ((ITakesScreenshot)Instance).GetScreenshot();

        Bitmap screen = new Bitmap(new MemoryStream(myScreenShot.AsByteArray));

        Bitmap eleScreenshot = screen.Clone(new Rectangle(point, size), screen.PixelFormat);

        return eleScreenshot;
    }

Point point, Size size -- 元素大小和位置