Chrome mobile emulation screenshooting with Ashot problem

I have a task to make screenshots of mobile version of web pages.

I took Selenide and Ashot for that. In desktop view all correct. But in mobile emulation view of page, there is some probles. It shows one picture, but captures another. Maybe someone know another solution, or how to fix that problem ?

public class ChromeMobileEmulation implements WebDriverProvider {
    @Override
    public WebDriver createDriver(DesiredCapabilities desiredCapabilities) {

        Map<String, String> mobileEmulation = new HashMap<>();
        mobileEmulation.put("deviceName", "iPhone X");

        ChromeOptions chromeOptions = new ChromeOptions().setHeadless(true);
        chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation);
        chromeOptions.addArguments("--diagnostics", "--disable-blink-features");
        WebDriverManager.chromedriver().setup();

        return new ChromeDriver(chromeOptions);
    }

    @BeforeAll
    public static void setUp() throws IOException {
        propertyLoader();
        createFolders();

        SelenideLogger.addListener("allure", new AllureSelenide().screenshots(true).savePageSource(false));
        Configuration.browser = System.getProperty("browser");
        Configuration.timeout = 10000;

        RestAssured.filters(new AllureRestAssured());

        chromeMobile = new SelenideDriver(new SelenideConfig()
                .browser(ChromeMobileEmulation.class.getName())
                .headless(true)
                .browserSize("375x812"));
    }

    private Screenshot capturePage(int scrollTime) {
        return new AShot().shootingStrategy(viewportPasting(scrollTime)).takeScreenshot(getWebDriver());
    }

    protected void capturePageToVault(String pageName, String url, SelenideDriver driver, int scrollTime) throws IOException {
        driver.open(url);

        expected = capturePage(scrollTime, driver.getWebDriver());

        ImageIO.write(expected.getImage(), "png", expectedImg(pageName));

    }
}





WORKING SOLUTION FOR ME
private Screenshot capturePage(int scrollTime, WebDriver driver) {
        return new AShot()
                .coordsProvider(new WebDriverCoordsProvider())
                .shootingStrategy(viewportPasting(scaling(3), scrollTime))
                .takeScreenshot(driver);
    }

If you do receive screenshots, it's a good sign - your code at least works. You have not provided enough information (screenshot, element coordinates, etc), but I believe that you have problem with Scaling strategy.

When this issue happens and how it looks like:

When you make screenshots on a new device, it may happen, that taken screenshots "captures wrong coordinates". In my experience, that happened, when I executed tests on Macbook Retina display, and compared to screenshot from non-retina display, or executed code on Macbook, but browser was opened on non-retina display.

I'm not an expert in displays (I hope someone will explain that better), but I believe that this issue happens due to one of the following reasons: different monitor resolution (how many pixels you have on one or another monitor) OR ppi ratio (pixel per inch).

Soluiton:

I suggest you to get element coordinates and compare it to coordinates of the taken screenshot. If you see some common multiplier, for example "my screenshot is twice as big as element", than you should set scaling strategy:

new AShot()
  .shootingStrategy(ShootingStrategies.scaling(2))
  .takeScreenshot(webDriver);

Probably your problem is similar to: Selenium: Not able to take complete page screenshot using aShot library