4

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

 3 years ago
source link: https://segmentfault.com/a/1190000038835721
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

一、环境准备

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

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

修改脚本中需要访问的地址和断言
image.png

二、界面化执行

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

点击脚本执行：
image.png

  • 打印执行log，方便查问题
  • 可查看每一步执行过程及截图
  • 脚本更新后自动执行，方便调试
  • 每次执行需要启动chromium
  • 不方便集成测试

三、命令行执行

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

image.png

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

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

在package.json中配置脚本：
image.png

打开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("首页")
    })
})

image.png


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK