java - Chrome 移动模拟屏幕截图出现 Ashot 问题

Question

我的任务是制作手机版网页的屏幕截图。

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

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

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

此问题发生的时间及其外观:

当您在新设备上进行屏幕截图时，可能会发生屏幕截图“捕获错误的坐标”的情况。根据我的经验，当我在 Macbook 视网膜显示屏上执行测试，并与非视网膜显示屏的屏幕截图进行比较，或在 Macbook 上执行代码，但浏览器是在非视网膜显示屏上打开时，就会发生这种情况。

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

解决方案:

我建议您获取元素坐标并将其与截图的坐标进行比较。如果您看到一些常见的乘数，例如“我的屏幕截图是元素的两倍”，那么您应该设置缩放策略:

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

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