Ashot is not taking screenshot of correct element

Question

I am trying to take screenshot of the table given in one webpage. and the same element xpath I am providing in the code however Ashot code is capturing screenshot of some other location.

I have also tried other code of taking screenshot,

Screenshot screenshot = new AShot().takeScreenshot(driver,driver.findElement(By.xpath(webElementXpath)));

but it was giving me error which I was able to fix by reading this link: https://github.com/pazone/ashot/issues/93 and then I used below code:

WebElement myWebElement = driver.findElement(By.xpath("//center/table/tbody/*"));
        Screenshot fpScreenshot = new AShot()
                .coordsProvider(new WebDriverCoordsProvider()).takeScreenshot(driver,myWebElement);

         ImageIO.write(fpScreenshot.getImage(),"PNG",new File("/Users/sanatkumar/eclipse-workspace/com.ScreenshotUtility/Screenshots/error.png"));

Please help as this code is giving me the screenshot of some random part of the webpage. I tried to capture other element as well but again I did not get the correct screenshot:

Please note my table is not fully visible on the webpage, manually I have to scroll down to view full table. do I need to write other code to get full screenshot of the table??

also my website is angular based which I am trying to automate using selenium java. the reason why I am doing this is because in protractor I dint find any API like Ashot. if anybody knows about it please let me know.

Answer 1

By adding a shootingStrategy I was able to capture just the form element with the attribute id = "post-form" at the bottom of this page.

From the documentation at https://github.com/pazone/ashot

Different WebDrivers take screenshots differently. Some WebDrivers provide a screenshot of the entire page while others handle the viewport only.

...

There are built-in strategies in ShootingStrategies for different use cases.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
import javax.imageio.ImageIO;
import java.io.File;

public class Main
{
    public static void main(String args[]) throws Exception
    {
        System.setProperty("webdriver.gecko.driver", "./geckodriver");
        System.setProperty("webdriver.firefox.bin", "/usr/bin/firefox");
        WebDriver driver = new FirefoxDriver();
        driver.get("https://stackoverflow.com/questions/54724963/ashot-is-not-taking-screenshot-of-correct-element");
        Thread.sleep(2000);
        WebElement webElement = driver.findElement(By.id("post-form"));
        Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(100)).takeScreenshot(driver,webElement);
        ImageIO.write(screenshot.getImage(),"PNG",new File("/home/dan/ElementScreenshot.png"));
        Thread.sleep(2000);
        driver.quit();
    }
}

Outputs:

Answer 2

This functionaity is possible with Protractor also by requiring an NPM module like 'protractor-image-comparison'. If you wanted to capture the related posts on the sidebar for instance you could use the following code.

Note: I haven't tested this package out with large elements that extend past the range of the browser viewport so can't say how they will work on those.

Spec File

describe('simple test', () => {
    it('will save image', async () => {
        await browser.get("https://stackoverflow.com/questions/54724963/ashot-is-not-taking-screenshot-of-correct-element");
        await browser.driver.sleep(10 * 1000);

        let related_questions_sidebar = element(by.className('module sidebar-related'));
        await browser.executeScript('arguments[0].scrollIntoView();', related_questions_sidebar);
        await browser.driver.sleep(3 * 1000);

        // saveElement
        await browser.protractorImageComparison.saveElement(related_questions_sidebar, 'sidebar-image');
    });
});

Conf.js- in your OnPrepare

onPrepare: async () => {
    // await jasmine.getEnv().addReporter(new dbReporter());
    const protractorImageComparison = require('protractor-image-comparison');
    browser.protractorImageComparison = new protractorImageComparison(
        {
            baselineFolder: './screen-compare/baselines/',
            screenshotPath: './screen-compare/screenshots/'
        }
    ); 
); 

Image Saved