cypress学习笔记二(第一个用例)

1、环境准备

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

安装成功后系统会默认生成测试目录和cypress配置文件

修改脚本中须要访问的地址和断言

2、界面化执行

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

点击脚本执行：

优势：

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

缺点：

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

3、命令行执行

cypress安装成功后，项目的package.json中会生成启动脚本，可直接运行tests目录下的全部用例：
node_modules/.bin/cypress run

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

4、配置执行脚本方便执行

在package.json中配置脚本：

打开cypress界面执行：npm run cy:open

终端执行用例：npm run test

5、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("首页")
    })
})