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

using System.Drawing;
using System.Drawing.Imaging;
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;

public void ScreenshotByElement()
{
    IWebDriver driver = new FirefoxDriver();
    String baseURL = "www.google.com/"; //url link
    String filePath = @"c:\\img1.png";      

    driver.Navigate().GoToUrl(baseURL);
    var remElement = driver.FindElement(By.Id("Butterfly"));
    Point location = remElement.Location;

    var screenshot = (driver as FirefoxDriver).GetScreenshot();
    using (MemoryStream stream = new MemoryStream(screenshot.AsByteArray))
    {
        using (Bitmap bitmap = new Bitmap(stream))
        {
            RectangleF part = new RectangleF(location.X, location.Y, remElement.Size.Width, remElement.Size.Height);
            using (Bitmap bn = bitmap.Clone(part, bitmap.PixelFormat))
            {
                bn.Save(filePath, ImageFormat.Png);                        
            }
        }
    }
}

Answer 2

Si vous obtenez une exception java.awt.image.RasterFormatException dans chrome, ou vous voulez faire défiler un élément en vue puis capturer une capture d'écran.

Voici une solution de la réponse de @Surya.

        JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
        Long offsetTop = (Long) jsExecutor.executeScript("window.scroll(0, document.querySelector(\""+cssSelector+"\").offsetTop - 0); return document.querySelector(\""+cssSelector+"\").getBoundingClientRect().top;");

        WebElement ele = driver.findElement(By.cssSelector(cssSelector));

        // 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(), Math.toIntExact(offsetTop),
                eleWidth, eleHeight);
        ImageIO.write(eleScreenshot, "png", screenshot);

        // Copy the element screenshot to disk
        File screenshotLocation = new File("c:\\temp\\div_element_1.png");
        FileUtils.copyFile(screenshot, screenshotLocation);

Answer 3

Voici ma version, en C#, j'ai repris la plupart des éléments de la réponse de Brook et les ai modifiés pour les adapter à mes besoins.

public static byte[] GetElementImage(this IWebElement element)
    {
        var screenShot = MobileDriver.Driver.GetScreenshot();
        using (var stream = new MemoryStream(screenShot.AsByteArray))
        {
            var screenBitmap = new Bitmap(stream);
            var elementBitmap = screenBitmap.Clone(
                new Rectangle(
                    element.Location.X,
                    element.Location.Y,
                    element.Size.Width,
                    element.Size.Height
                ),
                screenBitmap.PixelFormat
            );
            var converter = new ImageConverter();
            return (byte[]) converter.ConvertTo(elementBitmap, typeof(byte[]));
        }
    }

Answer 4

Pour faire une capture d'écran d'un élément spécifique, vous pouvez maintenant utiliser cette fonction :

public void takeCanvasScreenshot(WebElement element, String imageName) {

   File screenshot = element.getScreenshotAs(OutputType.FILE);

   try {
       FileUtils.copyFile(screenshot, new File("src/main/resources/screenshots/" + imageName + ".png"));
   } catch (IOException e) {
       e.printStackTrace();
   }
}

Answer 5

Pour C#, le code ci-dessous peut fonctionner.

essayez
{

IWebElement transactions = driver.FindElement(By.XPath(".//*[@id='some element']")) ;

Capture d'écran screenshot = ((ITakesScreenshot)driver).GetScreenshot() ;

string title = "un titre quelconque" ;

screenshot.SaveAsFile(title, ScreenshotImageFormat.Jpeg) ;

} catch (Exception) {

// gérer si l'élément n'est pas trouvé

}