江门网页设计：如何创建自己的前端网站测试计划

您的设计人员和开发人员已经创建了一个梦幻般的前端设计，客户很高兴，现在您的工作就是测试它。你的心开始下沉：想想你必须测试的所有浏览器，所有设备和所有这些网页，更不用说迭代和错误修复了。您需要一个前端测试计划。

江门网页设计本文将向您介绍在创建前端测试计划时应考虑的事项以及如何在浏览器，设备和网页上高效测试。

前端测试计划的好处

• 清晰的项目范围了解项目规范中的哪些浏览器和设备将有助于您集中精力并减少开发时间和成本。

• 减少客户摩擦。这是通过显示已完成测试计划的详细报告来完成的。

• 对部署项目的信心。这来自于您已经对项目进行了全面测试。

根据我的经验，前端网站模型在移交给后端开发团队之前没有经过广泛测试，原因是时间和预算限制。它们通常在前端开发人员选择的浏览器中进行测试，也可能在智能手机上进行测试。因此，当我们遇到一个项目的怪物，爸爸信息，它有大量的响应式页面类型，我们需要一个计划，有条不紊地有效地测试跨平台和跨设备的功能和性能。

爸爸信息是一个非营利性的网站，建立在Joomla，旨在帮助有需要的父亲，无论他们的情况如何。去年，它帮助了超过500,000名父亲，每月提供220,000页信息。我将使用Dad Info作为案例研究，演示如何创建和完成您自己的前端测试计划。

让我们的工具了

在开始之前，您将需要进行工具化。在本文中，我将使用以下工具包来完成测试过程：

• Asana用于错误跟踪和团队管理

• Chrome开发者工具用于检查，调试和分析

• Windows的截图工具（或Shift + Command + 4在Mac上）

• BrowserStack用于测试多个虚拟机和模拟器上的跨浏览器功能

• 设备理想情况下，您需要真正的设备。我们有iPhone 4,5和6; HTC One M8; 三星Galaxy S5; 诺基亚Lumia 1520; 谷歌Nexus 5; 黑莓曲线; iPad 2; 和华硕VivoTab智能。如果您没有这些，可以使用BrowserStack的模拟器。

• 谷歌的PageSpeed Insights

• Pingdom网站速度测试

• Screenr基于Web的屏幕录制，具有共享功能

我们测试什么？

因为我们是前端测试人员，所以我们的工作就是确切知道我们正在测试什么。我们可能并不总能找到错误本身; 相反，我们可能会发现某些东西没有按预期工作，或者开发人员误解了功能要求。预先详细说明所有利益相关方也同意这将有助于完全避免这些问题。稍后在爸爸信息案例研究中，我们将通过前端规范来测试主页。

我们测试谁？

首先，您需要了解您的受众以及他们将如何使用该网站。以下是您应该经常提出的几个简单问题：

• 您的受众群体使用哪些最受欢迎的设备？

• 什么操作系统和浏览器的组合是最热门的观众当中？

• 他们有什么连接速度（3G，4G，宽带/光纤）？

• 他们如何精通技术？我们可以根据网站主题，设备和人口统计信息在此处做出判断。

对于我们的爸爸信息案例研究，答案如下：

• iPhone 5，iPad 2 +，桌面（1024像素及以上）

• Windows 7 Chrome，Windows 8 Chrome，Windows 8 Internet Explorer 10，OS X Safari，iOS 6 Safari

• 宽带和4G（很多城市工人）

• 我们的观众主要是年龄在18到35岁之间，精通技术的人，口袋里装有智能手机，并了解Facebook和Twitter等社交媒体应用。

那么，这如何帮助我们实施前端测试计划？

有了这些信息，我们可以立即将我们庞大的待办事项清单分解为与我们的受众相关的细分，并优先考虑我们的测试方法。对于功能，我们知道要测试哪些设备和浏览器; 为了性能，我们知道要测试的连接; 而对于可用性，我们知道我们的受众使用社交媒体应用程序，因此我们可以包含他们熟悉的界面元素。

了解你的极限

了解项目的限制。在某些时候，你将会与自己进行一次“足够好”的对话。项目限制通常由几个因素控制：

• 预算。请记住，您应该收取测试费用。很多设计师都没有，这很疯狂。测试非常耗时 - 作为设计师和开发人员，我们的产品就是时间。

• 时间表。在项目的时间表中包含测试。它经常被排除在列表之外，因此匆忙。

• 范围。并非每个网站都需要在数百台设备上运行。找出主要用例，并专注于满足受众的要求。

浏览器和设备支持级别

为了轻松地与客户设置浏览器和设备支持的范围，并避免那些“糟糕的对话”，我们发现对我们的“支持级别”的预先确实有帮助。以下是一些可以应用于您测试的每种页面类型的简单定义。

支持级别1：完全支持的浏览器和设备

• 所有内容必须是可读的。

• 所有功能必须有效。

