GUI测试：UI测试用例及示例

由： 托马斯·汉密尔顿 托马斯·汉密尔顿
Hours 更新

⚡ 智能摘要

GUI 测试验证应用程序的每一个可见元素——按钮、菜单、图标、文本框和布局——确保屏幕在真实用户触摸之前，在各种浏览器、设备和屏幕分辨率下都能按照规范运行和显示。

  • 🖥️ 范围： 验证用户可以看到或点击的每个控件的大小、位置、对齐方式、字体、颜色、错误消息和图像。
  • 🎯 商业案例： 用户首先会根据界面来判断一个应用程序，因此，即使底层逻辑完美无瑕，一个令人困惑或损坏的屏幕也会降低用户的接受度。
  • 🧩 五种类型： 功能性、可用性、兼容性、可访问性和视觉性能检查分别回答了关于同一屏幕的不同问题。
  • 🔍 首先列出清单： 构建一个可重用的 GUI 检查清单，涵盖元素几何形状、可读性、分辨率行为、拼写、滚动条和禁用字段。
  • ⚙️ 三种方法： 人工检查、录制和回放捕获以及基于模型的生成，可以预测脚本永远不会达到的不良状态。
  • 🤖 自动重复操作： 编写稳定的、高频回归路径，并将人类测试人员保留用于探索性和经验性判断。
  • 🛡️ 维护保养： 使用稳定的定位器，将测试数据与测试步骤分开，并对屏幕截图进行版本控制，这样即使进行细微的布局更改，也不会破坏每个脚本。
阅读更多

要了解 GUI 测试，我们首先需要了解什么是 GUI。

什么是图形用户界面？

计算机应用程序有两种类型的界面。命令行界面是您输入文本，计算机响应该命令的地方。GUI 代表图形用户界面，您使用图像而不是文本与计算机交互。

以下是可用于用户和应用程序之间交互的 GUI 元素：

GUI 测试是对上述元素的验证。

什么是 GUI 测试？

图形用户界面测试 是一种软件测试类型，用于检查软件的图形用户界面。图形用户界面 (GUI) 测试的目的是通过检查屏幕和控件（如菜单、按钮、图标等）来确保软件应用程序的功能符合规范。

GUI（图形用户界面）是用户所看到的界面。访问 guru99.com，出现的首页就是该网站的 GUI。源代码是隐藏的，只有界面可见。因此，GUI 测试主要关注设计结构以及图像是否正确渲染。

在上图中，GUI 测试首先确认每张图片在不同浏览器中都能完全显示。该页面上的其余检查包括：

  • 链接可用，每个按钮点击后都能正常工作。
  • 调整屏幕大小不会导致图像或文本缩小、裁剪或重叠。
  • 当浏览器窗口变窄时，布局中的任何内容都不会折叠。

💡提示： 在提交任何缺陷报告之前，请先分别以 1920×1080、1366×768 和 375×812 的分辨率运行同一页面。许多“布局错误”的报告实际上只是因为断点未经测试。

GUI 测试的必要性

现在，GUI测试的基本概念已经很清楚了。接下来你可能会想到以下几个问题：

  • 为什么进行 GUI 测试？
  • 真的需要吗？
  • 仅仅测试应用程序的功能和逻辑还不够吗？为什么要在界面上花费额外的时间？

要找到答案，要站在用户的角度思考，而不是站在测试人员的角度。用户并不了解应用程序是如何构建的。决定用户是继续使用还是放弃应用程序的，是界面本身。

普通用户首先会观察应用程序的设计和外观，以及界面是否易于理解。如果用户觉得界面不友好，或者觉得应用程序难以理解，他们就不会再次使用。因此，图形用户界面（GUI）至关重要，必须进行充分的测试，以确保界面没有缺陷。

GUI测试类型

了解界面为何重要只是问题的一半。GUI 测试分为五种类型，每一种都针对同一个界面回答不同的问题。

  • 功能性 GUI 测试： 确认每个控件都能实现其预期功能。与此密切相关 功能测试它会询问按钮是否提交、下拉菜单是否筛选以及字段是否接受有效输入。
  • 可用性测试： 衡量真人完成某项任务的难易程度。 可用性测试 考察导航深度、可读性以及错误信息是否真的有帮助。
  • 兼容性测试： 在不同的浏览器、操作系统和设备尺寸上重复显示相同的屏幕。 跨浏览器测试 捕获仅在一个引擎中出现的渲染错误。
  • 无障碍测试： 根据 WCAG 标准验证键盘导航、屏幕阅读器标签和颜色对比度。 可访问性测试 现在在许多市场，这已成为一项合规要求，而不是一项可选项。
  • 视觉和性能测试： 将渲染后的屏幕截图与基准进行比较，并测量界面绘制和响应的速度以及重叠情况。ping - 性能测试.

