使用 Selenium 截取屏幕截图元素？ [复制]答案

【问题标题】：Take a screenshot element with Selenium? [duplicate]使用 Selenium 截取屏幕截图元素？ [复制]
【发布时间】：2015-11-13 14:56:21
【问题描述】：

有谁知道截取网页的 1 个元素并在 javascript 中将其转换为 base64 吗？

【问题讨论】：

标签： javascript selenium base64 screenshot

【解决方案1】：

var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().usingServer('http://localURL:4444/wd/hub').withCapabilities({'browserName': 'chrome'}).build();
//driver.get([URL to webserver on my local machine])
driver.findElement(webdriver.By.xpath('//img[@id="tree_image0358"]'));
driver.takeScreenshot("c:\\selenium_local_map\\out1.png");

driver.takeScreenshot().then(
    function(image, err) {
        require('fs').writeFile('out.png', image, 'base64', function(err {
            console.log(err);
        });
    }
);

【讨论】：

谢谢。我想要takeScreenshot 元素，例如：driver.findElement(webdriver.By.xpath('//img[@id="tree_image0358"]')); 在您的代码中，它将截屏网页而不是页面的 1 个元素。
已更新答案以满足要求。
我正在检查您的解决问题。但它仍然捕获所有网页。它无法捕获带有id="tree_image0358 的元素。我认为必须分配像urlImage = driver.findElement(webdriver.By.xpath('//img[@id="tree_image0358"]')); 在takeScreenshot 返回值urlImage。
参考这里：stackoverflow.com/a/23087000/2468691

【解决方案2】：

这不是我的答案：从这里复制：How to capture the screenshot of a specific element rather than entire page using Selenium Webdriver?

在 Node.js 中，我编写了以下代码，但它不是基于 selenium 的官方 WebDriverJS，而是基于 SauceLabs 的 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;
        });
};

【讨论】：

谢谢。在我的网站中，它会在 3 秒后自动刷新图像。如果使用您的解决方案，则存在 selenium.js。我添加了这段代码。登录后，我想使用此代码保存我的头像，但它不起作用。对不起。还有其他方法吗？