如何使用Selenium Webdriver捕获特定元素而不是整个页面的屏幕截图？

Question

目前我正在尝试使用Selenium WebDriver捕获屏幕截图。但我只能获得整页屏幕截图。但是，我想要的只是捕获页面的一部分，或者只是基于ID或任何特定元素定位器捕获特定元素。（例如，我希望用图像id =“Butterfly”捕获图片）有没有办法按选定的项目或元素捕获屏幕截图？

Answer 1

在Node.js，我编写了以下代码，但它不是基于selenium的官方WebDriverJS，而是基于SauceLabs's WebDriver：WD.js和一个非常紧凑的图像库，名为EasyImage。

我只想强调你不能真正拍摄元素的截图，但你应该做的是首先，截取整个页面的截图，然后选择你喜欢的页面部分并裁剪特定部分：

browser.get(URL_TO_VISIT)

       .waitForElementById(dependentElementId, webdriver.asserters.isDisplayed, 3000)

       .elementById(elementID)

        .getSize().then(function(size) {

            browser.elementById(elementID)

                   .getLocation().then(function(location) {

                        browser.takeScreenshot().then(function(data) {

                            var base64Data = data.replace(/^data:image\/png;base64,/, "");

                            fs.writeFile(filePath, base64Data, 'base64', function(err) {

                                if (err) {

                                    console.log(err);

                                } 

                                else {

                                    cropInFile(size, location, filePath);

                                }

                                doneCallback();

                        });

                    });

                });

            }); 

而cropInFileFunction就是这样的：

var cropInFile = function(size, location, srcFile) {

    easyimg.crop({

            src: srcFile,

            dst: srcFile,

            cropwidth: size.width,

            cropheight: size.height,

            x: location.x,

            y: location.y,

            gravity: 'North-West'

        },

        function(err, stdout, stderr) {

            if (err) throw err;

        });

};