一、首先自己搭建一个vue+elmentui+mockjs的前端项目
参照这篇文章
https://blog.csdn.net/qq_39046786/article/details/107689358
搭建完成后得到如图所示页面
二、编写登陆页面自动化的示例
首先删除这里面的官方示例,新建一个文件夹,命名文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里面设置
扫描二维码关注公众号,回复:
12643281 查看本文章
{ "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就启动起来了
点击运行得到结果
至此一个简单的登陆示例就完成了,下一篇讲保存登陆状态在其他页面使用