cypress 前端自动化测试实践二（编写示例）

一、首先自己搭建一个vue+elmentui+mockjs的前端项目

参照这篇文章

https://segmentfault.com/a/1190000015682126

搭建完成后得到如图所示页面

二、编写登陆页面自动化的示例

首先删除这里面的官方示例，新建一个文件夹，命名文login，表示这是前端登陆页面的所有自动化测试用例

内容入下

describe('The Login Page', () => { // 这个相当于测试套件
  const userLogin = Cypress.env('userLogin') // 把环境变量的值赋给userLogin
  const { username, password} = userLogin// 把userlogin的值赋给 username和password

  it('输入账号错误', () => { // 这个相当于测试用例的描述
    cy.visit('/login')
    cy.get('input[placeholder=账号]').type(username)// 定位账号输入框
    cy.get('input[placeholder=密码]').type(password)// 定位密码输入框
    cy.get('span').contains('login').click()// 定位提交登陆请求的按钮，并点击
    cy.get('body').should('contain', '账号错误')// 断言
  })
})

 

上文中的环境变量在cypressjson里面设置

 

{ "baseUrl": "http://localhost:8080",
  "integrationFolder": "cypress/integration",
  "testFiles": "**/*.spec.js",
  "video": false,
  "viewportHeight": 800,
  "viewportWidth": 1024,
  "chromeWebSecurity": false,
  "reporter": "junit",
  "reporterOptions": {
    "mochaFile": "cypress/reports/my-test-output[hash].xml",
    "toConsole": true
  },
  "env": {
    "userLogin": {
      "username": "zzz",
      "password": "zzz"
    }
  }
}

 

然后运行cypress

npm run cypress:open

注意这里需要另启一个控制台输入此命令，因为此时还没有讲用一个命令同时运行前端和cypress，这里提一下用的是

start-server-and-test,下一篇文章会讲到

此时cypress就启动起来了

点击运行得到结果

至此一个简单的登陆示例就完成了，下一篇讲保存登陆状态在其他页面使用