Web-软件测试-Checklist-应用系列

Web 软件测试 Checklist 应用系列第 1 部分: 数据输入本文为系列文章Web 软件测试 Checklist 应用系列中的第一篇。该系列文章旨在阐述 Checklist（检查清单）在 Web 软件产品测试中的应用，以帮助您了解如何利用 Checklist 这种重要的测试手段，更高效的寻找 Web 产品中的 defect（缺陷）。Checklist 汇集了有经验的测试人员总结出来的最有效的测试想法，可以直接有效的指导测试工作，开阔测试人员的思路，能够快速的发现产品的缺陷并实现较好的测试覆盖，更重要的是该 Checklist 在不同的项目中具有很强的通用性。查看本系列更多内容 | 1 评论：苏 京刚, 软件工程师, IBM2013 年 3 月 21 日1 内容该系列文章分为以下几个部分：1 第 1 部分：数据输入 主要介绍 Checklist 在表格输入、数据验证、数据一致性、日期输入、数字输入、文字字符输入区检查等多个方面的应用。2 第 2 部分：导航和链接主要介绍在 Web 产品的导航和链接中应用 Checklist，以确保 Web 产品中的所有链接和页面可以正常到达。3 第 3 部分：颜色和字体Checklist 在 Web 测试中的重要性Checklist（检查清单）从名字字面意思即可理解，是用于检查的一系列条目。之所以需要 Checklist，是因为人们的记忆会有疏忽，可能遗漏一些需要注意的事项，还因为人们的经验和水平有限，能够思考到的程度有差异，借助 Checklist 可以帮助我们做必要的检查。举例，体检的时候，在体检中心登记之后会给每个人打印一个清单，就是当天需要检查的项目，逐项检查并打勾，就可以避免遗漏；再比如，当我们计划一次旅游时，我们会列举我们旅途中需要用到所有物品的清单，以及旅行前需要完成的各项准备工作。通常，出行前，我们会按照清单逐项检查，比如办签证、订机票、订酒店等，出行前，我们会按照清单逐项打包需要带的东西，比如药品、工具、文件资料、护照签证、机票等等。Checklist 在类似的工作中具有非常重要的价值。为什么 Checklist 可以应用在软件测试中呢？第一，Checklist 可以帮测试人员节省时间，因为很多有效的方法并不需要每个测试人员重新发现，前人已经有了充分的总结，并做了大量的有效性验证；第二，Checklist 可以帮助测试人员避免遗漏，人的记忆是有局限的，难免会有遗漏的地方，通过 Checklist 检查可以有效的防止遗漏。本系列文章就是基于 Checklist 在 Web 软件产品中的应用展开，分几个部分逐渐展开。每篇文章将给出某一个特定方面的 Checklist，并给出具体应用实例。回页首数据输入包含的范畴本文主要介绍数据输入过程中应用 Checklist 进行测试的情况，包含表格输入、数据验证、数据一致性、日期输入、数字输入、数字字符输入等方面。输入类型类型描述表格输入是指在通过 Web 页面输入数据的过程中，有些数据页面包含多个输入框，并呈现为一定的布局排列数据验证用于验证输入的信息是否有效合法，并对非法的信息进行恰当的处理或警告提示数据一致性用于保证输入的数据与存储的、显示的数据是否一致日期输入指输入日期格式的数据，并对输入日期进行有效性检验数字输入是指对仅输入数字，而不能接受字符及其他非法字符的输入数字字符输入既可以包含数字，也可以同时包含字符回页首表格输入 Checklist表 1. 表格输入 Checklist 总结序号Checklist1.1接收到非法输入时是否能恰当处理？1.2该输入是可选输入还是必填输入？1.3输入超过允许长度的数据1.4页面装载或重装载后默认值1.5组合框中的数据可以正常选择和更改1.6表格是否显示了所有的部分？是否十分正确的排列？文字内容是否处于正确的位置？1.7滚动条是否在需要时出现？1.1 接收到非法输入时是否能恰当处理？一个好的软件，当接收到非法输入时，能够恰当的处理，不能给出不可预知的错误信息。请看下面的例子。图 1. 电子邮件地址和电话号码从图 1 的例子中可以发现，当我们在该页面的邮件地址中输入非法的邮件地址时，产品给出了适当的错误提示，并且当用户将鼠标至于红色错误警示标志之上时，可以得到更加详细的提示窗口，该实例对邮件地址的非法输入给出了恰当的提示。而在该图的电话号码输入框中，我们输入一串字母作为非法输入，而并没有得到任何非法输入警告提示，这是一个软件缺陷。1.2 该输入是可选输入还是必填输入？Web 产品页面上，输入域是必填项还是可选项需要进行验证。有两个方面的验证需要完成 : 第一，必填输入域确实是必须填的，当没有输入时会有错误提示；可选输入域是可以不填的。 第二，确保必填输入域是确实必要的，而可选输入域是非必要的。下面我们提供两个实例。图 2. 可选项邮件地址未输入时报错图 2 的实例中，电子邮件地址为可选输入项，当用户没有填写该项时，产品提示需要输入邮件地址，而这与可选项的定义不符。这是产品的一个缺陷。图 3. 不合理的可选项输入设置图 3 的实例中显示为创建一个群组的窗口页面，该页面上唯一的输入即群组名称，而该群组名称作为群组的唯一标识，是应该为必填输入项的。而这里，产品并未将该输入项作为必填项。当用户不做任何输入，直接点击确定时，一个没有名字的群组将被创建。这是不合理的，是产品的缺陷。1.3 输入超过允许长度的数据正常情况下，每个输入域对输入数据的长度需要进行约束，给出最小长度和最大长度限制。如果用户输入的数据长度超过最大允许长度，程序需要做出恰当处理。例如，测试人员可以创建一个 1,000,000 字节或者更长的字符串，将该字符串输入到输入区域内，并继续后续操作，比如保存或者运行，看程序是否能够给出错误提示或者对字符串长度进行自动截断处理等操作。1.4 页面装载或重装载后默认值当网页产品的页面装载完成以后，页面上显示的初始默认值，需要满足一致性和准确性。一致性是指，每次从不同的路径到达相同页面后，在做进一步操作之前，页面默认值需要保持一致。准确性是指，页面上的默认值需要布局合理，需要使能的按钮和操作都是可用的，需要被禁止的功能要确保不可用。图 4. 初始加载页面图 4 显示的为打开一个用户配置文件页面，该页面打开后在不做任何更新的情况下，保存和取消按钮处于使能状态。而实际上此时点击两个按钮是没有意义的，因为根本没有任何信息的更新，不需要保存也不需要取消。这是产品的一个缺陷，正确的处理方法是在初始加载页面上禁止两个按钮的工作，使其处于禁止状态。1.5 组合框中的数据可以正常选择和更改组合框中的数据需要保证所有的列表内容都可以被正常选择到，同时在已选择一项时可以更改为另外一项内容。下面的例子中将演示一个组合框的缺陷。图 5. 组合框缺陷实例图 5 的例子中，左侧图显示的是初始状态下组合框的列表内容，默认选择的是 Custom Group, 展开列表后可以看到 Search Results。右侧图显示的是，当更改列表选择到 Search Results 后，再次展开选择列表，列表中不能看到另外的选项 Custom Group，这是产品的一个缺陷。产品需要确保不同时期都可以看到所有的列表选项内容。1.6 表格是否显示了所有的部分？是否十分正确的排列？文字内容是否处于正确的位置？一个表格需要多个部分，首先需要确保所有的部分都存在，并且他们都正确的排列在页面上，还需要保证文字的内容位置是合理的。图 6. 表格内容排列未对齐的例子如图 6 所示，在图中所示的表格中，不同组件的排列不齐，左边属性名称和右边的属性值输入域应该是水平对齐的。这里是产品的一个缺陷。1.7 滚动条是否在需要时出现？滚动条的作用是为了保证当页面待显示内容超过显示区域尺寸时，可以通过拖动滚动条来看到显示区域之外的内容。而软件产品有时未能对该情况进行合理的处理。下图是我们测试中遇到的一个网页产品缺陷。图 7. 滚动条缺失如图 7 所示，注意红色圈内位置有一个未显示完全的按钮，其实下方还有其他更多内容，该部分内容已经超出显示区域的范围，应该在右侧有一个垂直滚动条使用户能看到下方的内容。这里垂直方向滚动条的缺失为产品的缺陷。回页首数据验证 Checklist序号Checklist2.1任何时候当输入非法数据时，系统都不能表现糟糕2.2如果用户在产品使用过程中删除 cookie 会有什么后果？2.3如果用户在使用产品后删除 cookie 会有什么后果？2.1 任何时候当输入非法数据时，系统都不能表现糟糕尽管软件产品设计的目的不是仅为了接收非法数据输入，但是产品需要确保当得到非法数据时依然不会表现的很糟糕，而依然应该做出恰当的处理。非法数据的类型分为很多种，包括数据长度、数据的大小、数据中的非法字符、数据输入的顺序等方面。2.2 如果用户在产品使用过程中删除 cookie 会有什么后果？Cookie 是产品为了识别用户身份、保存用户配置信息、进行会话跟踪等而保存在本地终端上的数据。产品设计需要保证在用户使用过程中，如果用户删除 cookie，产品依然处理得当，不会有太糟糕的、不可预知的行为出现。2.3 如果用户在使用产品后删除 cookie 会有什么后果？如果用户在使用产品之后删除 cookie，当用户再次访问产品时，需要保证产品依然做出恰当的处理，不会有出乎意料的动作发生。回页首数据一致性 Checklist表 3. 数据一致性 Checklist 总结序号Checklist3.1检查输入最大字符长度时显示、工作是否正常3.2验证数字输入域是否接受负值及接受负值是否合理3.3确保数据保存之后所有的数值在数据库中都得到完整的保存3.1 检查输入最大字符长度时显示、工作是否正常每个输入域都有自己的输入字符长度限制，当输入长度达到最大长度时，需确保产品显示和工作都正常。通常情况下，属于最大长度字符时，给页面的显示难度带来很大挑战，因为此时需要在有限的页面显示的内容最多。以下实例显示了一个最大长度显示相关的产品缺陷。图 8. 最大长度输入时显示缺陷如图 8 所示的例子中，当名字和姓氏都输入达到最大长度时，保存之后显示框中无法将两部分内容完整的呈现，并且没有水平滚动条辅助显示。这是软件产品的一个显示缺陷。3.2 验证数字输入域是否接受负值及接受负值是否合理数字数与区域有些情形下是不应该接受负值输入的，此时如果处理不当，当有负值输入时，将会有不可预知的情况出现。如果允许接受负值，测试对负值的处理是否正确也是测试中重要的一个方面。3.3 确保数据保存之后所有的数值在数据库中都得到完整的保存在产品页面上对数据进行保存之后，需要确保所有数值都完整的保存到了数据库中。从不同途径访问到相同的数据都是一致的、同步的。为了验证这一点，测试人员需要尝试在保存之后重新打开并查看显示，看是否跟保存之前的数据完全一致，同时努力从不同的路径访问和应用相同的输入， 验证是否能得到一致的结果。回页首日期输入 Checklist表 4. 日期输入 Checklist 总结序号Checklist4.1验证闰年被正确验证并且不引起计算错误4.2网页版权信息中的日期是否已更新？4.1 验证闰年被正确验证并且不引起计算错误闰年是公历纪年中比较特殊的年份，因为该年有 366 天。基本的计算方法是：四年一闰，百年不闰，四百年再闰。因为涉及到日期的输入时，测试人员需要考虑在闰年出现时，产品依然正确的响应。闰年比平年多出来的一天，出现在 2 月的最后一天，即 2 月 29 日。除了闰年需要考虑外，跨年的一天以及整百年的年份也需要加以考虑，因为这些特殊的年份可能会引起不可预知的错误。4.2 网页版权信息中的日期是否已更新？网页的版权信息通常位于 About（关于）页面中，其中记录了产品的名字、公司版权、详细版本信息、版权年份等信息。测试人员需要确保版权信息是及时、准确的，跟产品的实际版本是一致的。回页首数字输入 Checklist表 5. 数字输入 Checklist 总结序号Checklist5.1确保最小、最大值正确处理5.2确保数值输入框的第一个字符位置输入空格时报错5.3确保输入值输入框的最后一个字符位置输入空格时报错5.4确保正号 (+) 和负号 (-) 被正确处理5.5避免除数为 05.6在所有的运算中加入 05.1 确保最小、最大值正确处理对于数字输入域，一般都有自己的最大值和最小值，这两个极值的处理需要特别验证。除了验证最大最小值之外，测试人员最好一起验证比最小值小的值和比最大值大的值是否能被产品恰当处理。举例，在定义一个连接的过程中需要输入一个端口号，该端口号的最小值为 1。而当用户输入端口号为 0 时，可以成功添加该连接。而当用户去验证该连接时，提示端口号 0 是非法的。这是产品的一个缺陷。正确的处理方式是，当用户视图添加端口号为 0 时，就给出错误提示信息，告知用户该端口号是非法的。另外一个需要考察的地方，当输入超出最大最小值时，产品需要给出清晰明确的警告和提示，告知用户正确的范围是什么。下面的例子给出了一个不恰当的错误提示信息。图 9. 数值输入超出范围提示错误不够具体图 9 的例子中，输入的数值超出了允许的范围，但是提示信息非常模糊，看到该提示消息，用户依然不知道该数值的范围应该是多少。这是产品的缺陷，它需要给出更加的明确的信息，使用户一看就能知道数值的有效范围是多少。5.2 确保数值输入框的第一个字符位置输入空格时报错当数值输入框的第一个字符为空格时，该输入已经不再是一个数值，应当做非法输入处理。产品处理过程中，需要给出错误信息。5.3 确保输入值输入框的最后一个字符位置输入空格时报错当数值输入框的最后一个字符为空格时，该输入已经不再是一个数值，应当做非法输入处理。产品处理过程中，需要给出错误信息。5.4 确保正号 (+) 和负号 (-) 被正确处理每个涉及到数值输入的地方，都涉及到一个数值符号的问题。因为数值有正负之分，需要保证产品对正负数的处理都准确恰当。对于能够接受带正号数值的输入框，处理结果应该跟不含符号 ( 默认为正数 ) 的数值输入的结果相同，因为本质上两个数值是相等的 ( 对输入数值的再显示除外，因为单纯显示上，两者相差一个 + 号 )。5.5 避免除数为 0除数为 0 是所有的运算中需要避免的。在软件产品中，如果涉及到除法运算，需要特别注意避免除数为 0 的情况发生。其中包含各种情况下的除数为 0，包括除数为输入值 0，除数为某中间计算结果为 0 等。5.6 在所有的运算中加入 0因为 0 在所有的运算中具有重要的作用，也是一个非常特殊的数值。因此在测试过程中，在所有涉及到的运算中加入 0 值对测试产品具有很好的效果，能测试到较多的与 0 相关的情况。回页首数字字符输入区检查 Checklist表 6. 数字字符输入区检查 Checklist 总结序号Checklist6.1尝试空数据和非空数据6.2尝试输入非法字符和符号6.3尝试合法字符6.1 尝试空数据和非空数据空数据的处理在数据输入测试中，具有非常重要的作用。对空数据的处理方式可能有多重情况：可能是当作用户无输入而采用默认值处理，这时需要验证空数据处理结果和默认值处理结果是否一致；可能把空数据当作非法数据处理，这时候需要验证出现的错误提示是否清楚有效；有时，空数据也作为 0 值处理，这时需要比较空数据的输出结果跟 0 值的处理结果是否一致。6.2 尝试输入非法字符和符号在负面测试中，一个很重要的方面就是对非法字符和符号的测试。通常，一个产品有自己的一套命名规范，对产品中使用的符号哪些是允许的、有效的，都有明确的定义，也就是合法的输入。而合法输入之外的字符和符号，就是非法的。测试人员需要将此类非法字符和符号输入到产品中，看产品是否恰当的处理。拿数据集和成员的名字作为例子。它们有自己完整清晰的命名规范。从合法字符的角度来讲，数据集和成员的名字中，只能采用 26 个英文字母、数字和三个特殊字符 &、#、，同时数字不能出现在数据集名字分段的首个字符或成员名称的首字符。下面一个例子描述的就是关于此方面的一个产品缺陷。图 10. 数据集名字和成员名字中的非法字符输入图 10 中，当用户在数据集名字和成员名字中输入非法字符 $ 和 % 时，产品页面并没有提供警告信息，这是产品的一个缺陷，而该缺陷在后期的数据处理阶段将会暴露出来，因为包含非法字符的名字是无法被主机接受和处理的。6.3 尝试合法字符通常来讲，合法字符的测试是功能测试中最基本的内容。但是，合法字符的测试也包含众多方面。最基本的是简单输入，就是单个合法字符或者字符串的输入。其次，将不同的简单输入组合在一起，可以组成复杂输入。此外，还可以对最大允许字符长度进行测试，甚至多个输入域均取最大允许长度进行测试。回页首总结数据输入是 Web 产品测试中非常重要的一部分，它就好似产品的血液，流淌在产品的每一部分。而数据输入包含很多不同的方面，包括表格输入、日期数字和字符输入，还需要涉及到用户的验证和一致性检查。要想做好所有这些类型的测试和检查，单凭测试人员的经验和记忆是很难给出全面测试的。本文介绍了利用 Checklist 的思想对各数据类型数据点进行最高效的攻击和测试，能非常高效的发现产品的缺陷。Checklist 很好的利用了前人的经验应用到现在的项目中，极大的提高了工作效率，同时可以克服单个测试人员的一些缺点，比如思维的局限性、经验的缺失、思维的疏忽以及记忆的局限性。总之，Checklist 可以最大化测试人员的工作效率，在有限的时间内发现最多的产品缺陷，从而提高产品的质量。第 2 部分: 导航和链接本文为系列文章Web 软件测试 Checklist 应用系列中的第 2 篇，该系列文章旨在阐述 Checklist（检查清单）在 Web 软件产品测试中的应用， 以帮助读者了解如何利用 Checklist 这种重要的测试手段，更高效的寻找 Web 产品中的 defect（缺陷）。Checklist 汇集了有经验的测试人员总结出来的最有效的测试想法，可以直接有效的指导测试工作，开阔测试人员的思路，能够快速的发现产品的缺陷并实现较好的测试覆盖，更重要的是该 Checklist 在不同的项目中具有很强的通用性。该系列文章中，将在每个部分给出具体的有效的 Checklist 并提供相关应用实例，以便于您的理解和应用。查看本系列更多内容 | 0 评论：苏 京刚, 软件工程师, IBM2013 年 7 月 01 日2 内容导航和链接测试包含的范畴在 Web 开发测试中，导航和链接为用户提供了丰富的操作体验，用户可以通过导航和链接实现对各类数据的访问。导航，从基本意义上理解，就是当用户触发该导航操作后，用户界面将被指向当前系统的另外一个目的页面的过程，换句话说，导航实现了在系统内部从一个数据页面到另外一个数据页面的变化过程，这有助于用户更加方便快捷的访问关联的数据内容。链接，在这里我们指的是从 Web 产品内部直接连接到外部目的地址的超链接。对于本文中提到的导航和链接，简单来说，可以这样理解：导航是 Web 产品内部的跳转和移动，链接是从 Web 产品内部对外部地址的访问。回页首导航 Checklist 介绍表 1. 导航 Checklist 总结序号Checklist1.1检查滚动条在需要时是否能正确显示1.2验证网页上的所有操作均可以通过键盘操作完成1.3面包屑导航是否存在？1.4确保在未保存当前页面时离开页面有用户提示信息1.1 检查滚动条在需要时是否能正确显示滚动条的显示在网页导航中的作用非常重要。在需要时，滚动条的恰当显示是必要的。下面通过几个例子来演示滚动条在网页产品中可能遇到的一些缺陷实例。图 1. 冗余的滚动条显示从图 1 中可以看到，该网页窗口中，当前并没有显示任何超出窗口显示范围的内容，但依然显示了水平和垂直两个方向的滚动条。此时，这两条滚动条是多余的，是产品的一个缺陷。图 2. 滚动条在窗口尺寸变化需相应变化通常情况下，滚动条位于一个显示区域的边缘，当位于该边缘的另外一个区域尺寸发生变化时，滚动条的位置也需要随之发生变化。如图 2 中所示，当图中下端的预览窗口尺寸发生变化时，上端的滚动条并未跟随相应的移动到预览窗口的上边界，从而出现了中间的空白区域，此问题是一个产品缺陷。1.2 验证网页上的所有操作均可以通过键盘操作完成考虑到软件产品的用户很广泛，需要保证在仅操作键盘的情况下，依然可以完整的使用网页产品的所有功能。也就是说，用户可以仅用键盘上的操作，比如回车、文本输入、Tab 键、空格等，就可以顺畅的应用产品功能。图 3. 键盘操作无法选择下拉框内容实例图 3 所示，该页面下，当通过键盘 Tab 键将光标移动到框体“Select One”后，当试图通过上下键选择具体下拉列表中的内容时，没有任何反应。应用本条目，既然选择列表项目可以通过鼠标完成，这里也应该可以通过键盘操作完成，此问题为产品的一个缺陷。1.3 面包屑导航是否存在？面包屑导航是指用户在访问过程中能获得当前位于网站中的位置，并知道如何返回。本项 checklist 需要考察页面上显示的位置和路径是否是正确的、有效的，并且不包含冗余信息。图 4. 面包屑导航问题实例如上图 4 中显示，该产品在访问相关数据的过程中，按照用户需求，当用户点击某一个资源时，将显示该资源的信息，并且将其名字显示在顶端的“面包屑”中。但当前显示的页面上，当用户快速连续多次点击该资源时，就会出现多个重复的资源面包屑，但其实真正显示的数据只有一份。这些冗余的显示信息是产品的一个缺陷，将会给用户带来困扰。1.4 确保在未保存当前页面时离开页面有用户提示信息在网页上的用户输入页面，当用户输入了一部分信息之后，如果需要离开当前页面但并没有对数据进行保存，产品需要提示用户当前页面输入的数据没有保存，确认是否需要保存。从用户使用产品的角度来考虑，当用户在一个输入页面输入了大量信息之后，万一出现鼠标的误操作，以致点击到某个按钮而导致离开页面，对于用户来说这属于非常糟糕的体验，在开发过程中应尽量避免此类问题的发生。回页首链接 Checklist 介绍表 2. 链接 Checklist 总结序号Checklist2.1检查站点地图中的所有链接并查看是否存在损坏的链接2.2确保所有链接的目的地址跟标题描述相符2.3确保没有孤儿页面（没有链接指向它）2.4检查所有的网络站点和邮箱地址是否添加了超链接2.5确保光标置于超链接之上时呈现为手形2.6确保所有的链接都带下划线2.7确保相关信息链接出现在内容的底端或者靠近顶端位置2.1 检查站点地图中的所有链接并查看是否存在损坏的链接通常网页中都会提供各种外部链接，以便用户方便的获取相关联的网站以外的信息。我们需要检查所有显示的外部链接，找出其中的损坏的链接并加以修复。图 5. 损坏链接实例如图 5 所示，该页面为点击一个外部链接以后显示的内容，该链接已经被损坏，无法指向正确的页面。2.2 确保所有链接的目的地址跟标题描述相符通常每个超链接都有属于自己的标题描述信息，该描述信息应尽可能清楚简洁的描述它指向的目的地址。我们在开发测试过程中，需要确保该描述和实际目的地址的一致性，以免出现不一致性而导致不好的用户体验。超链接的标题是引导用户点击的第一路标，它的描述是否清楚，关系到用户是否能清晰的理解该链接的作用和目的地址的信息。同时，链接的标题描述中，应尽量简洁，且包含必要的信息提示，尽量避免使用“点击这里”等词语，应使用更有意义的用词。2.3 确保没有孤儿页面（没有链接指向它）我们需要保证产品页面中，不存在孤儿页面，也就是永远没有链接指向它的页面。该类页面对用户来说没有价值，并且是对资源的浪费，在设计阶段需加以避免。2.4 检查所有引用的网络站点和邮箱地址是否添加了超链接正常情况下，所有引用到的网络站点和邮箱地址都需要增加超链接，这样可以保证用户轻易的知道这些站点和邮箱地址是超链接，用户通过点击这些超链接就可以轻易到达不同的目的地址。否则，用户将只能通过复制这些链接和邮箱到浏览器中，这将大大增加操作的复杂程度，给用户带来不便。2.5 确保光标置于超链接之上时呈现为手形当光标置于超链接之上时，这时光标由原图标变为手形，这样有助于提醒用户当前区域为超链接的范围，点击可以触发超链接跳转。如果手形未能恰当显示，将是产品的缺陷。此外，当光标位于可以点击的按钮的上方时，也应该显示为手形图标，以提醒用户现在是可点击跳转区域。图 6. 超链接光标不显示为手形实例 1如上图 6 中所示，当光标处于红圈标记的超链接区域时，并未显示为手形。而用户直接点击鼠标时，则会跳转到描述中提示的目标页面。图 7. 超链接光标不显示为手形实例 2图 7 中显示的是一个帮助按钮的页面，当光标位于帮助按钮上方时，会出现弹出帮助信息提示“点击帮助图标了解更多”。用户此时确实可以通过点击帮助按钮图标跳转到更多帮助页面，但是当光标位于帮助图标上方时，光标并未显示为手形，这也是产品的缺陷。2.6 确保所有的链接都带下划线为了给用户明确的提示，所有的链接都需要带下划线，这样用户在页面上很清楚就可以知道哪里是超链接的范围，哪里不是。当然超链接的字体颜色通常也跟周围不同，访问过的链接和未访问的链接颜色也不同。具体颜色的定义各个产品不尽相同，但所有的链接都有下划线这点是一致的。2.7 确保相关信息链接出现在内容的底端或者靠近顶端位置通常情况下，“相关信息”是用来帮助用户获取对当前页面内容更深入的了解的相关信息，一般位于当前内容页面的底端或者靠近顶端的位置。这样最有利于用户定位和寻找相关信息。设想如果相关信息链接出现在内容中间，将会跟内容中本身自带的超链接发生混淆，用户将难以定位和寻找需要的相关链接。回页首总结导航和链接作为用户使用网页产品的重要工具，是用户直接操作的对象，对用户体验的提升具有重要作用。两者的设计应该力求简练、高效，在提供给用户提供便捷的导航和移动的同时，也力求杜绝各种冗余的信息。本文分别讨论了网页产品中的导航和链接中 Checklist 的应用，并给出了实际测试工作中的一些应用实例，演示了具体产品缺陷出现的场景。本文的目的主要是让网页产品开发人员和测试人员在导航和链接两个方面能尽量提供高效的产品，并依据本文提到的 Checklist 相关条目杜绝相关产品缺陷。第 3 部分: 颜色和字体本文为系列文章Web 软件测试 Checklist 应用系列中的第 3 篇，该系列文章旨在阐述 Checklist（检查清单）在 Web 软件产品测试中的应用， 以帮助读者了解如何利用 Checklist 这种重要的测试手段，更高效的寻找 Web 产品中的 defect（缺陷）。Checklist 汇集了有经验的测试人员总结出来的最有效的测试想法，可以直接有效的指导测试工作，开阔测试人员的思路，能够快速的发现产品的缺陷并实现较好的测试覆盖，更重要的是该 Checklist 在不同的项目中具有很强的通用性。该系列文章中，将在每个部分给出具体的有效的 Checklist 并提供相关应用实例，以便于您的理解和应用。查看本系列更多内容 | 0 评论：苏 京刚, 软件工程师, IBM2013 年 7 月 11 日3 内容颜色和字体测试包含的范畴用户通过使用网页产品获取大量的数据信息，这些信息的显示方式包括图形和文字两大部分。而在向用户呈现图形和文字的过程中，颜色和字体扮演了非常重要的角色。合理恰当的颜色和字体设置可以保证用户以最高效、清晰的方式获取到需要的信息，而如果颜色和字体设置的不恰当，用户将花费更多的时间获取相同的信息量，从而导致用户获取信息的效率下降。本文中，将列举一些 Web 产品开发中需要注意的事项，通过避免这些事项，可以从一定程度上杜绝此类的问题给用户带来的不良体验，从而提高产品的用户满意度。本文也会举例说明一些具体的 Web 产品缺陷实例。回页首颜色测试 Checklist表 1. 颜色测试 Checklist 总结序号Checklist1.1检查超链接的颜色1.2确保所有页面的背景颜色都被测试1.3检查警告消息的颜色是否符合规范1.4确保相似页面的颜色一致1.5确保前景色和背景色是易读的1.6确保不要用红色高亮显示活跃组件1.1 检查超链接的颜色超链接的颜色显示通常呈现三种形式：缺省颜色、有光标时的颜色、访问后颜色，如图 1 所示。图 1. 超链接的三种颜色显示按照以上一致性的要求，可以保证用户在不同的产品之间切换时，能有一致的用户感受和体验，对用户流畅的应用新的产品很有帮助。1.2 确保所有页面的背景颜色都被测试对于一款用户用好的网页产品，所有页面的背景颜色需要具有一致性，以保证提供给用户一致的用户体验。图 2. 页面背景颜色不一致实例图 2 中所示，该实例中，当水平滚动条出现后，拖动水平滚动条查看右侧内容，可以发现左右两侧的页面背景颜色是不一致的，这会让用户体验下降，是产品的一个缺陷。1.3 检查警告消息的颜色是否符合规范警告消息需要对用户进行醒目的提醒和警告，需要很容易即可被用户发现。因此，通常警告消息的颜色设置为粉红色，如图 3 所示。图 3. 警告消息实例在网页产品开发和测试过程中，开发测试人员需要检查警告消息的颜色是否保持一致，是否符合以上的颜色规范。1.4 确保相似页面的颜色一致为了保持网页产品页面设计的一致性，为用户提供一致的体验，相似页面的颜色需保持一致。图 4. 相似页面背景色不一致实例上图 4 中所示的实例，是以往我们遇到的一例相似页面背景色颜色不一致的情况。该实例中，左侧 Exceptions 和右侧 Reports 窗口组件在没有数据显示时，呈现出不同的背景颜色，而在用户看来，这两种情况均反映了没有数据的情况。两个窗口组件此时应显示一致的背景色，这是产品的一个缺陷。图 5. 相似窗体背景色不一致实例以上图 5 的实例中，显示的是同一个表格中不用列的标题部分背景颜色不一致的例子。第一列的标题窗体呈现为均匀的颜色显示，而右侧其余的列则出现了不平滑的颜色跳跃，这也是产品的缺陷。1.5 确保前景色和背景色是易读的由于人眼对颜色对比度的敏感性，为了保证用户对显示内容的易读性，需要保证前景色和背景色有一定的差异，达到一定的对比度。否则，如果前景色和背景色颜色过于接近，将给用户带来较大的阅读困难。举例，同时是蓝色的前景色，如果背景颜色也是蓝色，前景和背景将混在一起，使得用户无法区分。图 6. 前景色和背景色太接近的实例如以上图 6 中所示，显示的表格内容背景色和前景色非常接近，用户阅读起来非常吃力。这是产品的缺陷，需要增大前景和背景颜色的对比度。1.6 确保不要用红色高亮显示活跃组件因为有很多人是红绿色盲，所以不要用红色来高亮显示活跃的组件。据统计，全球男性中，红绿色盲的比例在 8% 左右。回页首字体测试 Checklist表 2. 字体测试 Checklist 总结序号Checklist2.1确保整个网页产品中字体设置的一致性2.2确保字体放大时页面布局不被破坏2.3确保所有字体设置的易读性2.4确保不同类型内容在同一页面显示时尽量选用不同字体2.1 确保整个网页产品中字体设置的一致性为了给用户提供一致性的体验，字体在整个网页产品中需要采用一致的设置规则，相似的内容在不同的地方需要采用一致的字体设置。2.2 确保字体放大时页面布局不被破坏当用户有需求放大网页上的字体时，需要确保产品的页面布局不被破坏，依然可以为用户提供所有的功能。此时，需要确保页面上的组件不会相互遮挡。2.3 确保所有字体设置的易读性易用性和易读性是网页产品设计的重要内容，前面提到了颜色设置的易读性问题。这里，字体设置的易读性也很重要。合理的字体设置，可以让内容的呈现更有效率、更有层次。2.4 确保不同类型内容在同一页面显示时尽量选用不同字体当一个页面上有多种不同类型的数据一起显示时，尽量用不同的字体区分不同类型的内容，同时结合使用粗体、斜体、下划线等形式，以使数据更有层次性，更有利于用户的阅读。图 7. 不同类型数据显示实例以上图 7 中所示，显示的内容包括不同的层次关系，但所有这些内容都采用了相同的字体显示。这样将会让用户看起来比较吃力。如果可以将不同的内容采用不同的字体，用户看起来就轻松快捷很多。比如，将“How often”和“Occurs on”采用稍大的字体大小，并加粗；同时可以将“Weekdays”和“Weekends”采用不一样的字体显示，可以加上斜体效果加以区别，因为它们跟一周的具体七天是总分的关系。这样就可以让用户看起来更容易分辨哪里是总的分类，哪里是具体的天数。回页首总结颜色和字体的显示，直接跟用户的体验相关联。网页产品中恰当合理的设置颜色和字体，会给用户带来极大的方便，而如果设置的不合理，将会让用户觉得产品用起来很吃力，从而降低用户的满意度。在网页产品开发过程中，应该多站在用户的角度思考，思考如何可以让用户最有效率的获取到需要的信息。 第 4 部分: 内容、图片和按钮分类： Web开发2013-08-19 10:31 93人阅读 评论(0) 收藏 举报内容、图片和按钮测试包含的范畴在网页产品中，用户获得数据的来源中很重要的两个方面是文字内容（本文简称“内容”）和图片。内容主要以文字为主体传递信息，而图片则以图表的形式以更加醒目的方式向用户提供信息。两部分内容相互补充，均不可或缺。按钮则用于针对用户的点击执行相关的操作，从而实现与用户的互动，在用户体验中具有非常重要的作用。本文中将列举部分在网页产品测试中应用广泛的 Checklist 条目，这些条目均需要在开发和测试过程中加以注意。文中也将列举测试过程中遇到的一些实例，供大家参考。回页首内容测试 Checklist表 1. 内容测试 Checklist 总结序号Checklist1.1检查内容排列是否恰当1.2检查标签排列是否恰当1.3确保所有单词大小写使用正确1.4确保所有的错误消息中没有拼写错误1.5检查产品页面中是否存在冗余信息1.6确保不可编辑区域呈现为黑色文字、灰色背景、黑色标签1.7确保产品在最大、最小和最优分辨率下都能正确显示1.8确保内容表述清晰准确1.1 检查内容排列是否恰当为了给用户提供良好的用户体验，同时为了符合业界普遍的 UI 设计标准，文本内容的排列要整齐、有序，易于阅读。否则，排列凌乱的文本内容将给用户留下不够专业的印象。下面的例子展示了一类数量显示栏没有对齐导致的缺陷实例。图 1. 数量显示栏未对齐缺陷实例该实例中，图表左侧纵轴上的数量显示存在未对齐的问题。从图上可以看出，整数位 1,000,000 和 2,000,000 两个数字显示与其他数字的显示不在同一条竖直线上，这是产品的显示缺陷。1.2 检查标签排列是否恰当跟上面 1.1 节中提到的内容排列类似，标签的排列也需要做到恰当、整齐。规范整齐的排列，会使得标签看上去更规整，用户体验也会更好。以下是两个标签排列出现问题的实例。图 2. 竖直方向标签排列错位图 2 的实例中，左侧条目内容和右侧的输入框未能在竖直方向保持对齐，存在错位。这是产品的一个缺陷，该缺陷只有当将网页浏览器的尺寸缩小时才会出现，而在最大化时不能重现。图 3. 水平方向标签排列错位如图 3 所示的实例中，红框中所示的两个组件标签，一个为选择列表，一个为进度条，两者虽然隶属于不同的选项，之间并无直接关系。但两者之间的空间位置位于相同的水平位置，只有当两者在水平方向上对齐时，才能符合友好设计规范，用户看上去才能更舒服。1.3 确保所有单词大小写使用正确按照业界通用的 Web UI 设计标准，对单词的大小写有明确的规范。最基本的，需要保证所有相似表述在产品中保持一致性。在测试过程中，测试产品中我们遇到了以下窗口组件描述：“Variable-length Segment splits”，该描述中，从一致性的角度来说，明显最后一个单词“splits”应采用首字母大写，应为“Variable-length Segment Splits”。1.4 确保所有的错误消息中没有拼写错误产品提供的错误消息对于用户体验具有非常重要的作用，因为错误消息不仅提示了当前的错误，更重要的是同时向用户提供相对应的解决方案，告诉用户如何应对。因此错误消息的清晰准确表达，对于提升用户体验来说至关重要。图 4. 错误消息中的不一致信息实例图 4 所示的实例中，呈现的是一个用户名登陆页面出错的提示信息。总结消息为“Invalid user ID or password. ”，当点击该总结消息时错误消息会展开，呈现出详细的解释消息“Error: The username or password you entered is incorrect. More Details”。总结消息和详细解释消息应保持一致性，而这里两者对于用户名的表达存在不一致。总结消息中使用的是“user ID”，而在详细解释中，使用的单词是“username”，这里需要保持同一个对象的描述一致，这里是产品的缺陷。1.5 检查产品页面中是否存在冗余信息网页产品需要为用户提供充足的信息，但也要尽量杜绝冗余的功能和信息，因为冗余无用的内容对用户是一种干扰。图 5. 冗余的导航聚焦点上图 5 中，当按 TAB 键在页面上移动光标时，光标会经过图中蓝色圆圈所标记的位置，该位置的光标停留没有为用户提供任何有用的功能和信息，属于冗余的功能，为产品的缺陷，应该移除该光标聚焦位置。1.6 确保不可编辑区域呈现为黑色文字、灰色背景、黑色标签对于不可编辑的区域，应该用明显的显示特征告知用户，该区域不可编辑。通常不可编辑区域呈现为黑色的前景文字显示、灰色的背景以及黑色的标签。这样每当用户看到此类区域时，就知道该区域不可编辑，也就不会试图去对其进行编辑和更改。1.7 确保产品在最大、最小和最优分辨率下都能正确显示由于用户使用产品的环境和平台具有多样性，为了为所有分辨率下的用户提供尽量一致的服务，产品需要在最大、最小和最优分辨率下都能正确显示。图 6. 低分辨率情形下出现的显示错误实例图 6 所示的错误，出现在分辨率 1024*768 情形下，这是产品支持的最小分辨率，如图所示，该分辨率下，产品上方标签栏的显示存在重叠的问题，部分内容因遮挡无法正常显示，这是产品的缺陷。1.8 确保内容表述清晰准确网页产品中呈现的信息是直接面向用户，为用户提供有价值信息服务的。所以，需要保证产品中呈现的信息准确清晰，不能有模棱两可甚至错误的信息。图 7. 不准确内容显示实例以上实例中，网页的窗口组件中给出的消息提到在该时间段内没有发现相关感知信息，但具体时间段是指多长时间，模棱两可不清楚。实际情况是，这里默认的时间段是指过去的 90 天内，这样，产品在消息中应该明确的告知用户，过去 90 天内没有相关感知信息，做到清楚明白。回页首图片测试 Checklist表 2. 图片测试 Checklist 总结序号Checklist2.1确保所有的图表排列整齐2.2确保产品中无失效图片2.3检查所使用图片的尺寸2.4检查所有的标题区域及其尺寸2.5尽量少在图表中使用文本2.6确保所有图表与其描述和标题相符2.1 确保所有的图表排列整齐跟前面提到的文本内容和标签排列一样，当一个页面上存在多个图表同时显示时，从美观和易用的角度来讲，需要保证所有的图标能整齐排列。通常情况下，排列的错位会给用户带来不好的体验，甚至严重时可能导致用户无法准确找到自己需要的信息。2.2 确保产品中无失效图片图片是产品向用户提供信息的重要途径，作为产品的开发人员，需要保证产品中设计的所有图片均是有效的，当图片失效时，需及时作出恰当处理。可以想象，当用户期待得到相关图片时，看到的确是一个红色的叉子、一个失效的图片，用户的体验肯定不会是满意的。因此，在开发和测试过程中，我们需要尽力杜绝无效图片的存在，同时也要考虑到，后期在图片使用过程中可能会失效，我们对此也需要提供有效的处理方式。2.3 检查所使用图片的尺寸在网页产品中，图片的来源可能是由产品生成的，也有可能是由用户上传的。不管图片的来源是哪里，产品需要对图片的尺寸进行检查和限制。图片的显示受到几个方面的限制：4 尺寸过小的图片对用户来说不易读而且信息量很少5 尺寸过大的图片，可能因上传速度和使用者下载速度的限制而导致性能下降6 用户上传的图片是否有效以及图片的格式是否支持，都需要进行检查从以上分析可以看出，产品对图片的尺寸的检查对于产品的性能和用户体验是很重要的。开发和测试人员应该确保产品能正确处理各种情况，包括合法尺寸图片的上传和显示以及非法内容上传时的处理。2.4 检查所有的标题区域及其尺寸标题区域通常处于产品中最醒目的位置，应该尽量减少问题的出现。因为一旦出现问题，将非常容易被用户所注意，对用户的体验具有很强的影响。图 8. 标题区域文字尺寸显示问题在如图 8 所示的实例中，Configuration 和 Support 是标题区域中并列显示的两个功能标签。当用户点击 Configuration 后，其文本显示会缩小，与旁边的 Support 标签出现较大差异，此为产品的缺陷。2.5 尽量少在图表中使用文本图表对信息的传递主