即使有了基本的设置，随着更多页面和功能的添加，Web 应用程序测试也会变得复杂。学会如何掌控局面

每天?分享?最新?软件?开发?，DevOps，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?3分钟?学习?何乐而不为?，希望?大家?点赞?，加?关注?，你的?支持?是我?最大?的?动力?。

互联网，或简称万维网，是世界上最具革命性的信息技术和应用开发平台。当今世界经济主要依靠网络。

将其概念化的最简单方法是，它是一个由称为服务器和客户端的相互连接的节点组成的网络，通过定义良好的协议(如 TCP/IP、 HTTP、 FTP 等)交换数据。了解更多关于其初始化和规范的信息。

当按照当今的行业标准为网络构建时，拥有一个支持各级 CI/CD 和 QA 架构的更新的和相关的工具堆栈是非常重要的。

Web 应用程序的结构

一个网络应用程序或网站是一个装载在客户端的包，包含多层相互依赖的模块，建立在核心网络技术之上:

• HTML : 超文本标记语言 或HTML 是基于标记的文档标记系统，定义了编译成文档对象模型(Document Object Model)或 DOM 的结构和单个组件
• CSS: Cascading style sheet 级联样式表 或 CSS 是本机样式描述框架，用于标识 DOM 的不同部分并将其样式化为页面的可见区域。它提供了诸如根据 id、 class 和与其他 DOM 元素的关系选择元素之类的特性
• JavaScript: JS 是高级别解释脚本语言 。在其上编写和执行应用程序的所有动态行为

这些核心技术通过其他技术层来增强功能能力。从流行的 JavaScript 框架，如 Angular，React，和 Vue 到 CSS 前/后处理器，如 Less，Sass，以及其他 HTML 模板引擎，与网络相关的技术领域确实是巨大的。

除了前端层，在大多数应用程序中，还有一个后端或服务器端层，其中包含构建在微服务和数据库上的 API，它保存所有数据和业务逻辑，并将所有信息抽象成相关的契约，前端可以通过 HTTP 方法访问这些契约，并提供适当的请求和凭据。

根据所使用的工具和网站的性质，它将需要一个适当的托管战略和基础设施。网站可以托管在各种系统上，这些系统大致可分为:

• Static web hosts 静态网络主机: 用于static websites 静态网站, 基于文件存储的交付平台，提供域名、电子邮件、 DNS 和其他特性，如 SSL 加密等
• Dynamic web hosts: 动态网站主机:对于动态网络应用，云平台如 AWS、 Google Cloud、 Azure、 Salesforce 和 IBM 云是首选，它们提供了一系列的计算功能，如虚拟机、数据库、按需资源扩展等，作为互联网上的服务。由于这些平台具有先进的性能和安全特性，因此它们是为业务目的部署 Web 应用程序的标准。它们还提供了一系列基于 AI/ML 的尖端工具

一个 web 应用程序，即使有一个非常简单的初始设置，当添加更多的页面、内容和功能时，它的复杂性也会增加。在达到一定的复杂度阈值之后，管理应用程序的行为变得非常困难，审计资源消耗和分配变得更加困难。

根据应用程序的不同，开发人员可能更喜欢某些应用程序结构的方法，比如:

• Single-page app 单页应用: 这指的是一个网络应用程序，它有一个单一的文档模型，其中包含所有功能。它涉及到大量的函数逻辑，必须打包并发送到客户机的计算机，并进行适当的安全性和性能优化。一些流行的例子是 Gmail，Facebook，GitHub 等等
• Multiple page app 多页面应用程序: 最常用的结构，其中应用程序分为多个页面，可通过各种路由 URL 访问。服务器端应用程序框架和模板引擎用于构建这样的应用程序，它们比 SPA 具有固有的安全优势
• Progressive web app 先进的网络应用程序: 这是一种现代的使用方法。提供者在手持设备上使用服务工作者、清单和应用程序shell将 Web 应用程序作为本地应用程序运行

无论您采取什么方法，在开发级别和更高级别实现测试计划以确保高效的 DevOps 工作流对所有人都同样重要。

测试 Web 应用程序

一个好的网站测试计划的组成部分包括策略、测试目标、测试方法、测试进度和测试环境。测试策略的设计应该确保网站满足业务需求，并且符合目的。测试方法应包括:

• Unit Testing 单位测试: 通过单元测试测试代码库的各个部分Javascript and 还有Python . .随着无代码/低代码和基于 AI 的工具的出现，您现在还可以自动化 Unit 测试编写过程的一部分
• Integration Testing: 综合测试: 包括测试网站代码的各个部分，作为相互依赖的功能或模块，通过测试代码或其他工具触发代码与父存储库合并。所有主要的云主机都喜欢Github, Gitlab, and 还有本地支持 CI/CD 集成
• System Testing 系统测试: 在用户界面和诸如登录、注册和其他支持的流程等功能层面测试网站的工作情况，从而验证网站各部分的协同工作Selenium是网页浏览器最广泛采用的自动化框架
• Acceptance Testing 验收测试: 这通常是测试的最后阶段，在这个阶段中，带有数据的完全组装的应用程序将在实时或预生产环境中进行测试。这涉及到使用实际用户或模拟用户进行测试自动视觉测试。是在快速变化的产品 UI 上管理变更批准过程的最有效方法
• Performance Testing 性能测试: 随着用户的增加，确保服务器能够在高峰使用时间处理请求负载变得至关重要。另外，通过正确使用 HTTP 头和元数据分析，在网站和用户之间的每个联系点上维护端到端的安全性

