一文带你学习前端 - 自动化测试

最新推荐文章于 2024-07-23 14:14:32 发布
最新推荐文章于 2024-07-23 14:14:32 发布
阅读量2.2k 收藏 7
点赞数 1
文章标签： 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38845858/article/details/130993220
版权

theme: devui-blue

前端自动化测试

1. 自动化测试基本概念介绍

前言

一般我们实现功能，基本都是两部分写代码，调试/测试。写代码和测试的时间，基本都是55分。如果是测试逻辑，可能要打一下log，或者打断点去调试。测试ui和逻辑，可能要点击界面进行交互，然后再测试逻辑，总之都是在手动测试。今天我给大家唠唠自动化测试

未命名文件.png

1.1黑盒测试和白盒测试

  • 黑盒测试一般也被称为功能测试，黑盒测试要求测试人员将程序看作一个整体，不考虑其内部结构和特性，只是按照期望验证程序是否能正常工作(点点点，达到预期就行)
  • 白盒测试是基于代码本身的测试，一般指对代码逻辑结构的测试(自动化化测试或者说自己测自己)

1.2测试分类

单元测试(Unit Testing)

单元测试是指对程序中最小可测试单元进行的测试,例如测试一个函数、一个模块、一个组件…

  • tip: 所以我们的组件库，特别适合单测。一些重要的模块，比如用户管理，支付管理，购物车管理…

集成测试(Integration Testing)

将已测试过的单元测试函数进行组合集成暴露出的高层函数或类的封装，对这些函数或类进行的测试。

  • tip：集成测试通常在单元测试完成后进行。常见的集成测试包括：增量式测试,自顶向下测试

端到端测试(E2E Testing) 打开应用程序模拟输入，检查功能以及界面是否正确，比如puppeteer，Selenium，Cypress

1.3 TDD & BDD

TDD是测试驱动开发(Test-Driven Development)

TDD的原理是在开发功能代码之前，先编写单元测试用例代码

BDD是行为驱动开发(Behavior-Driven Development)

开会出需求，制作ui，开发，QA测试

总结： TDD是先写测试在开发 （一般都是单元测试，白盒测试），而BDD则是按照用户的行为来开发，再根据用户的行为编写测试用例 （一般都是集成测试，黑盒测试）

1.4 测试框架

  • Karma Karma为前端自动化测试提供了跨浏览器测试的能力，可以在浏览器中执行测试用例
  • Mocha 前端自动化测试框架,需要配合其他库一起使用，像chai、sinon…
  • Jest Jest 是facebook推出的一款测试框架,集成了 Mocha,chai,jsdom,sinon等功能。
  • Vitest Vitest 是一个相对较新的测试框架，专为 Vue (包括 Vue 2 和 Vue 3) 和 Vite 项目而生。它使用了 Vite 的优势，创建了一个更快、更现代的、易于设置的测试环境。
  • …

2. Jest核心应用

http://csdn.net/weix/?a=1&b=2

比如我们现在要实现一个url的解析参数你会想到几种方式 ？

  • 先来体验下手动测试

image.png

我们每写完一个功能，会先手动测试功能是否正常，测试后可能会将测试代码注释起来。这样会产生一系列问题，因为会污染源代码，所有的测试代码和源代码混合在一起。如果删除掉，下次测试还需要重新编写。

所以测试框架就帮我们解决了上述的问题

2.1 分组、用例

Jest 是基于模块的，我们需要将代码包装成模块的方式，分别使用export 将parser ，stringify 这两个方法导出

安装jest

npm init -y # 初始化pacakge.json
npm i jest

我们建立一个qs.test.js来专门编写测试用例，这里的用例你可以认为就是一条测试功能 （后缀要以.test.js结尾，这样jest测试时默认会调用这个文件）

常用API： describe，it，expect，匹配器

  1. describe：describe 函数用于将一组相关的测试用例组织在一起。它接受两个参数：一个描述性的字符串，用于描述测试组的目的；一个回调函数，包含我们要运行的测试代码。回调函数中通常包含一个或多个 it 函数。