• 必须尽量减少与批准的图形设计的偏差。

支持级别2：部分支持的浏览器和设备

• 所有内容必须是可读的。

• 导航必须工作。

• 业务登录功能必须正常降级。

• 演示文稿的任何降级都不得掩盖内容。

支持级别3：不支持的浏览器和设备

• 不需要支持或测试。

绩效支持水平

您可能还希望在性能目标上与您的客户达成一致。这里快速而肮脏的方法是在Google的PageSpeed Insights和Pingdom的网站速度测试中达成一致。通常情况下，我们的目标是至少85分。

用于管理测试计划的工具

使用什么工具并不重要。我用Asana和BugHerd ; 你可以使用一个简单的电子表格。它归结为什么最适合你。您的工具至少应该能够执行以下操作：

• 在有序和分段列表中添加错误，问题和任务，并具有标记功能（“优先级，系统关键等”）;

• 将错误，问题和任务分配给您的团队成员（或您自己），并提供截止日期;

• 使用日期排序的历史记录线程评论错误，问题和任务;

• 上传与错误，问题和任务相关的屏幕截图，视频和文档;

• 将错误，问题或任务标记为已解决或已完成;

• 报告已完成与剩余的错误，问题和任务。

如何描述错误和问题

曾经收到过客户的错误报告，上面写着“我点击了博客并且它不起作用”？没用，对吧！那么，编写良好的错误报告是什么样的？

• 要具体。没有罗嗦，清楚地总结问题。不要将多个错误合并到一个报告中; 相反，为每个问题提交一份单独的报告。

• 展示如何复制。详细说明您所做的事情以及结果发生了什么问题。

• 限制代词。像“我点击它并且没有出现窗口”这样的描述非常不清楚。相反，“我点击'提交'按钮，标记为'注册'的窗口未加载”告诉开发人员你做了什么以及发生了什么。

• 阅读你写的内容有意义吗？你认为这很清楚吗？您可以按照自己的步骤复制错误吗？

设置前端测试计划

到目前为止，您已收集了大量有用的信息和数据，但您需要一个适当的测试计划才能成为前端测试人员。如果没有一个人，你就会在黑暗中射击。那么，前端测试计划到底是什么样的呢？在最简单的形式中，它是一个待办事项列表，其中包含一系列任务，可根据一组商定的标准测试每种网页类型。解释这个的最好方法是通过案例研究。

案例研究：爸爸信息主页的前端测试计划

测试计划文档

在这里，我们概述了为测试人员提供有关项目的一些背景信息。我们让他们知道我们想要测试什么，在哪些设备和浏览器上以及他们需要多长时间。

预算：

• 总共10天进行测试

• 使用一天半进行主页的前端测试

时间线：

• 在一天内完成初步测试，并在同一天完成对前端开发人员的反馈

• 修复bug有三天时间

• 再过半天重新测试bug

范围：

• 支持级别1（浏览器）：

  • Windows 8：IE 10 +，Chrome（最新），Firefox（最新），Safari（最新）

  • Mac OS X Mavericks：Chrome（最新），Firefox（最新），Safari（最新）

• 支持级别1（设备）：

  • iPhone 4/5，iPad 2，华硕VivoTab Smart

• 支持级别2：

  • Windows 7：IE 9 +，Chrome（最新），Firefox（最新），Safari（最新）

  • Windows XP：IE 8，Chrome（最新），Firefox（最新），Safari（最新）

• 支持级别3：

  • 还要别的吗

对于这个项目，我们需要三个报告，以确保客户端页面已经过并通过了测试过程：

• 浏览器和设备报告：支持1级和2级

• 响应报告：支持级别1

• 绩效报告：最低85分（满分100分）

原始批准的设计

直观地表达您正在努力的方面对于确保优雅降级在可接受的限度内以及浏览器之间的演示不会发生太大变化非常重要。我们已将此图像添加到测试计划文档中：

页面功能的详细信息

在主页设计中，我突出了所有需要测试的功能，并使用块叠加突出显示它们。这有助于每个参与者确切地知道要查找的内容，并将所有内容放在同一页面上。我还将其添加到测试计划文档中。

基于这些叠加，我们可以生成完整的功能列表。

搜索表单

• 单击或触摸搜索框，然后按搜索图标以提交表单。

导航：

• 将鼠标悬停在导航项上以显示白色突出显示。

• 将鼠标悬停在导航项“家庭”上以显示下拉菜单。

图片轮播1：

• 按向上和向下箭头浏览幻灯片。

• 按分页元素可跳至特定幻灯片。

• 在触摸设备上滑动幻灯片。

新闻Feed：

• 将鼠标悬停在标题上以改变其颜色。

图片轮播2：

• 按向上和向下箭头浏览幻灯片。

• 按分页元素可跳至特定幻灯片。

• 在触摸设备上滑动幻灯片。

号召性用语块1：

• 将鼠标悬停在标题上进行更改

