Selenium Webdriver kullanarak sayfanın tamamı yerine belirli bir öğenin ekran görüntüsü nasıl alınır?

Şu anda Selenium WebDriver kullanarak bir ekran görüntüsü almaya çalışıyorum. Ama sadece tüm sayfa ekran görüntüsünü elde edebiliyorum. Ancak, istediğim sadece sayfanın bir bölümünü veya belki sadece kimliğe veya belirli bir öğe bulucusuna dayalı belirli bir öğeyi yakalamaktır. (Örneğin, resmi image id = "Butterfly" ile çekmek istiyorum)

Seçili öğe veya öğe ile ekran görüntüsü almanın herhangi bir yolu var mı?

Aşağıdaki gibi tüm sayfa ekran görüntüsünü kırparak öğe ekran görüntüsünü alabiliriz:

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

Selenium web sürücüsü ve Yastık kullanan bir Python 3 sürümü. Bu program, tüm sayfanın ekran görüntüsünü yakalar ve öğeyi konumuna göre kırpar. Öğe resmi, image.png olarak mevcut olacaktır. Firefox, element.screenshot_as_png ('image_name') kullanarak element resmini kaydetmeyi destekler.

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

Güncelleme

Artık chrome, bağımsız öğe ekran görüntülerini de destekliyor. Böylece, aşağıda verilen web öğesinin ekran görüntüsünü doğrudan yakalayabilirsiniz.

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

Olarak Node.js, ben çalışır aşağıdaki kodu yazdım ama dayalı selenyumun resmi WebDriverJS dayalı değil, SauceLabs's WebDriver: WD.js ve adlı çok kompakt görüntü kütüphanesinde EasyImage .

Sadece bir öğenin ekran görüntüsünü gerçekten alamayacağınızı vurgulamak istiyorum, ancak yapmanız gereken önce tüm sayfanın ekran görüntüsünü almak, ardından sayfanın beğendiğiniz bölümünü seçmek ve o belirli bölümü kırpmaktır:

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

CropInFileFunction şu şekilde olur:

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

Yandex'in ASHOT çerçevesi, Selenium WebDriver komut dosyalarında ekran görüntüsü almak için kullanılabilir.

• tam web sayfaları
• web öğeleri

Bu çerçeve https://github.com/yandex-qatools/ashot adresinde bulunabilir .

Ekran görüntülerini alma kodu çok basittir:

TÜM SAYFA

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

ÖZEL WEB ELEMANI

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

Bu makaleyle ilgili daha fazla ayrıntı ve daha fazla kod örneği görün .

C # 'da kod isteyen herkes için, aşağıda benim uygulamamın basitleştirilmiş bir sürümü verilmiştir.

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

Ekran görüntüsü almak için çok zaman harcadım ve sizinkini kaydetmek istiyorum. Krom + selenyum + c # kullandım, sonuç tamamen korkunçtu. Sonunda bir fonksiyon yazdı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); 

Surya'nın cevabı , disk IO'yu dahil etmek sizin için sorun değilse harika çalışıyor. İstemiyorsanız, bu yöntem sizin için daha iyi olabilir

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

Tercih ederseniz, bildirmeyi atlayabilir screengrabve bunun yerine

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

bu daha temiz, ancak netlik için bıraktım. Daha sonra bir dosya olarak kaydedebilir veya kalbinizin içeriğine göre bir JPanel'e koyabilirsiniz .

Python 3

Selenium 3.141.0 ve krom sürücü 73.0.3683.68 ile denendi, bu çalışıyor,

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

Tam bir görüntü elde etmenize ve tam ekran bir görüntünün bir bölümünü almanıza gerek yok.

Rohit'in cevabı oluşturulduğunda bu mevcut olmayabilirdi .

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

Bir JavaScript çözümü arıyorsanız, işte benim özüm:

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

Temel fikir aynı, önce ekran görüntüsünü alın, sonra kırpın. Ancak benim çözümüm başka kitaplıklar gerektirmeyecek, sadece saf WebDriver API kodu gerektirecek. Bununla birlikte, yan etkisi, test tarayıcınızın yükünü artırabilmesidir.

İşte C # için bir uzantı işlevi:

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

Şimdi, bunun gibi herhangi bir öğenin görüntüsünü almak için kullanabilirsiniz:

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

Otomatik görsel karşılaştırma için iğne aracını kullanmayı düşünün https://github.com/bfirsh/needle . Araç Selenium'un WebDriver üzerinde çalışır ve Python ile yazılmıştır.

Selenium'da belirli bir öğenin anlık görüntüsünü alma işlevinin altında. Burada sürücü bir tür WebDriver'dır.

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 # kodu:

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

Chrome'da java.awt.image.RasterFormatException bir istisna alırsanız veya bir öğeyi görünüme kaydırmak istiyorsanız bir ekran görüntüsü yakalayın.

İşte @Surya cevabından bir çözüm.

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

Bu benim versiyonum, C # dilinde, temelde Brook'un cevabından en çok pay aldım ve amacıma uyacak şekilde değiştirdim

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

Sanırım buradaki cevapların çoğu aşırı tasarlanmış. Bunu yaptığım yol 2 yardımcı yöntemle oldu, ilk önce herhangi bir seçiciye dayalı bir öğeyi beklemek; ve ikincisi bunun ekran görüntüsünü almak için.

Not: WebElementBir TakesScreenshotörneğe çeviririz, bu nedenle yalnızca görüntüdeki o öğeyi özel olarak yakalarız. Tam sayfayı / pencereyi istiyorsanız, driverbunun yerine yayınlamalısınız.

WebDriver driver = new FirefoxDriver(); // define this somewhere (or chrome etc)

public <T> T screenshotOf(By by, long timeout, OutputType<T> type) {
    return ((TakesScreenshot) waitForElement(by, timeout))
            .getScreenshotAs(type);
}

public WebElement waitForElement(By by, long timeout) {
    return new WebDriverWait(driver, timeout)
            .until(driver -> driver.findElement(by));
}

Ve sonra bunun gibi ne istersen ekran görüntüsünü al:

long timeout = 5;   // in seconds
/* Screenshot (to file) based on first occurence of tag */
File sc = screenshotOf(By.tagName("body"), timeout, OutputType.FILE); 
/* Screenshot (in memory) based on CSS selector (e.g. first image in body
who's "src" attribute starts with "https")  */
byte[] sc = screenshotOf(By.cssSelector("body > img[href^='https']"), timeout, OutputType.BYTES);

Siz C # kullandığınız için bunun sizin için işe yaramayacağına inanıyorum ve benim çözümüm bir Java kitaplığı içeriyor, ancak belki başkaları bunu yararlı bulacaktır.

Özel ekran görüntüleri yakalamak için Shutterbug kitaplığını kullanabilirsiniz. Bu amaç için özel çağrı şöyle olacaktır:

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

@Codelord'daki örnek kodu takip ettim, ancak bazı nedenlerden dolayı ekran görüntüsü verilerime farklı şekilde erişmek zorunda kaldım:

 # 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()

(Python 3.7, Selenium 3.141.0 ve Mozilla Geckodriver 71.0.0.7222 kullanarak)

@ Brook'un yanıtının değiştirilmiş bir sürümünü kullanıyorum ve sayfanın kaydırılması gereken öğeler için bile iyi çalışıyor.

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

İki ifs gerekliydi (en azından krom sürücüsü için), çünkü kaydırma gerektiğinde, kırpma boyutu ekran görüntüsü boyutunun 1 pikselini aşıyordu.