大多数团队都会运行这五种功能，但对它们的权重不同：公共网站侧重于兼容性和可访问性，内部仪表板侧重于功能检查。

GUI测试中要检查哪些内容？

以下清单将确保软件测试中的详细 GUI 测试。

  • 检查所有 GUI 元素的大小、位置、宽度、长度以及字符或数字的接受程度。例如，您必须能够向输入字段提供输入。
  • 检查您是否可以使用 GUI 执行应用程序的预期功能
  • 检查错误消息是否正确显示
  • 检查屏幕上不同部分的划分是否清晰
  • 检查应用程序中使用的字体是否可读
  • 检查文本的对齐是否正确
  • 检查字体和警告信息的颜色是否美观
  • 检查图像是否清晰
  • 检查图像是否正确对齐
  • 检查不同屏幕分辨率的 GUI 元素定位。

相关文章

GUI 测试技术

清单制定完成后，下一步就是如何执行清单上的内容。 GUI 测试技术 可以分为三部分：

基于手动的测试

在这种方法下，测试人员手动检查图形屏幕是否符合业务需求文档中规定的要求。

录制和回放

GUI 测试可以使用自动化工具完成。这分为两个部分。在录制阶段，自动化工具会捕获测试步骤。在回放阶段，录制的测试步骤会在被测应用程序上执行。此类工具的示例—— QTP.

基于模型的测试

模型是对系统行为的图形化描述。它帮助我们理解和预测系统行为。模型有助于根据系统需求生成高效的测试用例。下图展示了模型如何驱动测试用例的生成：

基于此模型的测试需要考虑以下几点：

  • 建立模型
  • 确定模型的输入
  • 计算模型的预期输出
  • 运行测试
  • 将实际输出与预期输出进行比较
  • 关于对模型采取进一步行动的决定

可以从中得出测试用例的一些建模技术：

  • 图表——描述系统的状态并在一些输入后检查状态。
  • 决策表——用于确定每个输入结果的表格

基于模型的测试是一种根据需求生成测试用例的不断发展的技术。与上述两种方法相比，它的主要优点是它可以确定 GUI 可能达到的不良状态。

手动与自动化 GUI 测试

这三种技术中有两种是手动的，一种是自动的，这就引出了一个实际问题：每种技术应该放在哪里？ 手动测试 它将人放在屏幕前，因此可以捕捉到尴尬的工作流程、笨拙的措辞和感觉不对劲的动画——这些都是脚本无法做出的判断。

自动化测试 它能够重复执行相同的交互数千次而不会出现疲劳，因此是构建稳定回归测试路径以及在多个浏览器上重复测试同一套件的理想选择。但缺点是维护成本较高：一旦定位器或布局发生变化，自动化的 GUI 脚本就会失效。因此，大多数成熟的团队会采用混合模式，将可重复的操作自动化，并将人工资源用于体验式开发。

因素 手动 GUI 测试 自动化 GUI 测试
最适合 全新屏幕、探索性检查、外观和感觉 稳定的回归测试套件，跨浏览器运行
每周期速度 速度慢，受限​​于测试人员工时 速度快，夜间无人值守运行。
预付费 低 高（脚本和框架设置）
维护 除了更新检查清单之外，没有其他变化。 界面变化时意义重大
捕捉主观问题 是 没有

GUI 测试用例示例

GUI 测试基本上涉及

  1. 测试元素的大小、位置、宽度、高度。
  2. 测试所显示的错误消息。
  3. 测试屏幕的不同部分。
  4. 测试字体是否可读。
  5. 借助放大和缩小功能测试不同分辨率的屏幕，如 640 x 480、600×800 等。
  6. 测试文本和其他元素（如图标、按钮等）的对齐是否在适当的位置。
  7. 测试字体的颜色。
  8. 测试错误信息、警告信息的颜色。
  9. 测试图像是否清晰。
  10. 测试图像的对齐。
  11. 测试拼写。
  12. 用户在使用系统界面时一定不能感到沮丧。
  13. 测试接口是否处于……状态trac不管是不是。
  14. 如果有的话，根据页面大小测试滚动条。
  15. 测试禁用的字段（如果有）。
  16. 测试图像的尺寸。
  17. 测试标题是否正确对齐。
  18. 测试超链接的颜色。

演示：如何进行 GUI 测试

当上面的列表应用到实际屏幕上时，会变得更加清晰，因此在这里我们将使用一些示例测试用例来演示以下对话框。

