selenium - Selenium WebDriver で部分的なスクリーンショット (フレーム) を取得するには?

Question

フレームセット内の 1 つのフレーム (ウィンドウ全体ではない) のみの WebDriver でスクリーンショットを撮ることは可能ですか?

または、スクリーンショットのウィンドウの座標を定義したり、後で画像をトリミングしたりすることは可能ですか?

Answer 1

これはうまくいくはずです：

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 2

Python ソリューション (依存関係: PIL または 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)

Answer 3

Seleniumで特定のHtml要素のスクリーンショットを撮ることについて、C＃に基づくソリューションを投稿するだけです：

まず、以下のように Selenium Web ドライバーの GetScreenShot メソッドを使用して、Web ページ全体のスクリーン ショットを取得する必要があります。

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

次に、指定された html 要素の位置、高さ、および幅から長方形を作成します。(これは、FindElement()id またはクラス名を指定してセレンのメソッドを使用して取得する必要があります)。

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

これを使用して、以下のようにスクリーンショットをトリミングします。結果は、スクリーンショット固有の Web 要素になります。

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

以下のメソッドとしての完全なコード:

/// <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

スカラソリューション:

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