乐趣区

关于测试:前端自动化测试之葵花宝典

jiezi

作者：京东批发 杜兴文

首先聊一下概念，Web 前端自动化测试是一种通过编写代码来自动化执行 Web 应用程序的测试工作的办法，它通常应用 JavaScript 和测试框架 (如 Selenium、Appium 等) 来实现。

Web 前端自动化测试的长处是能够进步测试效率、缩小测试工夫和测试老本，并且能够确保测试品质。以下是一些 Web 前端自动化测试的长处:

  1. 进步测试效率：自动化测试能够在短时间内实现大量的测试工作，从而缩小测试所需的工夫和测试老本。
  2. 缩小测试老本：自动化测试不须要手动执行测试工作，从而缩小了测试所需的人员和老本。
  3. 进步测试品质：自动化测试能够确保测试的覆盖率和进步测试的准确性，从而缩小测试脱漏和测试品质不高的问题。
  4. 笼罩更多场景：自动化测试能够笼罩更多的测试场景，从而确保软件品质失去保障。
  5. 缩小人为谬误：自动化测试能够缩小测试人员的人为谬误，从而进步测试的准确性。

在理论利用中，Web 前端自动化测试通常用于测试 Web 应用程序的交互性能、性能、安全性等方面。例如，能够应用自动化测试工具来测试 Web 应用程序的登录、注册、导航、表单验证等性能，或者应用自动化测试工具来测试 Web 应用程序的性能，如响应速度、页面加载工夫等。

总之，Web 前端自动化测试是一种能够进步测试效率、缩小测试老本和进步测试品质的办法，实用于各种类型的 Web 应用程序。

本文谈谈前端自动化测试从入门到精通再到专家级的计划与思维！分为以下不分：

一、首先来构建一个 Selenium 自动化测试用例

示例测试需要非常简单：拜访百度主页，搜寻某个关键词，并验证搜寻后果页面的题目是“被搜寻的关键词”+“_ 百度搜寻”。如果搜寻的关键词是“ChatGPT”，那么搜寻后果页面的题目就应该是“ChatGPT_ 百度搜寻”。

明确了测试需要后，我强烈建议你先用手工形式执行一遍测试，具体步骤是：关上 Chrome 浏览器，输出百度的网址“www.baidu.com”；在搜寻输入框中输出关键词“ChatGPT”并按下回车键；验证搜寻后果页面的题目是否是“ChatGPT _ 百度搜寻”。

明确了 GUI 测试的具体步骤后，咱们就能够用 Java 代码，基于 Selenium 实现这个测试用例了。这里，我要用到 Chrome 浏览器，所以须要先下载 Chrome Driver 并将其放入环境变量。接下来，你能够用本人相熟的形式建设一个空的 Maven 我的项目，而后在 POM 文件中退出 Selenium 2.0 的依赖，如图 1 所示。

图 1 在 POM 文件中退出 Selenium 2.0 的依赖

