Chrome 手机仿真截屏有Ashot问题

Question

我有个任务要做手机版网页截图。

为此我选择了 Selenide 和 Ashot。在桌面视图中一切正确。但是在页面的移动仿真视图中，存在一些问题。它显示了一张照片，但捕获了另一张照片。也许有人知道另一种解决方案，或者如何解决该问题？

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

Answer 1

如果您确实收到了屏幕截图，这是一个好兆头 - 您的代码至少可以正常工作。您没有提供足够的信息（屏幕截图、元素坐标等），但我相信您的缩放策略有问题。

这个问题发生的时间和情况：

当您在新设备上截屏时，可能会发生截屏 "captures wrong coordinates"。根据我的经验，当我在 Macbook Retina 显示器上执行测试并与非 Retina 显示器的屏幕截图进行比较，或者在 Macbook 上执行代码，但浏览器在非 Retina 显示器上打开时，就会发生这种情况。

我不是显示器方面的专家（我希望有人能更好地解释这一点），但我认为这个问题的发生是由于以下原因之一：不同的显示器分辨率（一个或一个显示器上有多少像素）另一台显示器）或 ppi 比率（每英寸像素）。

解决方案：

我建议您获取元素坐标并将其与截取的屏幕截图的坐标进行比较。如果您看到一些常见的乘数，例如 "my screenshot is twice as big as element"，那么您应该设置缩放策略：

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

您的问题可能类似于： Selenium: Not able to take complete page screenshot using aShot library

Chrome 手机仿真截屏有Ashot问题

Chrome mobile emulation screenshooting with Ashot problem

java

google-chrome

webpage-screenshot

selenide

ashot