note Cypress 使用记录

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

• 按以上示例图下载

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

步骤2 创建 cpyress项目

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

然后会见到如下图

点击OK，Got is!

这时候，cpyress项目已经创建完成，examples 为 cpyress 示例

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

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

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

login.spec.js源码如下：

/// <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, 如下图

运行测试脚本