接着用 Java 创立一个 main 办法，并把如图 2 所示的代码复制到你的 main 办法中。上面是基于 Selenium 的自动化测试用例的样本代码

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class BaiduSearch {public static void main(String[] args) {
        // 设置驱动门路
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

        // 启动浏览器
        WebDriver driver = new ChromeDriver();

        // 拜访百度首页
        driver.get("https://www.baidu.com");

        // 获取百度搜寻输入框元素，并主动写入搜寻内容
        driver.findElement(By.id("kw")).sendKeys("ChatGPT");

        // 线程睡眠 1 秒
        Thread.sleep(1000);

        // 获取“百度一下”元素，并主动点击
        driver.findElement(By.id("su")).click();

        // 线程睡眠 3 秒
        Thread.sleep(3000);

        Assert.assertEquals("ChatGPT _ 百度搜寻",driver.getTitle());
        // 退出浏览器
        driver.quit();}

以上是从 0 到 1 建设了一个最简略间接的 GUI 自动化测试用例。这个用例的实现很简略，然而只有真正了解了 Selenium 工具的原理，你能力真正用好它。

二、入门了之后咱们要在测试职责的效率上大展身手，即 脚本与数据的解耦 + Page Object 模型。

“测试脚本和数据解耦”的实质是实现了数据驱动的测试，让操作雷同然而数据不同的测试能够通过同一套自动化测试脚本来实现，只是在每次测试执行时提供不同的测试输出数据。

在测试脚本中通过 data provider 去 CSV 文件中读取一行数据，赋值给相应的变量，执行测试用例。接着再去 CSV 文件中读取下一行数据，读取完所有的数据后，测试完结。CSV 文件中有几行数据，测试用例就会被执行几次。具体流程如下图所示。

“页面对象模型”的核心理念是，以页面为单位来封装页面上的控件以及控件的局部操作。而测试用例应用页面对象来实现具体的界面操作。

页面对象模型的核心理念是，以页面（Web Page 或者 Native App Page）为单位来封装页面上的控件以及控件的局部操作。而测试用例，更确切地说是操作函数，基于页面封装对象来实现具体的界面操作，最典型的模式是“XXXPage.YYYComponent.ZZZOperation”。

基于这个思维，上述用例的伪代码能够进化成下图 所示的构造。这里给出了 login 函数的伪代码，倡议大家依照这种思路本人去实现一下 search 和 logout 的代码，这样能够更好的领会页面对象模型带来的变动。

三、让自动化测试脚本更好地形容业务

业务流程形象是，基于操作函数的更靠近于理论业务的更高层次的形象形式。基于业务流程形象实现的测试用例往往灵活性会十分好，你能够很不便地组装出各种测试用例。

假如，某个具体的业务流程是：已注册的用户登录电商平台购买指定的书籍。那么，基于业务流程形象的测试用例伪代码，如下图所示。

这段伪代码的信息量很大，然而了解了这段代码的设计思维，也就把握了业务流程形象的精华。

从整体构造上看，伪代码顺序调用了 4 个业务流程，顺次是实现用户登录的 LoginFlow、实现书籍查问的 SearchBookFlow、实现书籍购买的 CheckoutBookFlow、实现用户登出的 LogoutFlow。

四、前端 GUI 自动化测试的测试数据

GUI 自动化测试的测试数据是指用于测试应用程序用户界面 (GUI) 的测试数据。在自动化测试中，测试数据通常是从测试数据集中获取的，这些数据集蕴含了应用程序的不同输出和输入。

以下是一些常见的 GUI 自动化测试数据:

  1. 输出数据：输出数据是指用于测试应用程序输出区域的输出数据，例如文本框、下拉框、单选按钮等。输出数据通常包含变量名、变量值、数据类型等。
  2. 按钮数据：按钮数据是指用于测试应用程序按钮的点击操作的输出数据。按钮数据通常包含按钮的名称、形容、点击事件等。
  3. 文本数据：文本数据是指用于测试应用程序文本输出区域的输出数据。文本数据通常包含变量名、变量值、文本内容等。
  4. 图像数据：图像数据是指用于测试应用程序图像输出区域的输出数据。图像数据通常包含变量名、图像内容、尺寸等。
  5. 表格数据：表格数据是指用于测试应用程序表格的输出数据。表格数据通常包含表格名称、行数据、列数据等。
  6. 图表数据：图表数据是指用于测试应用程序图表的输出数据。图表数据通常包含图表名称、数据系列、数据值等。

在 GUI 自动化测试中，测试数据集的构建对于测试的胜利十分重要。测试数据集应该尽可能地笼罩应用程序的不同输出和输入，以便在测试过程中辨认潜在的问题和缺点。

传统上，数据品质被分成 6 个方面。

•准确性：一项信息在多大程度上反映了事实？

•齐备性：它是否满足你对全面性的冀望？

•连贯性：存储在一个中央的信息与存储在其余中央的相干数据是否统一？

•及时性：当你须要时，你的信息是否可用？

•有效性：信息是否有特定的格局、类型或大小？它是否遵循业务规定 / 最佳实际？

•完整性：不同的数据集是否被正确地连接起来，以反映一个更大的画面？关系是否被很好地定义和施行？

这些维度是在对设计数据仓库采取宽泛的观点时定义的。思考了所有定义和收集的数据集，它们之间的关系，以及正确服务于组织的能力。

五、进步 GUI 自动化测试稳定性的关键技术

进步 GUI 自动化测试稳定性的实践点包含以下几点:

  1. 抉择适合的测试框架：测试框架是 GUI 自动化测试的外围，它决定了测试的效率和稳定性。抉择适合的测试框架须要综合思考测试工具、测试环境、测试需要等多个因素。
  2. 编写高质量的测试用例：测试用例是 GUI 自动化测试的要害，它决定了测试的覆盖率和测试品质。编写高质量的测试用例须要深刻理解软件性能和界面设计，可能笼罩软件的各个性能点和细节。
  3. 抉择适当的测试数据：测试数据是 GUI 自动化测试的根底，它决定了测试的准确性和效率。抉择适当的测试数据须要综合思考软件性能、界面设计、测试需要等多个因素。
  4. 优化测试环境：测试环境是 GUI 自动化测试的基石，它决定了测试的稳定性和可靠性。优化测试环境须要综合思考测试工具、测试环境、测试需要等多个因素，保障测试环境的稳定性和兼容性。
  5. 进行性能测试:GUI 自动化测试须要在测试过程中思考软件的性能和响应速度。进行性能测试须要模仿大量的用户操作和负载，评估软件的性能和响应速度，及时发现和解决软件性能瓶颈。
  6. 定期进行测试保护:GUI 自动化测试须要定期进行测试保护，更新测试用例和测试数据，清理过期的测试环境和测试工具，保障测试的及时性和有效性。

进步 GUI 自动化测试稳定性的关键技术点包含以下几点:

1. 根本 HTML/CSS/JS 技能：对于一个 web 前端自动化测试工程师，根本的 HTML/CSS/JS 技能必不可少，能够帮忙其更好的了解页面交互与渲染机制。

2. 工具链技术：对于 web 前端自动化测试，工具链技术是必备技能，例如 Grunt 和 Gulp 等。

3. 语言技能：web 自动化测试须要用到多种编程语言，如 Java、Python、JavaScript 等，具备这些语言的开发能力是必不可少的。

4. 根本的测试技术：web 前端自动化测试工程师须要熟知测试的基本概念和办法，如测试计划、测试用例、测试策略等。

5. API 和接口测试：web 前端自动化测试工程师须要相熟如何对 API 和接口进行测试，这对于确保应用程序性能的准确性十分重要。

6. 自动化测试框架技术：web 前端自动化测试工程师须要把握至多一种自动化测试框架技术，如 Selenium、WebdriverIO 等。

7. 调试技能：web 前端自动化测试工程师须要纯熟应用调试技能来解决测试过程中的问题，如应用 Fiddler、Chrome 开发者工具等。

8. 数据库技术：web 前端自动化测试工程师须要相熟根本的数据库操作和 SQL 语句，以便在测试时进行数据验证和数据比对。

9. 脚本编写技能：通过编写 JavaScript 和 Python 等脚本，能够帮忙测试人员实现自动化测试和疾速生成测试报告。

10. 高效的测试方法：web 前端自动化测试工程师须要熟练掌握各种测试方法和技巧，以便在工作中更加高效和全面的实现测试工作。

总之，进步 GUI 自动化测试稳定性须要综合思考测试框架、测试用例、测试数据、测试环境、性能测试和测试保护等多个因素，通过一直优化和降级，进步测试效率和品质。大略可从以下 5 个方面来进行动手：

1、对于非预计的弹出对话框引起的不稳固，能够引入“异样场景恢复模式”来解决。

2、对于页面控件属性的轻微变动造成的不稳固，能够应用“组合属性”定位控件，并且能够通过“含糊匹配技术”进步定位识别率。

3、对于 A/B 测试带来的不稳固，须要在测试用例脚本中做分支解决，并且须要脚本做到正确辨认出不同的分支。

4、对于随机的页面提早造成的不稳固，能够引入重试机制，重试能够是步骤级别的，也能够是页面级别的，甚至是业务流程级别的。

5、对于测试数据引起的不稳固，我在这里没有具体开展，留到后续的测试数据筹备系列文章中做专门介绍。

六、优雅的自动化测试报告

晚期基于视频的 GUI 测试报告因为体积较大，而且不能比拟不便地和日志适配，所以并不是最好的解决方案。现实的 GUI 测试报告应该是由一系列按工夫程序的屏幕截图组成，并且能够在这些截图上高亮你所操作的元素，同时依照执行时序配有相干操作步骤的详细描述。

商业 GUI 自动化测试框架的 GUI 测试报告曾经做得十分成熟，通常不须要做额定的定制或者开发。

然而开源 GUI 自动化测试框架的 GUI 测试报告往往须要本人来开发，次要应用了扩大 Selenium 本来的操作函数的形式以及 Hook 函数来实现。

开源 GUI 测试框架的测试报告实现思路

然而，如果你应用的是开源软件，比方 Selenium WebDriver，那就须要本人去实现截图以及高亮显示操作元素的性能。实现的思路通常是：利用 Selenium WebDriver 的 screenshot 函数在一些特定的机会（比方，页面产生跳转时，在页面上操作某个控件时，或者是测试失败时，等等）实现界面截图性能。

具体到代码实现，通常有两种形式：1、扩大 Selenium 本来的操作函数；2、在相干的 Hook 操作中调用 screenshot 函数。

第一，扩大 Selenium 本来的操作函数实现截图以及高亮显示操作元素的性能

既然 Selenium 原生的 click 操作函数并不具备截图以及高亮显示操作元素的性能，那咱们就来实现一个本人 click 函数。当本人实现的 click 函数被调用时：

首先，用 Javascript 代码高亮显示被操作的元素，高亮的实现形式就是利用 JavaScript 在对象的边框上渲染一个 5-8 个像素的边缘；

而后，调用 screenshot 函数实现点击前的截图；

最初，调用 Selenium 原生的 click 函数实现真正的点击操作。

那么，当前但凡须要调用 click 函数时，都间接调用这个本人封装的 click 函数，间接失去高亮了被操作对象的界面截图。

第二，在相干的 Hook 操作中调用 screenshot 函数实现截图以及高亮显示操作元素的性能

其实应用 Hook 的办法比较简单和直观，然而你首先要了解什么是 Hook。

Hook 中文的意思是“钩子”，间接通过定义介绍什么是“钩子”会有些难以了解，那么我就通过一个实例来跟你解释一下。当执行某个函数 F 时，零碎会在执行函数 F 前先隐式执行一个空实现的函数，那么当你须要做一些扩大或者拦挡时，就能够在这个空实现的函数中退出自定义的操作了。那么这个空实现的函数就是所谓的 Hook 函数。

第三是全球化 GUI 测试报告的翻新设计

所谓全球化测试是指，同一个业务在寰球各个国家都有本人网站。比方，一些大型全球化电商企业在很多国家都有本人的站点，那么对这些站点的测试除了要关注根本的性能，以及各个国家特有的性能外，还要去验证界面布局以及翻译在上下文环境中是否适合。

晚期的做法是，雇佣当地的测试工程师，由他们手工执行次要的业务场景测试，并验证相干的页面布局，以及翻译内容与上下文中的匹配度。在当地专门雇佣的这些测试工程师，被称为 LQA。

显然，延聘 LQA 的效率非常低，次要起因是：全副测试工作都由 LQA 在我的项目前期手工执行，执行前还须要对他们进行业务培训；同时，咱们须要筹备十分详尽的测试用例文档，LQA 也要花很大的精力去截图并实现最终的测试报告。为了解决这种低效的模式，最好的解决办法就是：利用 GUI 自动化测试工具生成残缺的测试执行过程的截图。

这样，LQA 就不再须要去手工执行测试用例了，而是间接分析测试报告中业务操作过程中 GUI 界面截图就能够了，而后发现页面布局问题或者是不失当的翻译问题。

这个计划看起来曾经比拟完满了，LQA 的工作重点也更清晰了，但这并不是最优的计划。因为这些 LQA 在理论工作中，还会有以下三个比拟苦楚的中央：

须要常常在多个国家的测试报告之间来回切换去比拟页面布局；

须要频繁切换到美国网站（也就是主站）的报告，去比拟翻译内容与上下文的匹配度；

发现缺点后，还是须要从 GUI 测试报告中复制截图，并用图像软件标注有问题的点，而后能力关上缺点管理系统递交缺点报告。

退出移动版