chrome - selenium webdriver python

¿Cómo tomar una captura de pantalla parcial(marco) con Selenium WebDriver?

Question

¿Es posible tomar una captura de pantalla con WebDriver de solo un marco (no la ventana completa) dentro de un conjunto de marcos?

Alternativamente, ¿es posible definir las coordenadas de una ventana para la captura de pantalla o recortar la imagen después?

Answer 1

Ruby solution

Preparar

Instalar xvfb

apt-get install xvfb -y

Instalar un navegador sin cabeza y una gema de manipulación de imágenes

gem install chunky_png
gem install headless
gem install selenium-webdriver

Instalar el controlador Chrome

wget http://chromedriver.googlecode.com/files/chromedriver_linux64_<latest>.zip
apt-get install unzip
unzip chromedriver_linux64_<latest>.zip
cp chromedriver /usr/local/bin

Más información se puede encontrar aquí

Código

#!/usr/bin/env ruby

require "headless"
require "selenium-webdriver"
require ''chunky_png''

headless = Headless.new
headless.start

site = "?_some_site_?"

driver = Selenium::WebDriver.for :chrome
driver.navigate.to site
sleep 1
driver.save_screenshot(''screenshot.png'')

el= driver.find_element(:xpath, ''?_some_xpath_?'')

image = ChunkyPNG::Image.from_file(''screenshot.png'')

image.crop!(el.location.x + 1, el.location.y + 1, el.size.width, el.size.height)
image.save(''croped.png'')

driver.quit
headless.destroy

Answer 2

Esto debería funcionar:

import java.awt.image.BufferedImage;
import java.io.File;

import javax.imageio.ImageIO;

import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.Point;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;

public class Shooter{

    private WebDriver driver;

    public void shootWebElement(WebElement element) throws IOException  {

        File screen = ((TakesScreenshot) this.driver).getScreenshotAs(OutputType.FILE);

        Point p = element.getLocation();

        int width = element.getSize().getWidth();
        int height = element.getSize().getHeight();

        BufferedImage img = ImageIO.read(screen);

        BufferedImage dest = img.getSubimage(p.getX(), p.getY(), width,   
                                 height);

        ImageIO.write(dest, "png", screen);

        File f = new File("S://ome//where//over//the//rainbow");

        FileUtils.copyFile(screen, f);

    }
}

Answer 3

Simplemente publicando una solución basada en C # al tomar una captura de pantalla de un elemento Html específico en selenio:

Primero debemos tomar la captura de pantalla de toda la página web utilizando el método GetScreenShot del controlador web de selenio, como se muestra a continuación.

Screenshot screenshot = ((ITakesScreenshot)this.driver).GetScreenshot(); 
screenshot.SaveAsFile(filename, System.Drawing.Imaging.ImageFormat.Jpeg);

A continuación, cree un rectángulo a partir de la ubicación, la altura y el ancho del elemento html especificado. (Esto debe obtenerse utilizando el método FindElement() de selenio proporcionando nombre de identificación o clase).

Image img = Bitmap.FromFile(uniqueName);
Rectangle rect = new Rectangle();

if (element != null)
{
    // Get the Width and Height of the WebElement using
    int width = element.Size.Width;
    int height = element.Size.Height;

    // Get the Location of WebElement in a Point.
    // This will provide X & Y co-ordinates of the WebElement
    Point p = element.Location;

    // Create a rectangle using Width, Height and element location
    rect = new Rectangle(p.X, p.Y, width, height);
}

Al usar esto vamos a recortar la captura de pantalla de la siguiente manera y el resultado será el elemento web específico de la captura de pantalla.

Bitmap bmpImage = new Bitmap(img);
var cropedImag = bmpImage.Clone(rect, bmpImage.PixelFormat);

Código completo como método a continuación:

/// <summary>
/// Captures the element screen shot.
/// </summary>
/// <param name="element">The element.</param>
/// <param name="uniqueName">Name of the unique.</param>
/// <returns>returns the screenshot  image </returns>
public Image CaptureElementScreenShot(HTMLElement element, string uniqueName)
{
    Screenshot screenshot = ((ITakesScreenshot)this.driver).GetScreenshot();
    screenshot.SaveAsFile(filename, System.Drawing.Imaging.ImageFormat.Jpeg);

    Image img = Bitmap.FromFile(uniqueName);
    Rectangle rect = new Rectangle();

    if (element != null)
    {
        // Get the Width and Height of the WebElement using
        int width = element.Size.Width;
        int height = element.Size.Height;

        // Get the Location of WebElement in a Point.
        // This will provide X & Y co-ordinates of the WebElement
        Point p = element.Location;

        // Create a rectangle using Width, Height and element location
        rect = new Rectangle(p.X, p.Y, width, height);
    }

    // croping the image based on rect.
    Bitmap bmpImage = new Bitmap(img);
    var cropedImag = bmpImage.Clone(rect, bmpImage.PixelFormat);

    return cropedImag;
}

Answer 4

Solución Scala:

import javax.imageio.ImageIO
import java.awt.image.BufferedImage

// phone is a case class with witdth and height Int fields

def producer {       
 [..]
 processScreenshot(driver.getScreenshotAs(OutputType.FILE), ph)
}

def processScreenshot(file: File, phone: Phone) = {
 val img: BufferedImage = ImageIO.read(file)
 val w = math.min(img.getWidth, phone.width)
 val h = math.min(img.getHeight, phone.height)
 val dest = img.getSubimage(0, 0, w, h)
 ImageIO.write(dest, "png", new File(s"/tmp/${un}_${phone.file}.png"))
}

Answer 5

Solución de Python (dependencia: PIL o Pillow):

from PIL import Image
from selenium import webdriver

def element_screenshot(driver, element, filename):
    bounding_box = (
        element.location[''x''], # left
        element.location[''y''], # upper
        (element.location[''x''] + element.size[''width'']), # right
        (element.location[''y''] + element.size[''height'']) # bottom
    )
    return bounding_box_screenshot(driver, bounding_box, filename)

def bounding_box_screenshot(driver, bounding_box, filename):
    driver.save_screenshot(filename)
    base_image = Image.open(filename)
    cropped_image = base_image.crop(bounding_box)
    base_image = base_image.resize(cropped_image.size)
    base_image.paste(cropped_image, (0, 0))
    base_image.save(filename)
    return base_image

if __name__ == ''__main__'':
    driver = webdriver.Firefox()
    driver.get(''https://www.google.com/?gws_rd=ssl'')
    element = driver.find_element_by_id(''body'')

    screenshot = element_screenshot(driver, element, ''element.png'') # Screenshot the ''#body'' element

    bounding_box = (100, 100, 600, 600)
    screenshot = bounding_box_screenshot(driver, bounding_box, ''box.png'') # Screenshot the bounding box (100, 100, 600, 600)