vue的自动化测试详解

大厂视野

1.流量大

  • 性能优化

2.项目复杂

  • 源码

3.持续迭代

4.项目稳定运行

  • 自动化测试
  • 需求评审
  • 开发
  • 测试(人点)(可以使用自动化测试完成一部分)
  • 上线

5.为什么要写测试呢

  • 测试代码可读性好,易于维护
  • 替代了测试的部分工作,无形中完成了一部分任务

准备

1.了解自动化测试

2.jest

3.cypress

4.端对端和自动化

请前往新地址查阅(该篇文章到现在2021年因为相关依赖更新有了坑,新文章中都已解决):https://blog.csdn.net/qq_32442973/article/details/120665312

测试分类

常⻅见的开发流程⾥里里,都有测试⼈人员,这种我们成为⿊黑盒测试,

测试⼈人员不不管内部实现机制,只看最外层的输⼊入输出,⽐比如你写⼀一个加法的⻚页⾯面,会设计 N个case,测试加法的正确性,这种代码⾥里里,我们称之为E2E测试

更更负责⼀一些的,我们称之为集成测试,就是集合多个测试过的单元⼀一起测试

还有⼀一种测试叫做⽩白盒测试,我们针对⼀一些内部机制的核⼼心逻辑 使⽤用代码 进⾏行行编写 我们称之为单元测试

这仨都是我们前端开发⼈人员进阶必备的技能!

我们其实⽇日常使⽤用 console,算是测试的雏形吧,console.log(add(1,2) == 3)

测试的好处

组件的单元测试有很多好处:

  • 提供描述组件⾏行行为的⽂文档
  • 节省⼿手动测试的时间
  • 减少研发新特性时产⽣生的 bug
  • 改进设计
  • 促进重构

⾃自动化测试使得⼤大团队中的开发者可以维护复杂的基础代码。让你改代码不不再⼩小⼼心翼翼

在这里插入图片描述

我们先来创建一个vue项目

后面选择jest和cypress

装好了以后有个test目录,下有两个目录,unit和e2e,unit是单测,e2e是端对端

npm run test:unit 就可以进行测试了

单元测试

单元测试(unit testing),是指对软件中的最⼩小可测试单元进⾏行行检查和验证。例如一个函数。

单测针对组件 或者函数 或者模块(开发人员知道具体逻辑)

在vue中,推荐⽤用 Mocha+chai 或者jest,咱们使⽤用 jest演示,语法基本⼀一致

?写一个demo

在src建立utils.js,写个add函数导出

export function add(x,y) {
    return x + y
}

在tests下的unit下的example.spec.js中修改(当然也可以新建一个*.spec.js,固定格式的文件)

// import { shallowMount } from '@vue/test-utils'
// import HelloWorld from '@/components/HelloWorld.vue'

// describe('HelloWorld.vue', () => {
//   it('renders props.msg when passed', () => {
//     const msg = 'new message'
//     const wrapper = shallowMount(HelloWorld, {
//       propsData: { msg }
//     })
//     expect(wrapper.text()).toMatch(msg)
//   })
// })

import { add } from '@/utils.js'
describe('测试加法函数',()=>{
  //测试代码可读性最好
  //分组
  it('一个具体的功能测试,测测试数字相加',()=>{
    expect( add(1,2) ).toBe(3)
  })
  it('一个具体的功能测试,测测试数字和字符串相加',()=>{
    expect( add('a',2) ).toBe('a2')
  })
  it('一个具体的功能测试,测测试数字字符串相加',()=>{
    expect( add('1',2) ).toBe(3)
  })
})

npm run test:unit 后

在这里插入图片描述

这个案例我们就用到了4个api

api介绍

  • describe : 定义⼀一个测试套件
  • it :定义⼀一个测试⽤用例例
  • expect :断⾔言的判断条件
  • toBe :断⾔言的⽐比较结果

测试vue组件

components下新建KaiKeBa.vue

<template>
    <div>
        <span>{{ msg }}</span>
        <span>{{ msg1 }}</span>
        <button class="btn" @click="changeMsg">点我</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg: "vue test",
            msg1: '你好'
        }
    },
    created() {
        this.msg = 'aftermounted'
    },
    mounted() {
        this.msg1 = '开课吧'
    },
    methods: {
        changeMsg(){
            this.msg = 'click over'
        }
    },
}
</script>