Web 浏览器的角色

所有网站都需要另一个应用程序，即“浏览器”，运行在设备的操作系统之上。网络浏览器是由许多公司制造的，而且通常是免费的。

2021年的主要网络浏览器

网页浏览器的重要作用不仅在于让用户能够访问网站，而且在于帮助开发人员使用广泛的工具来测试和调试正在开发的网页应用程序的各个方面。大多数浏览器提供开发工具作为一个辅助界面给开发人员，他们想要窥探内幕并访问呈现的 Web 应用程序的内部工作原理。这些工具通常可以通过右键单击页面并选择“检查”选项来访问。’

让我们看看 Chrome 的开发工具部分提供的一些主要工具:

• Elements 元素: 元素浏览器提供对编译后的 DOM 的访问，其中有许多特性可以添加/删除组件，并设置悬停、焦点等状态
• Console 控制台:这是 JavaScript 执行的控制台输出的日志; 对于调试非常有用。此面板还可用于在活动网页上运行 JS 代码片段并查看输出
• Sources 消息来源: 在源代码面板下，您可以看到一个列表的所有源代码文件下载的网页，在域名提供商的名称下列出。在此选项卡的右侧，有一个脚本调试器，可用于放置断点和实时调试网站执行
• Network 网络: 此面板记录所有网络调用和从网页，与类型，状态，请求/响应，时间等详细列表。它还可以通过使用节流特性来模拟网络可用性场景
• Performance : 在这个面板下，您可以通过记录页面加载事件和分析在分析记录之后提供的丰富的分解来记录运行时性能
• Memory : 您可以获取内存堆快照并分析内存泄漏、对象大小、随时间可视化内存使用情况等内容
• Application : 这可以用来评估、编辑和调试service workers, worker caches,等
• Security : 提供 SSL 证书有效性的摘要

Chrome Dev Tools

还有一个内置的设备工具栏，它可以让你在一系列设备上模拟用户界面场景，包括预设分辨率配置文件、网络节流、缩放级别、屏幕旋转，以及为测试响应性输入自定义分辨率的能力。

Chrome 开发工具部分正在不断推出更新更高级的工具，比如 Lighthouse、 Recorder 等，它们提供了更深入的方法来分析应用程序的整体健康状况。

此外，除了开发工具之外，浏览器还允许您访问大量 API，例如 I/O、摄像头、位置、音频/语音、网络、 cookie 等。活动会话的 DOM 和许多其他组件可以在对象级访问。

测试本地部署

在开始在浏览器中设置实时测试流之前，还建议在应用程序中实现单元测试工作流，以确保代码库强大且干净。

当开发人员创建网站时，他们在工作电脑上的浏览器中检查所有更改和更新。在初步的功能测试之后，下一个重要的部分是设备和浏览器相容性测试，这实际上让我们了解了应用程序在不同的设备和浏览器组合上的外观和性能。

由于开发人员对所有可能的设备的访问范围有限，因此捕获一些 bug 变得有点棘手。尽管 Web 有定义良好的标准和规范，但由于底层浏览器引擎和 JS 解释器的不同实现，不同浏览器的解释会出现差异。总的来说，一个现代的 web 浏览器本身就提供了一个加载的工具包来打开和调试应用程序的任何方面。

自动视觉测试

从用户的角度来看，应用程序是一种视觉体验，用户在网站上的旅程是由业务分析和设计过程设置的设计规范定义的。为了确保开发的网站忠实于设计目标，必须确保对代码库的变更进行适当的可视化测试和批准。

这就是质量保证团队发挥主导作用的地方。大约十年前，视觉测试的过程大多是手动的，但是现在，它越来越自动化。实现可视化测试的一种有效方法是使用堆栈中的 Percy 等工具，这些工具提供了一种用户友好且紧密集成的方法，可以在 CI/CD 行上执行可视化测试。

您可以为生产环境添加团队成员并对其进行配置，在生产环境中可以评估每个构建的视觉差异，并且团队可以在审批方面进行协作。

我们已经为您的本地计算机上的自动化手动测试设置了一条清晰的路径，并且还讨论了如何实现可视化测试来测试和控制 UI 更改。当您成功地实现了所有这些层之后，您的网站就可以进入生产环境或生活环境了。

但这并不意味着测试的作用已经结束。这只是意味着，如果您的测试用例配置正确，CI/CD 流运行平稳，您将不得不花费更少的时间在验证和错误检查上，而花费更多的时间在实际开发新特性上。为了确保一个健康的测试系统，请记住以下几点:

• 需要监视所有阶段和级别的测试运行，因为自动化将帮助您执行和检测错误，但是为了理解缺陷的严重性，然后找到解决它的方法，我们需要在团队中进行适当的沟通和分配
• 仪表板为监视构建和测试运行的状态提供了一种很好的方法，但是拥有太多单独的仪表板将导致跟踪困难和浪费时间，因此建议尽可能实现层的集成
• 业务或设计规范中的任何更改都必须从领导层流向开发过程，最终流入测试脚本。在一个健康的开发过程中，从上到下的信息流是无缝和快速的

有许多不同的方法来测试网站和许多不同的工具组合可以应用，但随着新的云技术，网络测试已经变得更加功能丰富和可靠。在同一平台上与团队协作构建测试计划的能力增加了输出，因为所有成员都可以访问平台上的共享资源。

    

使用无须实名的阿里云国际版，添加 微信：ksuyun  备注：快速云！