以下是测试用例示例，其中包含用户界面 (UI) 和可用性测试场景。如果您是编写测试用例的新手，请参阅相关文档。 如何编写测试用例 隐形价值。

测试用例 01 – 确认带有标签“源文件夹” 已正确对齐。

测试用例 02 – 确认带有标签“小包装” 已正确对齐。

测试用例 03 – 确认标签名称为“浏览”是位于文本末尾的按钮Box 名称为“源文件夹设立的区域办事处外，我们在美国也开设了办事处，以便我们为当地客户提供更多的支持。“

测试用例 04 – 确认标签名称为“浏览”是位于文本末尾的按钮Box 名称为“小包装设立的区域办事处外，我们在美国也开设了办事处，以便我们为当地客户提供更多的支持。“

测试用例 05 – 确认带有标签“姓名” 已正确对齐。

测试用例 06 – 确认标签“修饰符”由 4 个单选按钮组成，名称分别为 public、default、private、protected。

测试用例 07 – 确认标签“修饰符”由 4 个单选按钮组成，这些按钮排列成一行，排列整齐。

测试用例 08 – 确认标签“超类标签下的修饰符” 由一个必须正确对齐的下拉菜单组成。

测试用例 09 – 确认标签“超类”由一个带有标签“浏览” 必须正确对齐。

测试用例 10 – 确认单击任何单选按钮后，默认鼠标指针必须更改为手形鼠标指针。

测试用例 11 – 确认用户不能在“超类设立的区域办事处外，我们在美国也开设了办事处，以便我们为当地客户提供更多的支持。“

测试用例 12 – 确认如果误选了某些内容，必须生成正确的错误信息。

测试用例 13 – 确认所有需要的地方都必须以红色显示错误信息。

测试用例 14 – 确认错误信息中必须使用正确的标签。

测试用例 15 – 确认每次都必须默认选中单个单选按钮。

测试用例 16 – 确认跳转时 TAB 按钮能够正常工作ping 在上一字段旁边的另一个字段上。

测试用例 17 – 确认所有页面都必须包含正确的标题。

测试用例 18 – 确认页面文本已正确对齐。

测试用例 19 – 确认更新任何字段后都必须显示正确的确认消息。

测试用例 20 – 确认只能选择一个单选按钮，但可以选择多个复选框。

GUI 测试中的挑战

编写这些案例很简单；保持ping 让它们在多个版本中保持存活并非易事。在软件工程中，最常见的问题是…… 迭代测试 问题是应用程序 GUI 经常更改。很难测试并确定这是问题还是增强功能。当您没有关于 GUI 更改的任何文档时，问题就会显现出来。

⚠️警告： 通过屏幕坐标或自动生成的 ID 定位元素的脚本在下次构建时将会失败。请将定位策略视为设计的一部分，而不是事后添加的。

GUI 测试工具

合适的工具可以吸收大部分的损耗。以下是一些常用的工具。 GUI 测试工具 :

  1. Selenium
  2. QTP
  3. Cucumber
  4. Silk测试
  5. TestComplete
  6. Squish GUI 测试器

点击这里学习 Selenium, QTP & Cucumber.

以下是可用于进行自动化 UI 测试的开源工具。

产品 许可下
AutoHotkey GPL
Selenium Apache (阿帕奇)
西库利 麻省理工学院简介
机器人框架 Apache (阿帕奇)
水 BSD
Dojo工具包 BSD

西库利 基于图像，当控件没有可靠的定位器时非常有用； Selenium 仍然是默认值 Web应用程序测试.

常见问题

是的。现代工具会读取需求或扫描渲染后的屏幕，并生成包含字段、按钮和验证信息的候选用例。但测试人员仍然需要审核这些用例，因为人工智能无法判断哪些屏幕存在真正的业务风险。

自愈引擎为每个元素存储多个属性。当定位器出现故障时，该工具会匹配剩余属性，修复引用并标记更改。使用该工具的团队 Selenium 经过外观重新设计后，套件的误报率大大降低。

图形用户界面 (GUI) 测试旨在检验界面是否正确：例如对齐方式、标签、颜色以及控件的行为是否符合预期。可用性测试则检验界面是否易于使用，衡量用户完成任务所需的时间。可用性测试是 GUI 测试的一种类型。

GUI 测试是一个黑盒测试。测试人员仅根据可见界面和需求进行工作，无需阅读源代码。它通常在系统测试期间进行，在单元测试和集成测试验证了底层逻辑之后。

每次构建时运行一组简短的关键屏幕测试，并在每晚或每次发布前运行完整的测试套件。诸如此类的工具 UFT 安排无人值守运行，这样夜间执行几乎不需要测试人员的时间。

总结一下这篇文章：