1
Object-fit 和位置
检测图片填充容器方式的变化：cover、contain、fill 和 object-position 调整。
25 测试用例
图片与 SVG
图像与矢量图形承载着站点视觉识别的关键部分：商品照片、插画、图标、logo、仪表盘中的业务图示。该类别的回归可能表现为照片处出现一个损坏的图标、一张拉伸到面孔变形的 banner、CSS filter 修改后 logo 颜色发生变化，或自动构建优化过程中 SVG 路径被改动。业务影响是直接的：访客无法购买他无法看到的商品，操作员无法解读比例已变的图表，显示损坏资源的站点立即失去信誉。常见原因是资源目录结构的重组使部分路径失效、为某个特例修改的 max-width 规则被传播到所有图像、容器比例的更改导致视觉拉伸，或为解决某个独立场景而调整的 object-fit 在别处影响了构图。全局应用的 CSS filter 与协调不当的 clip-path 进一步增加了难以预见的复杂性。Delta-QA 比较包含这些视觉资源的页面的完整截图，并报告渲染发生变化的区域：损坏的图标、内容溢出、变形、filter 修改、被改动的 SVG 路径。视觉报告精确定位每张受影响的图像，使 QA 团队无需手动浏览每个商品页、每个编辑页和每个组件，即可验证每次上线后资源加载与显示是否正常，确保视觉回归测试的全面覆盖。
我们检测什么
2
CSS 滤镜
监控 blur、brightness、contrast、grayscale、hue-rotate、saturate、sepia 和 drop-shadow 滤镜。
3
SVG 修改
捕获 SVG 路径变化、fill/stroke 颜色修改和 viewBox 调整。
4
Clip-path 变化
检测使用 circle()、ellipse()、polygon() 和 inset() 函数的 clip-path 形状修改。
5
背景图片
跟踪 background-image、background-size、background-position 和 background-repeat 变化。
实际场景
🎯
加载不了的产品图片
一位开发者重新组织了资源文件目录，破坏了部分产品图片的路径。浏览器显示损坏图标或纯文本替代文字。客户看到"photo-produit-123.jpg"而不是产品照片——没人会购买看不到图片的商品。重构改动的是文件结构，不是代码——没人重新视觉测试产品详情页。Delta-QA 对比截图，立刻检测到照片位置出现了损坏图标。
⚠️
溢出的图片
一位开发者为特殊情况修改了 max-width 规则，由于 CSS 级联效应，网站所有图片都失去了尺寸限制。一张 2000px 宽的图片溢出了容器，出现了水平滚动条——布局被破坏，尤其在移动端。开发者测试了他的特殊场景，没检查使用同一规则的其他 15 个模板。Delta-QA 对比截图，高亮溢出的图片和出现的水平滚动条。
💡
改变的宽高比
一位开发者修改了首页横幅容器的尺寸，图片宽高比从 16:9 变成了 4:3。图片被拉伸：人脸变形，logo 被压扁——访客看到的是业余的图片，而不是精心制作的横幅。改动的是容器而非图片——开发者没有检查视觉效果。Delta-QA 对比截图，高亮变形——比例的改变在差异图中清晰可见。