Selenium save element image

Question

When I was using webBrowser to automate tasks my code to save images was short and clean:

    Image Getmg(WebBrowser webBrowser)
    {
        mshtml.HTMLWindow2 window = (mshtml.HTMLWindow2)webBrowser.Document.Window.DomWindow;
        window.execScript("var ctrlRange = document.body.createControlRange();ctrlRange.add(document.getElementById('captcha-image'));ctrlRange.execCommand('Copy');", "javascript");
        return Clipboard.GetImage();
    }

I was just injecting javascript. Now I am using Selenium and FireFox driver. I've made a method to save images:

private void takeScreenshotOfElement(By elementToFind, string outputFileName) {
    //find element
    IWebElement my_image = driver.FindElement(elementToFind);

    //scrool to element
    Actions moveAction = new Actions(driver);
    moveAction.MoveToElement(my_image);
    moveAction.Perform();

    //take screenshot of full page
    ITakesScreenshot its = (ITakesScreenshot)driver;
    Screenshot screenShot = its.GetScreenshot();

    //convert screenShot to Bitmap
    var ms = new MemoryStream(screenShot.AsByteArray);
    Bitmap image = new Bitmap(Image.FromStream(ms));

    //get element size
    int imageWidth = my_image.Size.Width;
    int imageHeight = my_image.Size.Height;

    //get element position
    RemoteWebElement element = (RemoteWebElement)my_image;
    Point imagePosition = new Point();
    imagePosition.X = element.LocationOnScreenOnceScrolledIntoView.X;
    imagePosition.Y = element.LocationOnScreenOnceScrolledIntoView.Y;

    //crop screenShot
    Rectangle section = new Rectangle(imagePosition, new Size(imageWidth, imageHeight));
    Bitmap final_image = CropImage(image, section);

    //save element image
    final_image.Save(outputFileName);
}

Basically it is working when elementToFing is on the top of browser. Also I can't scroll to this element. When I see elementToFind it is ok. But when this element is out of my view I am getting: 'System.InvalidOperationException' in WebDriver.dll. Do you have any idea how to do it?

To be clear, this code is not working properly:

//scroll to element
Actions moveAction = new Actions(driver);
moveAction.MoveToElement(my_image);
moveAction.Perform();

If I remember correctly, with Firefox you can directly capture the element `((ITakesScreenshot)element).GetScreenshot()`. — Florent B., Oct 06 '17 at 18:22
@FlorentB. unfortunelly this code `Screenshot screenShot = ((ITakesScreenshot)elementToFind).GetScreenshot();` gave me `'System.InvalidCastException' in selenium.exe` — , Oct 06 '17 at 18:32
you need to call it on a `IWebElement` or `RemoteWebElement` and not `By` type. — Florent B., Oct 06 '17 at 18:40

score 2 · Answer 1 · edited Oct 13 '17 at 07:39

2

Use JavascriptExecutor to scroll like this:

((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", my_image);
Thread.sleep(500);

from Scroll Element into View with Selenium

edited Oct 13 '17 at 07:39

iamsankalp89

4,607
2
15
36

answered Oct 06 '17 at 18:05

Dale

1,911
11
18

Selenium save element image

1 Answers1