Làm cách nào để chụp ảnh màn hình của một phần tử cụ thể thay vì toàn bộ trang bằng Selenium Webdriver?

Hiện tôi đang cố chụp ảnh màn hình bằng Selenium WebDriver. Nhưng tôi chỉ có thể có được ảnh chụp màn hình toàn trang. Tuy nhiên, những gì tôi muốn chỉ là chụp một phần của trang hoặc có lẽ chỉ trên phần tử cụ thể dựa trên ID hoặc bất kỳ bộ định vị phần tử cụ thể nào. (Ví dụ: tôi muốn chụp ảnh với id hình ảnh = "Butterfly")

Có cách nào để chụp ảnh màn hình theo mục hoặc phần tử đã chọn không?

Chúng ta có thể lấy ảnh chụp màn hình phần tử bằng cách cắt ảnh chụp màn hình toàn bộ trang như bên dưới:

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

Đây là phiên bản Python 3 sử dụng Selenium webdriver và Pillow. Chương trình này chụp ảnh màn hình của toàn bộ trang và cắt phần tử dựa trên vị trí của nó. Hình ảnh phần tử sẽ có sẵn dưới dạng image.png. Firefox hỗ trợ lưu hình ảnh phần tử trực tiếp bằng element.screenshot_as_png ('image_name').

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')

Cập nhật

Giờ đây, chrome cũng hỗ trợ ảnh chụp màn hình phần tử riêng lẻ. Vì vậy, bạn có thể chụp trực tiếp ảnh chụp màn hình của phần tử web như bên dưới.

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

Trong Node.js, tôi đã viết đoạn mã sau đây hoạt động nhưng nó không dựa trên WebDriverJS chính thức của selen, mà dựa trên SauceLabs's WebDriver: WD.js và một thư viện hình ảnh rất nhỏ gọn có tên là EasyImage .

Tôi chỉ muốn nhấn mạnh rằng bạn không thể thực sự chụp ảnh màn hình của một phần tử nhưng điều bạn nên làm là trước tiên, chụp ảnh màn hình của toàn trang, sau đó chọn phần của trang bạn thích và cắt phần cụ thể đó:

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

Và cropInFileFunction, sẽ như thế này:

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

Khung ASHOT từ Yandex có thể được sử dụng để chụp ảnh màn hình trong các tập lệnh Selenium WebDriver cho

• trang web đầy đủ
• yếu tố web

Khung này có thể được tìm thấy trên https://github.com/yandex-qatools/ashot .

Mã để chụp ảnh màn hình rất đơn giản:

TOÀN BỘ TRANG

