企业官网建设流程全解析

aShot十大实战案例清单：UI自动化测试常见截图场景全攻略

【免费下载链接】ashotWebDriver Screenshot utility. Take screenshots, crop, prettify, compare项目地址: https://gitcode.com/gh_mirrors/as/ashot

aShot 是一款专为 UI 自动化测试打造的 WebDriver 截图工具（Java + Selenium）。它能在桌面浏览器、iOS 模拟器、Android 模拟器上完成四件大事：元素截图、整页截图、截图美化（裁剪/模糊/缩放/旋转）和像素级截图比对。下面 10 个实战案例，覆盖了日常测试中最常见的截图场景，照着做就能直接用。

一、30秒上手：一个 Maven 依赖搞定

先在pom.xml中加入依赖（发布在 Maven Central）：

<dependency> <groupId>ru.yandex.qatools.ashot</groupId> <artifactId>ashot</artifactId> <version>1.5.4</version> </dependency>

核心入口只有一个类AShot，它采用流式 API：坐标提供器（coordsProvider）、裁剪器（imageCropper）、截图策略（shootingStrategy）都可以链式配置，定义见src/main/java/pazone/ashot/AShot.java。

二、十大实战案例清单 📸

案例1：快速截取某个 WebElement 的元素截图

最简单的用法——告诉 aShot 要截哪个元素即可。它内部分三步：截整页 → 定位元素坐标 → 裁出元素区域。

WebElement el = webDriver.findElement(By.cssSelector("#my_element")); new AShot().takeScreenshot(webDriver, el);

图：aShot 元素截图效果，目标区域保留清晰，周边内容自然过渡

案例2：移动端整页截图（视口滚动拼接）

Chrome 等桌面浏览器能一次截全页，但手机浏览器只截"视口"。aShot 的viewportPasting策略会自动滚动页面、逐屏拍摄再无缝拼接，拍完还会恢复到原来的滚动位置：

new AShot() .shootingStrategy(ShootingStrategies.viewportPasting(100)) .takeScreenshot(webDriver);

图：iPhone 移动浏览器整页截图：多次半视口滚动后拼接成完整长图

案例3：用 Chrome DevTools 协议一步截全页（推荐 Chrome 用户）

Chrome 系浏览器支持 CDP 协议，可以直接让浏览器"越界"截图，无需滚动拼接，更快更稳。策略类见src/main/java/pazone/ashot/CdpShootingStrategy.java：

new AShot() .shootingStrategy(new CdpShootingStrategy()) .takeScreenshot(webDriver);

案例4：元素截图加"高亮边框"——缩进+模糊滤镜

默认裁剪器DefaultCropper只裁不修饰。换成IndentCropper就能在元素四周保留一圈"缩进"，并用模糊滤镜把周边内容虚化，让被测元素一眼突出：

new AShot() .withCropper(new IndentCropper().addIndentFilter(blur())) .takeScreenshot(driver, yandexWeatherElement);

图：aShot 缩进模糊美化效果，天气模块清晰突出，四周内容自动模糊

案例5：多个独立元素组合截图（头部+弹窗）

有时页面上有两个互不相连的独立元素（比如顶部导航 + 弹出的弹窗）。直接传入一个元素集合，aShot 会计算复杂比对区域，只聚焦并比对这些元素：

List<WebElement> elements = webDriver.findElements(By.cssSelector("#my_element, #popup")); new AShot() .withCropper(new IndentCropper().addIndentFilter(blur())) .takeScreenshot(webDriver, elements);

图：多元素组合截图，仅指定的头部与弹窗区域清晰聚焦

案例6：自动裁掉移动浏览器的顶部导航与底部工具栏

移动端截图常常带着浏览器自身的头/尾（见下图红框），污染比对。aShot 内置裁剪策略，一行配置即可裁掉固定高度的头尾：

new AShot() .shootingStrategy(ShootingStrategies.cutting(98, 46)) // 头98px、尾46px .takeScreenshot(webDriver);

图：iPad Safari 截图需裁掉浏览器头部（红框区域）后再进行比对

案例7：Retina 高清屏截图自动缩放

Retina 屏截图像素是 CSS 像素的 2 倍，与模板图尺寸不一致会导致比对全挂。scaling策略按 DPR（设备像素比）自动缩放：

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

案例8：iPad 横屏截图自动旋转

iPad 横屏时截图方向不对？iPadLandscapeOrientation策略会在滚动拼接的同时自动把横图旋转回正常方向。针对 iPad + iOS 的各种组合，ShootingStrategies（src/main/java/pazone/ashot/ShootingStrategies.java）还提供了iPad2WithIOS8、iPad2WithIOS8Retina等开箱即用的预设，直接传参即可。

案例9：截图比对 + 忽略"天然会动"的元素

takeScreenshot()返回的Screenshot对象自带比对数据。对闪烁广告、倒计时这类动态内容，先声明忽略区域，再交给ImageDiffer比对：

Screenshot expected = new AShot() .addIgnoredElement(By.cssSelector("#weather .blinking_element")) .takeScreenshot(driver, element); ImageDiff diff = new ImageDiffer().makeDiff(expected, actual); BufferedImage marked = diff.getMarkedImage(); // 差异点已标注

比对核心（逐像素、默认颜色容差 15）见src/main/java/pazone/ashot/comparison/ImageDiffer.java。

案例10：忽略指定颜色像素，做稳定的视觉回归

在模板图中把"不稳定区域"涂成统一的洋红色（MAGENTA），比对时直接忽略该颜色，即可精准跳过动画、轮播图：

ImageDiffer differ = new ImageDiffer().withIgnoredColor(Color.MAGENTA); ImageDiff diff = differ.makeDiff(template, actual); assertFalse(diff.hasDiff());

三、常见问题速查 ✅

默认坐标提供器是 jQuery 实现（src/main/java/pazone/ashot/coordinates/JqueryCoordsProvider.java），兼容性好；如需定制，可实现CoordsProvider接口自行扩展。

四、写在最后

aShot 的设计核心是策略 + 装饰器：简单截图（SimpleShootingStrategy）、滚动拼接、裁剪、缩放、旋转各自独立，可以像搭积木一样任意组合。10 个案例基本覆盖了 UI 自动化测试中"截什么、怎么截、怎么比"的全部常见需求，收藏这一篇就够了。

【免费下载链接】ashotWebDriver Screenshot utility. Take screenshots, crop, prettify, compare项目地址: https://gitcode.com/gh_mirrors/as/ashot