图片轮播3：

• 按向上和向下箭头浏览幻灯片。

推特：

• 没有特殊的前端功能

论坛：

• 没有特殊的前端功能

话题：

• 将鼠标悬停在支持主题上以显示右侧的图片，并附上说明。点击“更多”转到新页面。

页脚链接：

• 将鼠标悬停在图标上可更改其不透明度。

通讯：

• 单击或触摸“输入电子邮件地址”框应该有效。

• 按“订阅”提交表格。

页脚底部：

• 没有特殊的前端功能

浏览器和设备报告

无论您决定使用像Asana，BugHerd还是Trello这样的工具，您作为测试人员的工作本质上都是收集以下信息以传递给您的前端开发人员（或者如果您是独立的话，可以自己使用）。为了快速浏览所有浏览器，我使用BrowserStack，设置运行我需要的操作系统和浏览器组合的虚拟机。

在完成每个浏览器和设备组合的相同测试之前，完成所有浏览器和设备组合是一项有条理的工作。

来自爸爸信息的真实BUG

• item：导航的“加入”按钮

• 浏览器/设备： Windows 8，IE 10,1024像素的屏幕宽度

• 通过/失败：失败

• 错误描述： “加入”按钮与Twitter按钮重叠，以蓝色突出显示。请参见附件截图。

响应报告

在关于响应性的报告中，我们专门测试随着屏幕画布尺寸减小而改变的元素和功能。这包括导航，页面布局和图像。

我们有一些可能的测试方法：

• 调整浏览器窗口的大小这是一种快速而肮脏的方法，在角落抓住浏览器的窗口并在断点处拖动以查看会发生什么。这是快速扫描网站整体响应能力以查看哪些元素发生变化的好方法。

• 使用模拟器。BrowserStack模拟了大多数流行的设备，根据我的经验，它足以进行测试。

• 使用真实设备。昂贵的选择！这需要对您手中的实际设备进行彻底测试。获取屏幕截图通常需要拍摄照片，通过电子邮件发送给自己，然后在Photoshop中进行注释。屏幕录制有一些选项，包括iPhone的UX录像机。

对于爸爸信息项目，我们使用了三者的混合物。前端开发人员调整了浏览器的大小以获得响应元素的要点，而质量保证团队则使用模拟器和真实设备来完成测试过程，以满足客户的需求。

来自爸爸信息的真实BUG

• 项目：图像轮播1

• 浏览器/设备： iPhone 5，iOS 7

• 通过/失败：失败

• 错误描述：设置在旋转木马底部的边距将特色文章的“新闻支持你的孩子......”标题推得太远了。特色文章标题1应该是图像轮播1下方20像素。请参见随附的屏幕截图。

绩效报告

在效果报告中，我们希望在Google的PageSpeed Insights中获得至少85分（满分100分）。为了让客户签署报告，我们提供了页面速度分析的屏幕截图。当然，如果它没有通过商定的标准，那么我们使用错误跟踪报告模板向前端开发团队提供反馈。

提示：我们使用样板（存储在我们分叉的GitHub存储库中）用于我们的内容管理系统和Magento构建，其性能已经过优化。这为我们节省了大量时间。

报告已完成。我们只有几个问题要发送给前端开发人员以结束前端构建。一旦进入质量保证团队，我们将重新测试使项目无法获得清洁健康状况的元素。

用于视觉回归的自动化测试工具

需要考虑的一件事是上线后需要进行视觉回归测试，允许您比较页面版本，看看您的新功能，css更新或类重命名是否已导致任何问题。

视觉回归测试基本上对两个版本进行DIFF，并以不同方式概述它们之间的差异，突出显示潜在问题。

加起来

测试是一个关键过程，开发人员应该将其集成到他们的工作流程中，以最大限度地减少质量保证阶段中遇到的错误数量。前端测试也需要按时间，资源和资金进行预算。该过程将吸引有条不紊的类型，因为他们不需要具有创造性的技能来执行它。工具在那里让你的生活更轻松，但他们不会为你做的工作。无论你选择哪种工具，坚持使用它，定义一个流程并投入精力。结果将是一个更好的网站，明显减少错误，你的客户会喜欢，这会减少“为什么这不工作” ？“周日晚上的电话和电子邮件。

你的行动计划

读你应该做的是一件事; 实际上做到了另一个。所以，我建议你现在就采取以下行动：

1. 列出您手头的设备，或查看打开设备实验室以查找您附近的设备。

2. 为您选择的浏览器和设备创建支持级别。

3. 花时间测试您的时间表和报价。

4. 选择管理工具（Asana，BugHerd等），或设置电子表格来跟踪错误，问题和任务。

5. 选择要应用测试计划的第一个项目。

6. 去这样做！

江门网页设计前端测试将使您和您的客户对完成的项目充满信心。你会知道这个网站已经过彻底的bug测试，并且已经为全世界所见。