describe('这是一个测试组的描述', () => {
  // 这里放置测试代码
});

2. it：it 函数（也可以使用 test 函数）表示一个具体的测试用例。它同样接受两个参数：一个描述性的字符串，用于描述测试用例的目的；一个回调函数，包含我们要验证的代码块。回调函数中通常包含一个或多个 expect 函数。

it('这是一个测试用例的描述', () => {
  // 这里放置要验证的代码
});

3. expect：expect 函数用于实际执行断言，检查代码的实际输出是否符合预期。它接受一个待测试的值，然后可以与一个“匹配器”（matcher）一起使用来检查预期结果。

expect(实际值).匹配器(预期值);

image.png

通过配置scripts 来执行命令

"scripts": {
    "test": "jest"
}·

这个时候会报错，因为node环境下不支持es6模块的语法，需要babel转义,当然你也可以直接使用commonjs规范来导出方法，因为大多数现在开发都采用es6模块，所以就安装一下~

# core是babel的核心包 preset-env将es6转化成es5
npm i @babel/core @babel/preset-env --save-dev

并且配置.babelrc文件，告诉babel用什么来转义

{
    "presets":[
        [
            "@babel/preset-env",{
                "targets": {"node":"current"}
            }
        ]
    ]
}

image.png

2.2 matchers匹配器

  • 主要三部分： 相等、不等、是否包含

image.png

2.3 测试操作节点方法

export const removeNode = (node) => {
    node.parentNode.removeChild(node)
};

import { removeNode } from "../dom";
it("测试删除节点- 创建一个元素，期望不是Null，删除。重新获取，断言是他是null", () => {
  document.body.innerHTML = '<div id="test"><div id="test1"></div>';
  let div = document.getElementById("test");
  expect(div).not.toBeNull();
  removeNode(div);
  //   removeNode(document.body);
  div = document.getElementById("test");
  expect(div).toBeNull();
});

image.png

常用命令

  • 只测试变化的文件 watchAll
  • 只测试哪一个 only
"scripts": {
    "test": "jest --watchAll"
}

3. Jest进阶

2.1 异步函数的测试

异步函数的两种情况： 回调函数 和 promise

// 异步代码测试
export const getDateCallback = (cb) => {
  setTimeout(() => {
    cb({ name: "wd" });
  }, 3000);
};
export const getDataPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: "wd" });
    }, 3000);
  });
};

test

import { getDataPromise, getDateCallback } from "../3.async";

describe("description", () => {
  it.only("测试传入回调函数 获取异步返回结果", () => {
    getDateCallback((data) => {
      expect(data).toEqual({ name: "wd" });
    });
  });
});

result:

image.png

明明设置的三秒,为什么感觉没走？ 因为不支持异步，希望等待结果完成再调用 done

import { getDataPromise, getDateCallback } from "../3.async";

describe("description", () => {
 it.only("测试传入回调函数 获取异步返回结果", (done) => {
   getDateCallback((data) => {
     expect(data).toEqual({ name: "wd" });
     done()
   });
 });
});

image.png
jest 中 promsie 该如何处理异步调用呢

方式一

it("测试promise done", (done) => {
    return getDataPromise().then((data) => {
      expect(data).toEqual({ name: "wd" });
      done();
    });
  });

方式二

  it("测试promise async + await", async () => {
    let data = await getDataPromise();
    expect(data).toEqual({ name: "wd" });
  });

3.2 Jest 的 mock

看一个demo，将异步的时间调长

image.png

mock: 真函数不靠谱，用假函数。

3.2.1 模拟Timer
jest.useFakeTimers(); // 创建出一个模拟的timer

    jest.runAllTimers(); // 运行所有的定时器
    jest.advanceTimersByTime(5000); // 跳过多少毫秒
    jest.runOnlyPendingTimers(); // 只运行当前等待的timer ‼️

我们这里用

image.png

image.png

虽然设置了很长的时间，但是我们使用mock 来模拟timer ，所以就直接变成同步执行了

