Cypress 是自动化测试工具。
https://docs.cypress.io/guides/getting-started/testing-your-app.html

开发工具
VS Code:https://code.visualstudio.com/download

步骤1 - 下载安装

打开 https://docs.cypress.io/guides/getting-started/installing-cypress.html#Direct-download
download-ui.png

  • 按以上示例图下载

download-ui-2.png

双击打开exe文件后见到如下图

cypress-ui.png

步骤2 创建 cpyress项目

在电脑磁盘新建一个文件夹,路径如 D:\Levana2\test-cypress\cypress-demo2
test-cypress文件夹:cypress项目放置路径
cypress-demo2文件夹:cypress项目

cypress-ui-2.png

然后会见到如下图
cypress-ui-3.png

点击OK,Got is!

cypreess-dev.png
这时候,cpyress项目已经创建完成,examples 为 cpyress 示例

步骤3 改为我们可用的脚本

在 cypress-demo2 文件夹下创建 文件夹“示例”

再将 cypress\integration\examples下 所有js 移至 “示例”文件夹 ,如下图

login.spec.js源码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/// <reference types="cypress" />

context('Actions', () => {
// 执行下列行为,需要先打开 URL
beforeEach(() => {
cy.visit('https://portaluat.2go-app.com:32502/mrpos_portal/index')
})


it('.type() - type into a DOM element', () => {
// 等待3秒,再继续执行
cy.wait(3000)

// 获取到用户名输入框,输入 2trade140
cy.get('#userName')
.type('2trade140', { force: true }).should('have.value', '2trade140')

// 等待3秒,再继续执行, 可选择等待,或不等待,不等待就删除该行代码
cy.wait(3000)

// 获取到密码输入框,输入 12345678
// .should('have.value', '12345678') 是验证,是否正确输入值到输入框
// { force: true } 使用这个参数,是由于我们的页面 密码输入框,初始状态未不可见
cy.get('#userPassword').type('12345678', { force: true }).should('have.value', '12345678')

// 点击登入按钮
cy.get('#subLogin').click();

// 去到免责声明页面后,登记同意按钮,(代码会自动等待页面加载完毕再执行 该行代码
cy.get('#sbtAgree').click();

// 随后 便进入主页,可以根据需要做其他行为
// 一定需要参考,刚开始时建立的 example,即 移至 示例文件夹的js,都有例子可以参考
})

})

在cypress\integration\examples 文件夹下创建 login.spec.js, 如下图

cypreess-dev-2.png

运行测试脚本

cypreess-dev-2.png

cypreess-dev-2.png