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

Si vous cherchez une solution JavaScript, voici mon point de vue :

https://gist.github.com/sillicon/4abcd9079a7d29cbb53ebee547b55fba

L'idée de base est la même : faites d'abord une capture d'écran, puis recadrez-la. Cependant, ma solution ne nécessitera pas d'autres bibliothèques, juste du code pur de l'API WebDriver. Cependant, l'effet secondaire est que cela peut augmenter la charge de votre navigateur de test.

Answer 2

Voici une fonction d'extension pour C# :

public static BitmapImage GetElementImage(this IWebDriver webDriver, By by)
{
    var elements = webDriver.FindElements(by);
    if (elements.Count == 0)
        return null;

    var element = elements[0];
    var screenShot = (webDriver as ITakesScreenshot).GetScreenshot();
    using (var ms = new MemoryStream(screenShot.AsByteArray))
    {
        Bitmap screenBitmap;
        screenBitmap = new Bitmap(ms);
        return screenBitmap.Clone(
            new Rectangle(
                element.Location.X,
                element.Location.Y,
                element.Size.Width,
                element.Size.Height
            ),
            screenBitmap.PixelFormat
        ).ToBitmapImage();
    }
}

Vous pouvez maintenant l'utiliser pour prendre l'image de n'importe quel élément comme ceci :

var image = webDriver.GetElementImage(By.Id("someId"));

Answer 3

Envisager l'utilisation d'une aiguille - outil de comparaison visuelle automatisée https://github.com/bfirsh/needle , qui possède une fonctionnalité intégrée permettant de prendre des captures d'écran d'éléments spécifiques (sélectionnés par un sélecteur CSS). L'outil fonctionne avec le WebDriver de Selenium et est écrit en Python.

Answer 4

Ci-dessous la fonction pour prendre un instantané d'un élément spécifique dans Selenium. Ici le pilote est un type de WebDriver.

private static void getScreenshot(final WebElement e, String fileName) throws IOException {
  final BufferedImage img;
  final Point topleft;
  final Point bottomright;
  final byte[] screengrab;
  screengrab = ((TakesScreenshot) driver).getScreenshotAs(OutputType.BYTES);
  img = ImageIO.read(new ByteArrayInputStream(screengrab));
  topleft = e.getLocation();
  bottomright = new Point(e.getSize().getWidth(), e.getSize().getHeight());
  BufferedImage imgScreenshot= 
      (BufferedImage)img.getSubimage(topleft.getX(), topleft.getY(), bottomright.getX(), bottomright.getY());
  File screenshotLocation = new File("Images/"+fileName +".png");    
  ImageIO.write(imgScreenshot, "png", screenshotLocation);
 }

Answer 5

Code c# :

public Bitmap MakeElemScreenshot( IWebDriver driver, WebElement elem)
{
    Screenshot myScreenShot = ((ITakesScreenshot)driver).GetScreenshot();

    Bitmap screen = new Bitmap(new MemoryStream(myScreenShot.AsByteArray));
    Bitmap elemScreenshot = screen.Clone(new Rectangle(elem.Location, elem.Size), screen.PixelFormat);

    screen.Dispose();

    return elemScreenshot;
}