Chrome移动端仿真模式下Selenide+AShot截图异常求助

问题描述 #

我在实现网页移动端版本的截图功能时，采用Selenide与AShot工具组合完成。桌面视图下截图一切正常，但在Chrome启用iPhone X设备仿真的无头模式中，出现了页面显示内容与实际截取的截图不一致的问题——截图内容和页面实际渲染的内容完全不匹配。

问题代码示例 #

以下是我最初的实现代码：

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

有效解决方案 #

经过调试，我修改了capturePage方法，加入了坐标提供者并调整了拍摄策略的缩放参数，问题得以解决：

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

方案说明 #

• WebDriverCoordsProvider：指定使用WebDriver原生的坐标获取方式，避免AShot默认的坐标计算逻辑在移动端仿真环境中出现偏移，确保元素位置识别准确。
• scaling(3)：匹配iPhone X设备的像素比（iPhone X的设备像素比为3），让截图时的视图缩放比例和页面实际渲染的缩放比例完全一致，解决了内容错位、显示不全的核心问题。
• 保留viewportPasting(scrollTime)：确保长页面可以通过滚动拼接出完整的全屏截图。

内容的提问来源于stack exchange，提问作者Boris