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') }) })
将cy注释的那块恢复。
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') }) })
Tip：about页面测试不通过的，请将路由模式改为history或者将测试文件test.js中的cy.visit(‘about’)改为cy.visit(’#/about’)
后测的about，就最后打开了about页，也停留在了about页面
这些都是页面某个元素的文本的测试，那么我们再来个交互试试，在我们的zhifeiji组件上有个点击事件，我们来试试：
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('zhifeiji组件',() => { //访问根目录 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
好了，今天的前端自动化测试就讲到这里。
