浅浅尝一下Cypress

胡颖

Cypress 简介
  Cypress是基于JavaScript语言的前端自动化测试工具，无需借助外部工具，自集成了一套完整的端到端测试方法，可以对浏览器中运行的所有内容进行快速、简单、可靠的测试，并且可以进行接口测试。



Cypress 安装
1.安装node.js
http://nodejs.cn/download/，下载msi后直接安装就可以使用了

2.安装cypress
可以直接访问下面的地址下载

https://download.cypress.io/

也可以用npm install cypress  --save dev

Cypress 运行

1.界面运行
自己建个项目，用npm init初始化生成package.json文件

管理员模式打开 cmd 窗口，输入 npx cypress open

或者双击应用程序




可以查看栗子，或自己创建脚本
创建后，可以显示目录，注意文件后缀是cy.js



运行用例的结果


2.无头模式运行


举个例子


Cypress 举个简单的例子，试试


  it('Successfully logs in with correct credentials', () => {
    cy.visit('https://example.com/login')  // 登录页面的 URL
    cy.get('#username')
      .type('your-username-here')  // 输入用户名
    cy.get('#password')
      .type('your-password-here')  // 输入密码
    cy.get('form').submit()  // 提交登录表单
    cy.url().should('include', '/dashboard')  // 确认重定向后的 URL 包含"/dashboard"
    cy.get('h1').should('contain', 'Welcome')  // 确认页面包含 "Welcome" 文本
  })

  it('Displays error message with incorrect credentials', () => {
    cy.visit('https://example.com/login')
    cy.get('#username')
      .type('invalid-username')
    cy.get('#password')
      .type('invalid-password')
    cy.get('form').submit()
    cy.get('.error-message').should('be.visible')  // 确认错误消息显示
      .and('contain', 'Invalid username or password')  // 确认消息文本
  })
})


以上代码示例中，我们编写了两个测试用例，分别测试了登录成功和登录失败的场景。在测试用例中，我们使用了 Cypress 提供的 API 来模拟用户操作，比如使用 cy.visit() 访问登录页面，使用 cy.get() 获取输入框和表单等元素，使用 .type() 方法输入用户名和密码，以及使用 cy.get().should() 等方法进行断言和验证。

需要注意的是，这只是一个简单的登录测试例子，实际的测试场景和测试流程可能更加复杂和繁琐。在编写测试用例时，建议根据实际场景进行扩展和优化，以确保测试覆盖率和质量。