这时我们如果想让他通过的话就得改代码了，让其正确了才能提交，这样才是安全可靠的一份代码。
修改操作：
1.注释掉tests目录下e2e中的test.js，e2e我们后面讲
2.example.spec.js中的3修改为’12’
3.zhifeiji.spec.js的aftermounted1恢复为aftermounted
经过这三步操作，我们就算是解决了测试的报错，然后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') }) })
将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
好了，今天的前端自动化测试就讲到这里。