screenshot = new AShot().shootingStrategy(
new ViewportPastingStrategy(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\results.png"));

YẾU TỐ WEB CỤ THỂ

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

Xem thêm chi tiết và nhiều mẫu mã hơn trên bài viết này .

Đối với tất cả mọi người yêu cầu mã bằng C #, dưới đây là phiên bản đơn giản của việc triển khai của tôi.

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

Tôi đã lãng phí rất nhiều thời gian vào việc chụp ảnh màn hình và tôi muốn lưu ảnh của bạn. Tôi đã sử dụng chrome + selen + c #, kết quả hoàn toàn khủng khiếp. Cuối cùng tôi đã viết một hàm:

driver.Manage().Window.Maximize();
             RemoteWebElement remElement = (RemoteWebElement)driver.FindElement(By.Id("submit-button")); 
             Point location = remElement.LocationOnScreenOnceScrolledIntoView;  

             int viewportWidth = Convert.ToInt32(((IJavaScriptExecutor)driver).ExecuteScript("return document.documentElement.clientWidth"));
             int viewportHeight = Convert.ToInt32(((IJavaScriptExecutor)driver).ExecuteScript("return document.documentElement.clientHeight"));

             driver.SwitchTo();

             int elementLocation_X = location.X;
             int elementLocation_Y = location.Y;

             IWebElement img = driver.FindElement(By.Id("submit-button"));

             int elementSize_Width = img.Size.Width;
             int elementSize_Height = img.Size.Height;

             Size s = new Size();
             s.Width = driver.Manage().Window.Size.Width;
             s.Height = driver.Manage().Window.Size.Height;

             Bitmap bitmap = new Bitmap(s.Width, s.Height);
             Graphics graphics = Graphics.FromImage(bitmap as Image);
             graphics.CopyFromScreen(0, 0, 0, 0, s);

             bitmap.Save(filePath, System.Drawing.Imaging.ImageFormat.Png);

             RectangleF part = new RectangleF(elementLocation_X, elementLocation_Y + (s.Height - viewportHeight), elementSize_Width, elementSize_Height);

             Bitmap bmpobj = (Bitmap)Image.FromFile(filePath);
             Bitmap bn = bmpobj.Clone(part, bmpobj.PixelFormat);
             bn.Save(finalPictureFilePath, System.Drawing.Imaging.ImageFormat.Png); 

Câu trả lời của Surya hoạt động tuyệt vời nếu bạn không ngại liên quan đến IO đĩa. Nếu bạn không muốn, thì phương pháp này có thể tốt hơn cho bạn

private Image getScreenshot(final WebDriver d, final WebElement e) throws IOException {
    final BufferedImage img;
    final Point topleft;
    final Point bottomright;

    final byte[] screengrab;
    screengrab = ((TakesScreenshot) d).getScreenshotAs(OutputType.BYTES);

    img = ImageIO.read(new ByteArrayInputStream(screengrab));

    //crop the image to focus on e
    //get dimensions (crop points)
    topleft = e.getLocation();
    bottomright = new Point(e.getSize().getWidth(),
                            e.getSize().getHeight());

    return img.getSubimage(topleft.getX(),
                           topleft.getY(),
                           bottomright.getX(),
                           bottomright.getY());
}

Nếu bạn thích, bạn có thể bỏ qua khai báo screengrabvà thay vào đó làm

img = ImageIO.read(
    new ByteArrayInputStream(
        ((TakesScreenshot) d).getScreenshotAs(OutputType.BYTES)));

cái nào sạch hơn, nhưng tôi để nó trong cho rõ ràng. Sau đó, bạn có thể lưu nó thành một tệp hoặc đặt nó trong một JPanel để chứa nội dung trái tim của bạn.

Python 3

Đã thử với Selenium 3.141.0 và chromedriver 73.0.3683.68, điều này hoạt động,

from selenium import webdriver

chromedriver = '/usr/local/bin/chromedriver'
chromeOptions = webdriver.ChromeOptions()
chromeOptions.add_argument('window-size=1366x768')
chromeOptions.add_argument('disable-extensions')
cdriver = webdriver.Chrome(options=chromeOptions, executable_path=chromedriver)

cdriver.get('url')
element = cdriver.find_element_by_css_selector('.some-css.selector')

element.screenshot_as_png('elemenent.png')

Không cần lấy toàn bộ hình ảnh và lấy một phần của hình ảnh toàn màn hình.

Điều này có thể không có khi câu trả lời của Rohit được tạo ra.

public void GenerateSnapshot(string url, string selector, string filePath)
    {
        using (IWebDriver driver = new ChromeDriver())
        {
            driver.Navigate().GoToUrl(url);
            var remElement = driver.FindElement(By.CssSelector(selector));
            Point location = remElement.Location;

            var screenshot = (driver as ChromeDriver).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, System.Drawing.Imaging.ImageFormat.Png);
                    }
                }
            }
            driver.Close();
        }
    }

Nếu bạn đang tìm kiếm một giải pháp JavaScript, đây là ý chính của tôi:

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

Ý tưởng cơ bản là giống nhau, chụp ảnh màn hình trước, sau đó cắt nó. Tuy nhiên, giải pháp của tôi sẽ không yêu cầu các thư viện khác, chỉ cần mã API WebDriver thuần túy. Tuy nhiên, tác dụng phụ là nó có thể làm tăng tải trình duyệt thử nghiệm của bạn.