4. Jest钩子函数

为了测试的便利，Jest中也提供了类似于Vue一样的钩子函数，可以在执行测试用例前或者后来执行

  • beforeAll 在所有测试用例执行前执行
  • afteraAll 在所有测试用例执行后
  • beforeEach 在每个用例执行前
  • afterEach 在每个用例执行后

5. Jest配置文件，测试覆盖率

npx jest --init

"scripts": {
    "test": "jest --coverage"
}

可以直接执行npm run test,此时我们当前项目下就会产生coverage报表来查看当前项目的覆盖率

image.png

  • Stmts表示语句的覆盖率
  • Branch表示分支的覆盖率(if、else)
  • Funcs函数的覆盖率
  • Lines代码行数的覆盖率

5. Vue 中集成Jest

Vue Test Utils

在测试数据为空时，测试用例没有进行等待，直接断言了结果。由于 Vue.js 异步更新 DOM 的特性，如果不等待更新完成，测试的结果可能是不准确的。

5.1 测试HellowWorld组件

HellowWorld

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

test

import Vue from "vue";

import HelloWorld from "@/components/HelloWorld.vue";

describe("测试HelloWolrd 组件", () => {
  it("传入 msg 属性看能否渲染到h1标签内", () => {

    const baseExtend = Vue.extend(HelloWorld);
    // 获取当前组件的构造函数，并且挂载此组件
    const vm = new baseExtend({
      propsData: {
        msg: "hello"
      }
    }).$mount();
    expect(vm.$el.innerHTML).toContain("hello");
  });
});

是不是有点麻烦，我们可以使用 Vue Test Utils ，提供的mount/shallowMount 来代替Vue.extend,它用于安装和渲染我们的组件。我们将组件的属性传递给 mount 函数。另外，我们使用 wrapper 查询组件结构，并确保其 HTML 内容包含传递的 msg 属性。

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld, {
      props: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
    expect(wrapper.find("h1").text()).toMatch(msg);
  });
});
测试Todo组件

我们来采用TDD的方式来测试，也就是先编写测试用例
先指定测试的功能: 我们要编写个Todo组件

May-25-2023 12-23-09.gif

  1. 当输入框输入内容时会将数据映射到组件实例上
it("当输入框输入内容时会将数据映射到组件实例上", () => {
    // 1) 渲染Todo组件
    let wrapper = shallowMount(Todo);
    let input = wrapper.find("input");
    // 2.设置value属性 并触发input事件
    input.setValue("hello world");
    // 3.看下数据是否被正确替换
    expect(wrapper.vm.value).toBe("hello world");
  });
  1. 如果输入框为空则不能添加,不为空则新增一条
  it("如果输入框为空则不能添加,不为空则新增一条", async () => {
    let wrapper = shallowMount(Todo);
    let button = wrapper.find("button");
    // 点击按钮新增一条
    wrapper.setData({ value: "" }); // 设置数据为空
    button.trigger("click");
    console.log("len", wrapper.findAll("li").length);
    expect(wrapper.findAll("li").length).toBe(0);
    wrapper.setData({ value: "hello" }); // 写入内容
    await button.trigger("click");
    expect(wrapper.findAll("li").length).toBe(1);
  });
  1. 增加的数据内容为刚才输入的内容
it("增加的数据内容为刚才输入的内容", async () => {
    let wrapper = shallowMount(Todo);
    let input = wrapper.find("input");
    let button = wrapper.find("button");
    input.setValue("hello world");
    button.trigger("click");
    await wrapper.vm.$nextTick();
    expect(wrapper.find("li").text()).toMatch(/hello world/);
  });

根据测试用例，写出代码

<template>
  <div>
    <input type="text" v-model="value" />
    <button @click="addTodo">addTodo</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "todo",
  methods: {
    addTodo() {
      this.value && this.todos.push(this.value);
    }
  },
  data() {
    return {
      value: "",
      todos: []
    };
  }
};
</script>

使用Jest钩子函数将创建包裹器和移除