views目录下的home组件中引入

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <KaiKeBa></KaiKeBa>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import KaiKeBa from '@/components/KaiKeBa.vue'

export default {
  name: 'home',
  components: {
    KaiKeBa,
    HelloWorld
  }
}
</script>

在tests目录下的unit目录下建立kaikeba.spec.js

import Vue from 'vue'
import KaiKeBaComp from '@/components/KaiKeBa.vue'
import { mount } from '@vue/test-utils'

describe('测试KaiKeBa组件',() => {
    it('测试初始化的data',() => {
        expect( KaiKeBaComp.data().msg ).toBe('vue test')
    })
    //created和mounted里数据测试都是一样的
    it('测试新建完毕后,create生命周期后的数据',() => {//created
        let vm = new Vue(KaiKeBaComp).$mount()
        expect(vm.msg).toBe('aftermounted')
    })
    it('测试新建完毕后,create生命周期后的数据',() => {//mounted
        let vm = new Vue(KaiKeBaComp).$mount()
        expect(vm.msg1).toBe('开课吧')
    })
    //点击事件测试
    it('测试点击后,msg的改变',() => {
        // $mount处理不了用户交互,所以我们要用到vue官方推荐的@vue/test-utils
        let wrapper = mount(KaiKeBaComp)
        expect( wrapper.vm.msg ).toBe('aftermounted')
        //点击一下
        wrapper.find('.btn').trigger('click')
        expect( wrapper.vm.msg ).toBe('click over')
    })
})

如果测试用户交互的话,需要用到官方推荐的@vue/test-utils,执行cnpm i @vue/test-utils --save,相关文档在vue官网

在 @vue/test-utils 中引入mount替代vue的$mount的是因为$mount的是虚拟的,存在虚拟内存中,处理不了dom,所以用mount(对不对我不知道,这句话仅供参考)

测试覆盖率

jest⾃自带覆盖率,如果⽤用的 mocha,需要使⽤用 istanbul来统计覆盖率

package.json⾥里里修改 jest配置

jest: {
    "collectCoverage": true,
    "collectCoverageFrom": ["src/**/*.{js,vue}"],
  }

倘若有个jest.config.js那么就在 moduleFileExtensions 上一行加入,这个文件是对jest的配置

"collectCoverage": true,
"collectCoverageFrom": ["src/**/*.{js,vue}"],

在跑一下npm run test:unit

在这里插入图片描述

生成的报告文件在coverage目录下,打开可以看到这么个鬼东西

在这里插入图片描述

这个测试报告可以很精确的看到我们哪些没测试,哪些测试了,我在KaiKeBa里加点东西不测试,来看看结果

在这里插入图片描述

蓝色的我们可以点进去的

在这里插入图片描述

指出了没有测到的地方,判断了newData是否等于1,显然不等于的

我们可以给他测试下,要这么写,给newData赋值

it('测试点击后,newData == "1"的结果',() => {
        // $mount处理不了用户交互,所以我们要用到vue官方推荐的@vue/test-utils
        let wrapper = mount(KaiKeBaComp)
        wrapper.vm.newData = '1'
        //点击一下
        wrapper.find('.btn').trigger('click')
        expect( wrapper.vm.msg ).toBe('click false')
    })

在这里插入图片描述

如何测试不通过就阻止代码git提交

安装husky:cnpm i husky --save

配置husky,在package.json

"husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }

当然这是文档的,我们要按我们所需的改成

"husky": {
    "hooks": {
      "pre-commit": "npm run test:unit"
    }
  }

代表再提交(commit)前先执行npm run test:unit

?‍?验证:

修改测试代码文件kaikeba.spec.js

it('测试新建完毕后,create生命周期后的数据',() => {//created
        let vm = new Vue(KaiKeBaComp).$mount()
        expect(vm.msg).toBe('aftermounted')
    })

改为

it('测试新建完毕后,create生命周期后的数据',() => {//created
        let vm = new Vue(KaiKeBaComp).$mount()
        expect(vm.msg).toBe('aftermounted1')
    })

这样测试肯定是不通过的

在这里插入图片描述

这时,我们来提交代码,add后再commit

在这里插入图片描述