Đây là một hàm mở rộng cho 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();
    }
}

Bây giờ bạn có thể sử dụng nó để chụp ảnh của bất kỳ phần tử nào như sau:

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

Cân nhắc sử dụng kim - công cụ để so sánh trực quan tự động https://github.com/bfirsh/needle , có chức năng tích hợp cho phép chụp ảnh màn hình của các phần tử cụ thể (được chọn bởi bộ chọn CSS). Công cụ này hoạt động trên WebDriver của Selenium và nó được viết bằng Python.

Bên dưới chức năng chụp ảnh nhanh một phần tử cụ thể trong Selenium. Ở đây trình điều khiển là một loại 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);
 }

c # mã:

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

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

Nếu bạn nhận được một ngoại lệ java.awt.image.RasterFormatException trong chrome hoặc bạn muốn cuộn một phần tử vào chế độ xem thì hãy chụp ảnh màn hình.

Đây là một giải pháp từ câu trả lời @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);

Đây là phiên bản của tôi, trong C #, về cơ bản tôi đã hiểu được hầu hết câu trả lời của Brook và sửa đổi nó để phù hợp với mục đích của tôi

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

Tôi tin rằng điều này sẽ không hiệu quả với bạn khi bạn sử dụng C # và giải pháp của tôi bao gồm một thư viện Java, tuy nhiên có thể những người khác sẽ thấy nó hữu ích.

Để chụp ảnh màn hình tùy chỉnh, bạn có thể sử dụng thư viện Shutterbug. Lời gọi cụ thể cho mục đích này sẽ là:

Shutterbug.shootElement(driver, element).save();

Tôi đã làm theo mã mẫu từ @codeslord, nhưng vì một số lý do mà tôi phải truy cập dữ liệu ảnh chụp màn hình của mình theo cách khác:

 # Open the Firefox webdriver
 driver = webdriver.Firefox()
 # Find the element that you're interested in
 imagepanel = driver.find_element_by_class_name("panel-height-helper")
 # Access the data bytes for the web element
 datatowrite = imagepanel.screenshot_as_png
 # Write the byte data to a file
 outfile = open("imagepanel.png", "wb")
 outfile.write(datatowrite)
 outfile.close()

(sử dụng Python 3.7, Selenium 3.141.0 và Mozilla Geckodriver 71.0.0.7222)

Tôi đang sử dụng phiên bản sửa đổi của câu trả lời @ Brook và đang hoạt động tốt ngay cả đối với các phần tử cần cuộn trang.

public void TakeScreenshot(string fileNameWithoutExtension, IWebElement element)
{
    // Scroll to the element if necessary
    var actions = new Actions(_driver);
    actions.MoveToElement(element);
    actions.Perform();
    // Get the element position (scroll-aware)
    var locationWhenScrolled = ((RemoteWebElement) element).LocationOnScreenOnceScrolledIntoView;
    var fileName = fileNameWithoutExtension + ".png";
    var byteArray = ((ITakesScreenshot) _driver).GetScreenshot().AsByteArray;
    using (var screenshot = new System.Drawing.Bitmap(new System.IO.MemoryStream(byteArray)))
    {
        var location = locationWhenScrolled;
        // Fix location if necessary to avoid OutOfMemory Exception
        if (location.X + element.Size.Width > screenshot.Width)
        {
            location.X = screenshot.Width - element.Size.Width;
        }
        if (location.Y + element.Size.Height > screenshot.Height)
        {
            location.Y = screenshot.Height - element.Size.Height;
        }
        // Crop the screenshot
        var croppedImage = new System.Drawing.Rectangle(location.X, location.Y, element.Size.Width, element.Size.Height);
        using (var clone = screenshot.Clone(croppedImage, screenshot.PixelFormat))
        {
            clone.Save(fileName, ImageFormat.Png);
        }
    }
}

Hai ifs là cần thiết (ít nhất là đối với trình điều khiển chrome) vì kích thước của phần cắt vượt quá kích thước ảnh chụp màn hình 1 pixel khi cần cuộn.