describe("测试Todo组件", () => {
let wrapper;
  beforeEach(() => {
    wrapper = shallowMount(Todo);
  });
  afterEach(() => {
    wrapper.unmount();
  });
})

好处

  1. 创建一个 Todo 组件的浅渲染 Wrapper实例，并将其保存为变量wrapper
  2. 在每个测试用例执行前调用 beforeEach 钩子函数，以确保每个测试用例都拥有一个统一的测试环境
  3. 在每个测试用例执行后调用 afterEach 钩子函数，以确保在一个测试用例执行完毕后清除其对应的测试环境

这样做能够避免不同测试用例之间的状态污染及其它副作用，确保测试用例的独立性。

总结

我们可能将这个Todo组件进行拆分，拆分成TodoInput组件和TodoList组件和TodoItem组件，如果采用单元测试的方式,就需要依次测试每个组件(单元测试是以最小单元来测试) 但是单元测试无法保证整个流程是可以跑通的，所以我们在单元测试的基础上还要采用集成测试

单元测试可以保证测试覆盖率高，但是相对测试代码量大，缺点是无法保证功能正常运行

2.集成测试粒度大，普遍覆盖率低，但是可以保证测试过的功能正常运行

3.一般业务逻辑会采用BDD方式使用集成测试（像测试某个组件的功能是否符合预期）一般工具方法会采用TDD的方式使用单元测试

4.对于 UI 组件来说，我们不推荐一味追求行级覆盖率，因为它会导致我们过分关注组件的内部实现细节，从而导致琐碎的测试

