关于前端:cypress学习笔记二第一个用例

一、环境筹备

1、我的项目代码不便于展现，在github上找了一个开源我的项目做练习。https://github.com/iview/ivie…，依照文档运行我的项目，启动后发现界面清晰简洁，合乎预期。
2、在我的项目中装置cypress（参考第一个笔记）

装置胜利后零碎会默认生成测试目录和cypress配置文件

批改脚本中须要拜访的地址和断言

二、界面化执行

启动cypress客户端执行：
执行node_modules/.bin/cypress open开启一个界面化程序

点击脚本执行：

长处：

• 打印执行log，不便查问题
• 可查看每一步执行过程及截图
• 脚本更新后主动执行，不便调试

毛病：

• 每次执行须要启动chromium
• 不不便集成测试

三、命令行执行

cypress装置胜利后，我的项目的package.json中会生成启动脚本，可间接运行tests目录下的所有用例：
node_modules/.bin/cypress run

实用于在终端批量执行脚本

四、配置执行脚本不便执行

在package.json中配置脚本：

关上cypress界面执行：npm run cy:open

终端执行用例：npm run test

五、UI登录

describe("登录",()=>{
    it("test login" ,()=>{
        cy.visit("http://localhost:8080/")
        cy.waitFor("登录")
        // cy.get('input[type="text"]').type("super_admin")
        cy.get('input[type="password"]').type("123")
        cy.get('button[type="button"]').click()
        cy.contains("首页")
    })
})