自学内容网 自学内容网

前端自动化测试(一):揭秘自动化测试秘诀

在这里插入图片描述

正文开始如果觉得文章对您有帮助,请帮我三连+订阅,谢谢💖💖💖


前言

在日常开发中,我们常会遇到下面的问题:

  • 每次在版本发布上线之前,需要在电脑前蹲上好几个小时甚至更长时间对你的应用进行测试,这个过程非常枯燥而痛苦。
  • 当代码的复杂度达到一定级别,且维护者的数量不止你一个时,你会逐渐察觉到在开发新功能或修复 bug 时会变得越发小心翼翼。即使代码看起来没问题,你心里还是会犯嘀咕:这个 Feature 会不会带来其他 Bug?这个 Fix 会不会引入其他 “Feature”?
  • 当你想要对项目中的代码进行重构时,会花费大量时间进行回归测试。

以上这些问题大多源于开发者使用的最基本的手动测试方式。解决这些问题的根本在于引入自动化测试方案

自动化测试 VS 手动测试

特性自动化测试手动测试
速度快速,可以连续运行多个测试用例。慢,需要逐个测试用例手动执行。
一致性高,每次执行结果一致。低,可能因人为因素导致结果不一致。
覆盖率高,可以覆盖大量测试用例。低,可能遗漏一些测试用例。
成本初始成本高,需要编写和维护测试脚本。初始成本低,但随着测试用例增加,成本可能增加。
维护需要维护测试脚本,但一旦建立,维护成本较低。每次更改需求或功能时,需要重新执行所有测试用例。
灵活性低,测试用例需要预先定义。高,可以根据需要随时调整测试用例。
准确性高,可以精确执行测试用例。低,可能因人为因素导致测试结果不准确。
重复性高,可以重复执行测试用例。低,重复执行测试用例可能会出错。
资源需要专门的测试工具和环境。需要测试人员和测试设备。
发现问题可以发现一些手动测试难以发现的问题。可以发现一些自动化测试难以发现的问题。
适用场景适用于回归测试、持续集成等场景。适用于探索性测试、用户验收测试等场景。
可扩展性随着测试用例的增加,可以扩展测试范围。随着测试用例的增加,执行时间可能显著增加。
风险测试脚本可能存在缺陷,导致测试结果不准确。测试人员可能因疲劳或疏忽导致测试结果不准确。

测试分类

前端开发最常见的测试主要是以下几种:

  • 单元测试:验证独立的单元是否正常工作。
  • 集成测试:验证多个单元协同工作。
  • 端到端测试:从用户角度以机器的方式在真实浏览器环境验证应用交互。
  • 快照测试:验证程序的 UI 变化。

何为单元测试

  • 单元测试是对应用程序最小的部分(单元)运行测试的过程。通常,测试的单元是函数,但在前端应用中,组件也是被测单元。
  • 单元测试可以单独调用源代码中的函数并断言其行为是否正确。
  • 与端到端测试不同,单元测试运行速度很快,只需几秒钟即可完成,因此你可以在每次代码变更后运行单元测试,从而快速得到变更是否破坏现有功能的反馈。
  • 单元测试应该避免依赖性问题,比如不存取数据库、不访问网络等,而是使用工具虚拟出运行环境。这样可以最小化测试成本,不需花大力气搭建各种测试环境。

单元测试的优缺点

优点

  • 提升代码质量,减少 Bug。
  • 快速反馈,减少调试时间。
  • 让代码维护更容易。
  • 有助于代码的模块化设计。
  • 代码覆盖率高。

缺点

  • 由于单元测试是独立的,无法保证多个单元一起运行时是否正确。

测试案例

上面提到单元测试的单元是函数,我们可以写两个函数,然后进行测试。看下面的例子:

// math.js
function sum (a, b) {
  return a + b; 
}

function subtract (x, y) {
  return x - y;
}

module.exports = {
  sum,
  subtract
};

测试代码

通过测试代码可以很方便地帮助验证代码的正确性。

const { sum, subtract } = require('./math');

const result = sum(1, 2);
const expected = 3;

if (result !== expected) {
  throw new Error(`1 + 2 应该等于 ${expected},但是结果却是 ${result}`);
}

const result2 = subtract(2, 1);
const expected2 = 1;

if (result2 !== expected2) {
  throw new Error(`2 - 1 应该等于 ${expected2},但是结果却是 ${result2}`);
}

测试函数的封装

之前示例的测试代码太过繁琐,可以思考如何封装得更简便一些,例如:

expect(sum(1, 2)).toBe(3);
expect(subtract(2, 1)).toBe(1);

这样的测试代码就像自然语言说话一样,很舒服。

实现 expect 方法

function expect (result) {
  return {
    toBe (actual) {
      if (result !== actual) {
        throw new Error(`预期值和实际值不相等,预期 ${result},实际 ${actual}`);
      }
    }
  };
}

实现 test 函数

增加错误提示信息:

const { sum, subtract } = require('./math');

test('测试加法', () => {
  expect(sum(1, 2)).toBe(3);
});

test('测试减法', () => {
  expect(subtract(2, 1)).toBe(1);
});

function test (description, callback) {
  try {
    callback();
    console.log(`${description} 通过测试`);
  } catch (err) {
    console.error(`${description} 没有通过测试:${err}`);
  }
}

function expect (result) {
  return {
    toBe (actual) {
      if (result !== actual) {
        throw new Error(`预期值和实际值不相等,预期 ${result},实际 ${actual}`);
      }
    }
  };
}

结语

自动化测试是前端开发中提升效率、保证质量的利器。它不仅能够减轻手动测试的繁重工作,还能在代码发生变动时迅速提供反馈,确保代码的稳定性和可靠性。通过本文的介绍,相信你已经对自动化测试有了简单理解,后面我会继续介绍更多使用的测试工具

在实际项目中,合理地引入自动化测试,不仅能够大幅度提升开发效率,还能让你在面对复杂的项目需求和频繁的代码变更时更加从容。



原文地址:https://blog.csdn.net/cdns_1/article/details/140639628

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!