推开世界的门
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
〖Python接口自动化测试实战篇⑥〗- 接口抓包工具 Chrome 的使用
易编橙 · 终身成长社群，相遇已是上上签！
05-28 4万+
在之前的章节我们介绍了 [接口测试到底是什么] 以及它的一些基础定义，从该章节开始将正式开始怎么样去做接口测试。实际上现实生活中做任何事情都需要做一些准备工作，做接口测试也是如此。...
前端自动化测试！入门自动化测试基础篇
zjtdy的博客
04-30 748
前言 这篇文章是前端自动化测试系列的开始，自动化测试系列会从理论走向实践，真正带领大家学会使用前端自动化测试框架，并能在业务中落地。 看完整个系列，还不会使用自动化测试工具为生产提效，请来找我！ 点赞数过一百，下周更新前端自动化测试与 React 的结合，如何在 React 项目中落地，欢迎大家多多点赞评论收藏！你们的赞赏是我写作最大的动力！ 之前发沸点说掘金发文只发精品文，阅读量最少 3k，看看这次行不行。 悄悄说一句，文末有福利！ 众所周知的原因，前端作为一种特殊的 GUI 软件，做自动化测试困难重重
前端自动化测试
Mr_linjw的专栏
01-06 2505
测试自动化的好处在于反馈及时，能够极大地提高前端的开发效率。 在我们日常的开发过程中，是不是经常需要在项目跑起来之后去人工测试某些操作或者流程是否能够正常运行？是不是经常需要打断点或者使用 console.log 查看控制台信息来检查某个函数是否执行？ 这些需要我们自己手工测试代码的执行结果是否符合预期的场景，完全可以使用自动化测试的脚本代替。 现有的很多成熟的自动化测试框架完全可以模拟我们的手工操作，使用脚本自动运行测试用例，通常只需要几秒就能给出准确的反馈，同时还能侦听代码变化，自动执行项目中发生
六大前端自动化测试框架推荐，提升你的开发效率与质量
最新发布
weixin_71807218的博客
07-23 998
以上介绍了六个前端自动化测试框架，它们各有特点和适用场景。Jest适用于React应用程序的全面测试；Cypress适用于端到端测试和实时调试；Puppeteer适用于无头浏览器测试和网页爬取；React Testing Library适用于以用户为中心的React组件测试；而Karma则适用于需要跨浏览器和平台进行兼容性测试的项目。在选择测试框架时，请根据项目需求、团队技能和测试目标进行综合考虑。行动吧，在路上总比一直观望的要好，未来的你肯定会感 谢现在拼搏的自己！
前端自动化测试详解
wdquan19851029的专栏
08-06 4128
这篇文章主要向大家介绍前端自动化测试详解,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。 1 前言 文章研究了四个问题：什么是自动化测试、为何要自动化测试、什么项目适合自动化测试、自动化测试具体要怎么作。在寻找这四个问题答案的过程当中，梳理了一套完整的前端自动化测试方案，包括：单元测试、接口测试、功能测试、基准测试。 2 什么是自动化测试 维基百科是这样定义的html 在软件测试中，测试自动化（英语：Test automation）是一种测试方法，使用特定的软件，去控制测试
前端测试之自动化测试
桃子阿桃
08-18 380
前端测试之E2E测试 前端界, 浏览器兼容性是很头疼的wenti , 对于经验丰富的人来说, 很清楚浏览器有哪些坑, 但是对于大部分砖工, 最可怕的是代码明明在自己浏览器上运行很好, 但是到另一个浏览器就不行了, 因此保障代码能正常运行的方法便是能尽早发现问题然后解决 1. 为什么需要自动化测试? 项目迭代趋于稳定, 引入自动化测试能尽早发现问题, 保证产品质量. 测试作为完整的开发流程中最后一环, 而前端测试一般在产品开发流程中属于偏后的环节, 在整个开发架构中属于较高层次, 前端测试更偏向于GUI的特性
前端自动化测试（一）
webyouxuan的博客
09-09 4372
目前开发大型应用，测试是一个非常重要的环节，但是大多数前端开发者对测试相关的知识是比较缺乏的。因为可能项目开发周期短根本没有机会写，所以你没有办法体会到前端自动化测试的重要性。 来说说为什么前端自动化测试如此重要！ 先看看前端常见的问题: 修改某个模块功能时，其它模块也受影响，很难快速定位bug 多人开发代码越来越难以维护 不方便迭代，代码无法重构 代码质量差 增加自动化测试后： 我们为核心...
如何实现前端项目的自动化测试？一文4个步骤带你成功实现！_前端 实现自动化测试
2401_83739434的博客
04-10 502
如果是新起动的UI自动化测试，建议可以先选好框架，然后选择一个业务流程作为案例，以该案例为目标去执行框架的搭建和脚本的开发，完成开发后主要投入回归测试当中，看看实际执行的效果如何，然后统计投入的时间和人力成本，然后再进行下一步的推进。除了显示等待外，还可以进一步优化，做个循环处理，就是等待3次，每次等待失败后可以重新刷新等待。PO，是Page Object的缩写，简单来说，就是将前端项目中的每个页面封装为一个“类”，页面上的元素都封装为实例的“属性”，页面上的功能操作都封装为实例的“方法”。
什么是自动化测试，这就是自动化测试。一文吃透自动化测试【实践总结】建议收藏
Yanan990830的博客
10-27 4008
自动化测试流程 　　（1）选取模块 　　（2）选择用例（主流程用例） 　　（3）按页面编写操作方法 　　（4）按用例编写用例流程脚本 　　（5）按用例编写数据查询方法 　　（6）执行用例 　　（7）输出报告（后期扩展，增加执行日志和异常截图以便跟踪缺陷）。 　　综上，当脚本内容编写结束并且业务需求和测试需求均无更改的时候，执行后两步操作即可。查看报告内容，如发现缺陷，需按用例内容重现缺陷并提交至禅道管理系统。
一文带你看懂软件测试（功能、接口、性能、自动化）详解
与君初相识，犹如故人归
10-07 1058
我们在不同文档中看到的“状态迁移图”、“流程图”、“菜单树”，在一定程度上都是功能图的不同表现，不同测试人员可能对具体方法的使用稍有不同。现在的软件几乎都是用事件触发来控制流程的，事件触发时的情景便形成了场景，而同一事件不同的触发顺序和处理结果就形成事件流。是测试系统能否满足实际运行时的需要，还是目前的系统在哪些方面制约系统性能的表现，或者，哪些系统因素导致。特性：必须设计的用例；jmeter性能测试，就是通过接口对服务器进行高并发访问的，所以脚本的编写的就和接口测试的时候差不多，输入url，参数等，
一文解决Postman 接口自动化测试
qq_60168783的博客
12-24 238
前言 本文适合已经掌握 `Postman` 基本用法的读者，即对接口相关概念有一定了解、已经会使用 `Postman` 进行模拟请求等基本操作。 工作环境与版本： * Window 7（64位） * Postman （Chrome App v5.5.3） _P.S. 不同版本页面 UI 和部分功能位置会有点不同，不过影响不大。_ 首先我们来思考一下，如果要达到自动化接口测试效果，在基本的模拟请求上还需要做哪些呢？ 我粗略概括为 3 个问题（ _欢迎在评论区留言更多补充建议_ ）： ...
前端自动化测试示例代码
06-14
前端自动化测试代码，详细讲解，前端晋级必备
前端自动化测试基础概念
DJ355的博客
07-07 338
对于稍微有一些开发经验的开发同学在开发过程中总会有一些经验总结。比如说当代码复杂度达到一定的级别，并且维护者的数量不止一个，就应该察觉到在开发新功能或者修复bug的时候，会变得小心翼翼。即使代码看起来没什么问题，但心里还是难免担忧，这个Feature会不会带来其它bug，这个fix会不会引入其它Feature。当想对项目中的代码进行重构的时候，会花费大量的时间进行回归测试。以上这些问题都是由于大多数开发者所使用最基本的手动测试的方式所带来的问题，解决它的根本原因就在于引入自动化测试方案。
前端自动化测试浅析
太空编程
01-21 342
前言：测试简介前端常见的问题：修改某个模块功能时，其它模块也受影响，很难快速定位bug多人开发代码越来越难以维护不方便迭代，代码无法重构代码质量差增加自动化测试后：我们为核心功能编写测试...
前端自动化测试 —— Jest 测试框架应用
nhb687096的博客
05-20 792
在软件测试中，自动化测试指的是使用独立于待测软件的其他软件来自动执行测试、比较实际结果与预期并生成测试报告这一过程。在测试流程已经确定后，测试自动化可以自动执行的一些重复但必要的测试工作。也可以完成手动测试几乎不可能完成的测试。对于持续交付和持续集成的开发方式而言，测试自动化是至关重要的。——来自 WiKi 百科。
前端自动化测试工具--使用karma进行javascript单元测试
热门推荐
前端-后端学习之路
10-14 1万+
前面我写了一篇博客是《前端自动化测试工具PhantomJS+CasperJS结合使用教程》其中使用CasperJS不仅可以进行单元测试，还可以进行浏览器测试，是个很不错的工具，今天介绍的工具是Karma+Jasmine+PhantomJS组合的前端javascript单元测试工具。1.介绍Karma是由Google团队开发的一套前端测试运行框架，karma会启动一个web服务器，将js源代码和测试脚
前端自动化测试初探（一）
weixin_34102807的博客
12-22 367
第一次尝试将学习过的知识通过文章的方式记录下来。在写文章的过程中，发现自己更多的不足以及测试的重要性。本篇文章主要是记录使用Jest + Enzyme进行React技术栈单元测试所需要掌握的基本知识以及环境搭建。 常用术语 根据测试手段划分 黑盒：完全不考虑程序的内部结构以及工作过程，仅关注程序的功能是否都正常。 白盒：已知程序内部逻辑结构，通过测试来证明程序内部能按照预定要求正确工作。 灰盒...
自动化测试实战：适合项目特点与Selenium应用
"《什么样的项目适合自动化测试 - ecpri v1.1协议》一文探讨了在IT行业中决定是否开展自动化测试的关键因素。文章指出，自动化测试的适用项目通常包括： 1. 明确的任务测试：项目中的测试目标应明确且稳定，避免...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值