NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割
当使用嵌入式 3D 引擎或任何其他与生成和处理计算机图形相关的应用程序进行测试时，常规功能是不够的。 还需要验证应用程序的视觉外观，对其设计和布局进行全面评估。
例如，在开发用 Unity 3D 编写的游戏时，质量保证部门应评估所有游戏级别的逻辑，以确保不存在矛盾和意外行为。 然而，这一切并不涉及 3D 角色和环境的显示方式、灯光是否按预期反射，或者缩放对象在重新启动关卡时是否保留这些值。
事实上，很多场景是常规测试无法覆盖的。
上面描述的所有内容都是可视化测试能够处理的示例。
但为什么我们不能简单地关注此类应用程序的视觉方面，而不是花更多的时间来涵盖所有这些场景呢？ 嗯，这是一个非常好的观点。
考虑到开发、维护和额外运行的高成本等一系列因素，可以认为不值得这么麻烦。 然而，将所有这些都放在人类身上也会引发许多问题：
- 人为错误：根据设置的失败阈值，自动化脚本将实际图像与参考图像逐像素进行比较——这项任务对人类来说几乎不可行。
- 结果不一致：由于应用程序是由多人测试的，因此视觉测试结果可能会因测试人员的视力和对一项或另一项资产的视觉感知等的特殊性而有所不同。
- 重复回归场景：就像常规手动测试一样，自动化场景使我们能够减少回归检查的时间并专注于其他潜在场景。
- 手动测试的成本：这些成本通常会超过自动化和后续维护的成本。
2、视觉测试可以确保什么
视觉测试可以确保：
- 整个界面页面（所有UI元素，它们的位置，比例，颜色等）
- 视觉 2D/3D 资源，包括 3D 的几何和多边形以及 2D 的矢量结构
- 灯光和阴影（为物体提供不同光源的效果）
- 材质（在当前场景中的对象上渲染材质）
- 用于渲染的特定着色器
所有这些问题最好不要完全取代，但至少可以通过不同百分比的精确计算来补充。
3、如何测试 Web 应用程序
首先，你需要配置 Cypress 项目。 Cypress 是一个多用途自动化框架，它提供了涵盖自动化场景的所有必要工具，包括可视化测试，这是我们今天的议程。
毫无疑问，还有许多其他工具支持可视化测试，但涵盖所有这些工具超出了本文的范围。
3.1 安装Cypress及插件
要安装 Cypress 并配置你的第一个项目，我建议你阅读这篇文章 。
然后根据这个说明安装 cypress-image-snapshot 插件以便进行快照比较。
3.2 添加自定义命令
与本文所述相比，让我们向“commands.js”文件添加一个自定义命令，或者你也可以按照我的方式进行操作 - 创建一个仅专用于你的命令的单独文件。
commands.js ：
Cypress.Commands.add('compareSnapshotWithBaseImage', (options) => {
const nameDir = options?.nameDir;
const element = options?.element;
const fullName = nameDir.replace('cypress/e2e/', '');
return cy
.get(element)
.matchImageSnapshot(fullName);
});在这里，我添加了一个自定义命令 compareSnapshotWithBaseImage。 第一次执行时，它会创建一个具有设定名称的参考图像。 在后续运行期间，它将实际图像与先前捕获的图像进行比较，将其标记为参考，如果它们的差异超过允许的失败阈值，则将差异图像作为输出。
此命令对通过选项参数传递的特定对象进行操作。
3.3 拣选定位器
传递对象的定位器而不是对象本身很重要。 就我而言， canvas.getCanvasSelector() 返回以下字符串： "canvas#3DCanvas"。 只是提醒你，可以从开发控制台 (F12) 的检查器 (Firefox) 和元素 (Chrome) 选项卡中提取定位器。
当点击左上角的鼠标光标时，你就处于拾取元素模式。
将光标移到目标元素上（在我的例子中，它是 3D 画布），然后单击它。
以下是在开发控制台中找到的定位器的示例：
要让 Cypress 了解此元素，有两种选择：
- 我们需要识别元素（画布）的类型。 使用井号标签 (#) 将字符串与元素的 id (3DCanvas) 连接起来。 结果字符串是“canvas#3DCanvas”。
- 或者，你可以简单地使用元素的 id，前面加一个点“.3DCanvas”。
3.4 调用比较函数
因此，我可以使用以下语法从代码的任何部分调用比较函数：
And('I compare 3D scene with the reference image', () => {
const specName = Cypress.spec.relative + '/';
cy.wait(2000);
cy.compareSnapshotWithBaseImage({
nameDir: specName + 'canvas_img',
element: canvas.getCanvasSelector(),
});
});3.5 测试结果
一旦调用该函数，该测试的第一次运行总是会通过，因为Cypress无法找到具有指定名称和路径的文件并创建一个新文件。
这是我第一次运行后的结果：
捕获 3D 场景及其所有控件和摩托车模型的实际图像作为参考图像。 在这个场景中，我正在检查改变方向光强度如何影响 3D 摩托车的外观。
正如你所看到的，我的场景中有多个光源，因此下次运行将确保更改整个场景的定向光不会影响这些点光源。
这些验证的组合也是可能的，并且可以节省构建运行时间。 例如，可以结合改变灯光和设置对象的变换（旋转、位置、缩放）。
不要将太多功能合并到一个功能中，因为这会使调试更加困难，并且如果失败，运行测试的效率也会降低，比方说，在更改灯光验证时，在灯光修复之前，你永远不会知道设置转换是如何工作的。
现在，我们来模拟一下设置光强不正常的情况。 为了演示这个“bug”，我将光强度值从 1.2 更改为 0.6，以获得更暗的摩托车图像。
然而，我们记得 Cypress 会与上面捕获的参考图像进行比较，这是一个更亮的图像。 让我们看看这次测试运行后我们得到了什么。
左侧较亮的图像是参考图像，右侧图像是最新运行中捕获的实际图像。 中间的图像是差异图像。 它显示了这两个图像中具体像素的不同之处。
如果你手动比较左右图像，肯定可以看到差异。
然而，这种差异是相当微妙的。 在手动测试过程中，这种损坏的灯很可能会被忽略，而自动测试会发现它们。
4、如何测试桌面应用程序
对于桌面应用程序，我更喜欢使用 Froglogic 公司的 Squish 框架。
根据官方文档，Squish 方法的一个基本方面是 AUT 和执行 AUT 的测试脚本始终在两个单独的进程中执行。 这可以确保即使 AUT 崩溃，Squish 也不会崩溃。 Squish 运行一个小型服务器，squishserver，用于处理 AUT 和测试脚本之间的通信。
测试脚本由squishrunner 工具执行，该工具又连接到squishserver。 smishserver 在设备上启动已检测的 AUT，从而启动 Squish 挂钩。
挂钩到位后，squishserver 可以查询 AUT 对象的状态，并可以代表 squishrunner 执行命令。 squishrunner 指示 AUT 执行测试脚本指定的任何操作。
所有通信都使用网络套接字进行，这意味着一切都可以在一台机器上完成，或者测试脚本可以在一台机器上执行，而 AUT 可以通过网络在另一台机器上进行测试。
下图说明了各个 Squish 工具如何协同工作。
有关如何创建屏幕截图验证的分步指南可以在这里找到，虽然我想更多地关注屏幕截图比较的界面，因为它看起来信息量很大。
4.1 使用验证点查看器
我在 3D 桌面软件上进行了测试，其中我的 3D 模型沿 Y 轴移动。 所以，我的截图验证失败了。 让我们打开验证点看看有什么不同。
为此，请在“测试结果”选项卡上找到有关“验证点失败”的行。 右键单击它，然后选择“查看差异”选项。
第一个“差异”选项卡包含用于分析屏幕截图的所有可用选项。
- 闪烁：交替显示实际图像和参考图像，并用红色轮廓显示差异。
- 减去：删除所有常见像素，仅显示不同的像素。 更改 HSV（色调、饱和度、值）颜色设置以及选中或取消选中“反转”复选框会影响减法的工作方式。
- 灰度差异：与减去模式几乎相同，但它不是突出显示颜色中的所有像素差异，而是重点关注灰度差异。 这意味着它考虑的是灰度的变化而不是颜色的差异。
- 红/绿差异：绝对相同的像素为绿色，实际图像和参考图像之间不同的区域为红色。
- 分割视图：该模式具有可拖动滑块，向右拖动时显示参考图像，向左拖动时显示实际图像（如上图所示）。
除了屏幕截图差异的视觉表示之外，验证点查看器还有一个选项卡，称为“比较模式”。 比较模式对于指定如何将实际应用程序行为与预期行为进行比较至关重要。
它定义了确定验证点是否通过的标准以及可接受的失败阈值。
比较模式还有其他几个选项和设置，但我想更多地讨论颜色直方图。
你可以在此处查看我的 3D 测试模型的直方图。
对于颜色配置文件没有显着变化但对象发生旋转、缩放或变换的情况非常有用，就像我沿 Y 轴移动对象时发生的情况一样。
怎么运行的：
- 将每个像素的每个颜色分量 (RGB) 的颜色范围 (0-255) 除以 Bin（或篮）数，并计算每个 bin 中的像素数。
- 将图像中的像素总数除以每个箱中的像素数以获得标准化值。 这些各自的值被放回到相应的箱中。
- 将所有相应箱的值相互减去并将所得值相加。 该值表示参考图像和实际图像之间的差异。
此模式允许配置 Bins 和允许的失败数，这表示仍被视为“相等”的两个图像之间的最大差异。 设置Bins数量和允许失败的界面如图所示：
5、结束语
长话短说，我希望我能帮助你了解视觉测试在使用视觉资产测试应用程序时发挥着重要作用，例如设计平台、游戏、游戏开发引擎、3D 建模和工程软件。 自动检测大多数视觉缺陷可以减轻“人为因素”的影响并促进进一步分析。
原文链接：3D Engines: A Comprehensive Guide to Automation
BimAnt翻译整理，转载请标明出处
