自动化测试

自动化测试与技术选型

认识并使用jest

e2e测试

devops

自动化测试

为什么需要测试

让程序稳定健壮，提高代码质量，减少bug，提高开发效率。

• 频繁变动的需求
• 人力成本
• 不太重视

什么时候 或者什么场景需要考虑自动化测试

• 公共库项目开发维护 vue react babel
• 中长期项目
• 需求趋于稳定后的系统

测试类型

• 单元测试 Unit Test 小的功能的测试 Jest @vue/test-utils Mocha
• 集成测试 Integration Test 小的模块测试
• 端到端测试 End-to-End Test 从页面出发去测试一些功能
• E2E测试 End-to-End Test (UI+接口) puppeteer

断言库 Assert

单元测试原理

通过一些测试用例 来编写测试代码 保证测试用例通过

const chalk = require('chalk')
// import chalk from 'chalk'
// 描述测试场景
function describe(desc, fn) {
  console.log(chalk.green(desc))
  fn()
}

// 单元测试的测试描述
function it(desc, fn) {
  console.log(chalk.yellow(desc))
  fn()
}

// 断言
function expect(result) {
  return {
    toBe(actual) {
      if (result != actual) {
        console.log(chalk.red('FAIL', result, actual))
        throw new Error(`预期值和实际值不相等，预期${actual},实际是${result}`)
      }
      console.log('success', result, actual)
    },
    toEqual(actual) {
      //   if (result != actual) {
      //     console.log(chalk.red('FAIL', result, actual))
      //     throw new Error(`预期值和实际值不相等，预期${actual},实际是${result}`)
      //   }
      //   console.log('success', result, actual)
    },
  }
}

module.exports = {
  describe,
  it,
  expect,
}

const { expect, describe, it } = require("./test");

function sum(a, b) {
  return a + b;
}

describe("用来测试sum函数", () => {
    it("1 + 1 = 2", () => {
        expect(sum(1, 1)).toBe(2);
    });
    it("1 + 2 = 3", () => {
        expect(sum(1, 2)).toBe(3);
    });
    it("2 + 3 = 5", () => {
        expect(sum(2, 3)).toBe(5);
    });
});

JEST

• 快照测试
• 测试覆盖率
• 基本使用
  • 基本方法测试

常用的API

• describe 将多个相关的测试进行组合 组合到一块
• it
• expect 断言

生命周期

• beforeAll 所有用例执行前调用
• beforeEach 每个测试用例执行前调用
• after All 执行结束后调用
• afterEach 每个执行后调用

断言钩子

• toBe 严格比对 === 内存空间都是一致的
• toEqual 值比对 对象 递归遍历 比对值

快照测试

确保UI不会有意外的改变

测试覆盖率

• stmts 语句覆盖率
• branch 是否执行了每个分支
• funcs 函数覆盖率
• lines 是否执行每一行代码

E2E测试

puppeteer 无头浏览器

cypress

puppeteer

node库 chrome

在node环境下面对浏览器行为进行控制

• 生成页面快照 图片 pdf
• 抓取spa
• 从网站上抓取需要的内容
• 自动表单提交 UI 测试 键盘输入
• 测试chrome扩展
• 抓取应用的性能数据

技术点

• browser 浏览器实例
• page页面
• executionContext js执行环境
• elementhandle 对应dom的元素借点
• jshandler js对象

测试场景

• 表单输入 用户名 密码 提交 页面跳转
• 体验优化 生成骨架屏 直接使用对应的页面截图

puppteer 制定一些规则 img 灰色代码块替换

CI/CD

工程化 => 研发工作台 => 管理维护 发布 运维

ci

构建 => 生成最终构建产物

Test => 保证产物健壮性

cd

最后阶段 => 发布到对应的环境上 => 线上服务器 nginx

git action 自动化部署

workflow 工作流程

• 配置文件

• .github/workflows

• xxx.yml

  • name workflow名称
  • on:[push pull_request]

• job 任务 可以配置一项或者多项任务

  • name 名称 任务说明
  • needs 运行顺序
    • jobs:
      • job1:
      • job2:
        • needs: job1

      • job3:
        - needs: [job1, job2]
        - runs-on: ubuntuxx

• step 步骤

  • name 步骤名称
  • run 执行的命令 action
  • env 环境变量

• action 动作