Comment capturer la capture d'écran d'un élément spécifique plutôt que de la page entière en utilisant Selenium Webdriver ?

Question

Actuellement, j'essaie de capturer une capture d'écran en utilisant le Selenium WebDriver. Mais je ne peux obtenir que la capture d'écran de la page entière. Cependant, ce que je voulais, c'était juste capturer une partie de la page ou peut-être juste un élément spécifique basé sur l'ID ou tout autre localisateur d'élément spécifique. (Par exemple, je souhaite capturer l'image avec image id = "Butterfly")

Existe-t-il un moyen de capturer une capture d'écran par élément ou élément sélectionné ?

Answer 1

Nous pouvons obtenir la capture d'écran de l'élément en rognant la capture d'écran de la page entière comme ci-dessous :

driver.get("http://www.google.com");
WebElement ele = driver.findElement(By.id("hplogo"));

// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage  fullImg = ImageIO.read(screenshot);

// Get the location of element on the page
Point point = ele.getLocation();

// Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();

// Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(),
    eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);

// Copy the element screenshot to disk
File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");
FileUtils.copyFile(screenshot, screenshotLocation);

Answer 2

Voici une version Python 3 utilisant Selenium webdriver et Pillow. Ce programme capture la capture d'écran de la page entière et recadre l'élément en fonction de son emplacement. L'image de l'élément sera disponible en tant que image.png. Firefox supporte l'enregistrement de l'image de l'élément directement en utilisant element.screenshot_as_png('nom_de_l'image').

from selenium import webdriver
from PIL import Image

driver = webdriver.Chrome()
driver.get('https://www.google.co.in')

element = driver.find_element_by_id("lst-ib")

location = element.location
size = element.size

driver.save_screenshot("shot.png")

x = location['x']
y = location['y']
w = size['width']
h = size['height']
width = x + w
height = y + h

im = Image.open('shot.png')
im = im.crop((int(x), int(y), int(width), int(height)))
im.save('image.png')

Mise à jour

Désormais, Chrome prend également en charge les captures d'écran d'éléments individuels. Vous pouvez donc capturer directement la capture d'écran de l'élément web comme indiqué ci-dessous.

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('https://www.google.co.in')
image = driver.find_element_by_id("lst-ib").screenshot_as_png 
# or
# element = driver.find_element_by_id("lst-ib")
# element.screenshot_as_png("image.png")

Answer 3

Le framework AShot de Yandex peut être utilisé pour faire des captures d'écran dans Selenium WebDriver scripts pour

• pages web complètes
• éléments web

Ce cadre peut être trouvé sur https://github.com/yandex-qatools/ashot .

Le code pour prendre les captures d'écran est très simple :

PAGE ENTIÈRE

Screenshot screenshot = new AShot()
        .shootingStrategy(new ViewportPastingStrategy(1000))
        .takeScreenshot(driver);

ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\results.png"));

ÉLÉMENT WEB SPÉCIFIQUE

Screenshot screenshot = new AShot()
        .takeScreenshot(driver, driver.findElement(By.xpath("(//div[@id='ct_search'])[1]")));

ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\div_element.png"));

Pour plus de détails et d'exemples de code, voir cet article .

Answer 4

Sur Node.js J'ai écrit le code suivant qui fonctionne mais qui n'est pas basé sur le WebDriverJS officiel de Selenium, mais sur SauceLabs's WebDriver : WD.js et une bibliothèque d'images très compacte appelée EasyImage .

Je tiens à souligner que vous ne pouvez pas vraiment prendre la capture d'écran d'un élément, mais ce que vous devez faire, c'est d'abord prendre la capture d'écran de la page entière, puis sélectionner la partie de la page que vous aimez et recadrer cette partie spécifique :

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();
                        });
                    });
                });
            }); 

Et le cropInFileFunction, va comme ça :

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;
        });
};

Answer 5

Pour tous ceux qui demandent du code en C#, voici une version simplifiée de mon implémentation.

public static void TakeScreenshot(IWebDriver driver, IWebElement element)
{
    try
    {
        string fileName = DateTime.Now.ToString("yyyy-MM-dd HH-mm-ss") + ".jpg";
        Byte[] byteArray = ((ITakesScreenshot)driver).GetScreenshot().AsByteArray;
        System.Drawing.Bitmap screenshot = new System.Drawing.Bitmap(new System.IO.MemoryStream(byteArray));
        System.Drawing.Rectangle croppedImage = new System.Drawing.Rectangle(element.Location.X, element.Location.Y, element.Size.Width, element.Size.Height);
        screenshot = screenshot.Clone(croppedImage, screenshot.PixelFormat);
        screenshot.Save(String.Format(@"C:\SeleniumScreenshots\" + fileName, System.Drawing.Imaging.ImageFormat.Jpeg));
    }
    catch (Exception e)
    {
        logger.Error(e.StackTrace + ' ' + e.Message);
    }
}