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

Posted 2023-03-24

【中文标题】使用 Selenium 截取屏幕截图元素？ [复制]

【英文标题】：Take a screenshot element with Selenium? [duplicate]

【发布时间】：2015-11-13 14:56:21

【问题描述】：

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

【参考方案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。

参考这里：***.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。我添加了这段代码。登录后，我想使用此代码保存我的头像，但它不起作用。对不起。还有其他方法吗？