那么我们再将测试文件改回来,让测试可以通过

在这里插入图片描述

如图:测试通过,代码也commit提交了

E2E测试

e2e针对应用,站在测试人员的角度,没有什么mount 加载,只有按钮 页面,输入框,文本等

借⽤浏览器器的能力,站在⽤户测试⼈员的角度,输⼊框,点击按钮等,完全模拟用户,这个和具体的框架关系不大,完全模拟浏览器行为

?将views下的Home组件的

<HelloWorld msg="Welcome to Your Vue.js App"></HelloWorld>

代码恢复

?看看tests目录下e2e目录下的spec下的test.js,有这么一段

// https://docs.cypress.io/api/introduction/api.html

describe('My First Test', () => {
  it('Visits the app root url', () => {
    cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
})

这是测试代码,如果我们不做前面的恢复操作的话,测试肯定是不通过的

?执行npm run test:e2e,进行测试

项目会启动,并且会弹出一个有ok的弹窗,我们直接确定,还会有测试文件的js,选择对应的测试文件点进去

这样就已经测试通过了

?再来测试一个about页

// https://docs.cypress.io/api/introduction/api.html

describe('My First Test', () => {
  it('Visits the app root url', () => {
    //访问根目录
    cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
  it('测试about页', () => {
    //访问about
    cy.visit('about')
    cy.contains('h1', 'This is an about page')
  })
})

结果是这个样子

在这里插入图片描述

后测的about,就最后打开了about页,也停留在了about页面

这些都是页面某个元素的文本的测试,那么我们再来个交互试试,在我们的KaiKeBa组件上有个点击事件,我们来试试

// https://docs.cypress.io/api/introduction/api.html

describe('My First Test', () => {
  it('Visits the app root url', () => {
    //访问根目录
    cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
  it('测试about页', () => {
    //访问about
    cy.visit('about')
    cy.contains('h1', 'This is an about page')
  })
  it('KaiKeBa组件',() => {
    //访问根目录
    cy.visit('/')
    cy.contains('#msg','aftermounted')
    cy.get('button').click()//点击button元素
    cy.contains('#msg','click over')
  })
})

在这里插入图片描述

左边那一条条可以点击,点击不同的项,也会进入不同的事件状态,例如我点了CONTAINS,文本变成了click over

题外话:测试页面前后差异,或者两个页面的差异可以用page-monitor;地址: https://github.com/fouber/page-monitor

  • 6
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
Selenium是一个用于Web应用程序测试自动化测试工具。它可以模拟用户在浏览器中的操作,例如点击按钮、输入文本、选择选项等。Vue是一个流行的JavaScript框架,用于构建用户界面。它具有响应式的数据绑定和组件化的特性。 要实现Selenium和Vue自动化测试,可以使用下面几个步骤: 1. 安装Selenium和相应的浏览器驱动程序。Selenium支持多种浏览器,例如Chrome、Firefox和Safari等。根据需要选择相应的驱动程序,并将其配置到测试环境中。 2. 编写测试用例。测试用例可以使用各种编程语言编写,例如Python、Java和C#等。根据项目的需求和测试的目标,编写相应的自动化测试脚本。在测试脚本中,可以使用Selenium的API来模拟用户操作和验证页面元素。 3. 启动浏览器并加载Vue应用程序。使用Selenium的驱动程序打开浏览器,并导航到Vue应用程序的URL。在浏览器中加载Vue应用程序后,可以对其进行操作和验证。 4. 模拟用户操作。使用Selenium的API,可以模拟用户在浏览器中的各种操作,例如点击按钮、填写表单、选择下拉框等。通过这些操作,可以验证Vue应用程序的功能和交互性。 5. 验证页面元素。使用Selenium的API,可以验证特定的页面元素是否存在、可见、可点击等。通过验证页面元素,可以确保Vue应用程序的正确性和完整性。 6. 运行测试用例。将编写的测试用例运行起来,可以自动执行各种操作和验证。在测试过程中,可以将测试结果输出到日志文件中,以便后续分析和报告。 通过以上步骤,可以实现Selenium和Vue自动化测试。这样可以提高测试的效率和一致性,并减少人工测试的工作量。同时,自动化测试还可以提供更快速和稳定的反馈,以便及时发现和修复潜在的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端纸飞机

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值