如何使用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;        });};