aShot十大实战案例清单UI自动化测试常见截图场景全攻略【免费下载链接】ashotWebDriver Screenshot utility. Take screenshots, crop, prettify, compare项目地址: https://gitcode.com/gh_mirrors/as/ashotaShot 是一款专为 UI 自动化测试打造的 WebDriver 截图工具Java Selenium。它能在桌面浏览器、iOS 模拟器、Android 模拟器上完成四件大事元素截图、整页截图、截图美化裁剪/模糊/缩放/旋转和像素级截图比对。下面 10 个实战案例覆盖了日常测试中最常见的截图场景照着做就能直接用。一、30秒上手一个 Maven 依赖搞定先在pom.xml中加入依赖发布在 Maven Centraldependency groupIdru.yandex.qatools.ashot/groupId artifactIdashot/artifactId version1.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.javanew AShot() .shootingStrategy(new CdpShootingStrategy()) .takeScreenshot(webDriver);案例4元素截图加高亮边框——缩进模糊滤镜默认裁剪器DefaultCropper只裁不修饰。换成IndentCropper就能在元素四周保留一圈缩进并用模糊滤镜把周边内容虚化让被测元素一眼突出new AShot() .withCropper(new IndentCropper().addIndentFilter(blur())) .takeScreenshot(driver, yandexWeatherElement);图aShot 缩进模糊美化效果天气模块清晰突出四周内容自动模糊案例5多个独立元素组合截图头部弹窗有时页面上有两个互不相连的独立元素比如顶部导航 弹出的弹窗。直接传入一个元素集合aShot 会计算复杂比对区域只聚焦并比对这些元素ListWebElement 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 截图需裁掉浏览器头部红框区域后再进行比对案例7Retina 高清屏截图自动缩放Retina 屏截图像素是 CSS 像素的 2 倍与模板图尺寸不一致会导致比对全挂。scaling策略按 DPR设备像素比自动缩放new AShot() .shootingStrategy(ShootingStrategies.scaling(2F)) .takeScreenshot(webDriver);案例8iPad 横屏截图自动旋转iPad 横屏时截图方向不对iPadLandscapeOrientation策略会在滚动拼接的同时自动把横图旋转回正常方向。针对 iPad iOS 的各种组合ShootingStrategiessrc/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());三、常见问题速查 ✅场景解决方案关键类/方法Opera 等驱动执行 JS 异常拿不到元素坐标换用 WebDriver API 取坐标coordsProvider(new WebDriverCoordsProvider())桌面浏览器截不到全页视口滚动拼接策略ShootingStrategies.viewportPasting(100)Chrome 想要最快最稳的全页截图CDP 越界截图CdpShootingStrategy截图带浏览器头尾固定高度裁剪ShootingStrategies.cutting(98, 46)高清屏截图尺寸不一致按 DPR 缩放ShootingStrategies.scaling(2F)动态元素导致比对误报忽略元素/颜色区域addIgnoredElement/withIgnoredColor默认坐标提供器是 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考