【原】Cypress web自动化32-完全测试登录流程 - 但只有一次！

上海悠悠 2021-05-27

展开全文

前言

这篇是根据 cypress 官方文档 copy 过来的，关于自动化测试对登录场景的处理的思考，写的挺好的。
官方文档地址https://docs./guides/getting-started/testing-your-app.html#Logging-in
登录是我们遇到的第一个自动化用例场景，当然登录也是最难的场景之一。

完全测试登录流程 - 但只有一次

将注册和登录流程置于测试覆盖范围内是一个好主意，因为它对用户来说都非常重要，而且你永远不希望它有缺陷。
登录是任务关键的功能之一，可能涉及你的服务器。我们建议你使用你的 UI 页面测试注册和登录，因为我们尽量模拟真实用户场景！

以下是从数据库构造数据开始的示例：

cy.exec() npm 执行脚本清理测试数据
cy.request() 往数据库写入你的测试账号，后面的用例使用该测试账号username: 'jane.lane’

describe('The Login Page', function () {
  beforeEach(function () {
    // 每次测试之前重置数据库，保证测试数据干净
    cy.exec('npm run db:reset && npm run db:seed')

    // 发个post请求 '/test/seed/user'注册用户， 往数据库写入测试用户数据
    // 假设它为我们生成一个随机密码
    cy.request('POST', '/test/seed/user', { username: 'jane.lane' })
      .its('body')
      .as('currentUser')
  })

  it('sets auth cookie when logging in via form submission', function () {
    // 引用上面的currentUser对象
    const { username, password } = this.currentUser

    cy.visit('/login')

    cy.get('input[name=username]').type(username)

    // 输入密码后，按 {enter} 提交数据
    cy.get('input[name=password]').type(`${password}{enter}`)

    // 重定向到 /dashboard
    cy.url().should('include', '/dashboard')

    // 断言用户登录后cookie存在
    cy.getCookie('your-session-cookie').should('exist')

    // 断言UI页面是包含 'jane.lane' 文本
    cy.get('h1').should('contain', 'jane.lane')
  })
})

你可能还会继续测试你的登录界面的以下情况，比如：

非法的用户名/密码
用户名已存在
密码复杂度要求
边缘用例，比如用户锁定或已删除
以上每一种情况都要求进行全面的测试。

现在，当你的登录测试成功之后，你可能开始想：

“…好的，漂亮! 让我们在每一个测试用例中重复这些登录过程吧！”

不! 千万别！不要用UI登录来测试每一个用例。

让我们来研究和展开一下原因。

绕过UI

当你为非常具体的功能编写测试时，你应使用你的UI进行测试。

但是，当你在测试系统的另一个模块时，而它依赖于之前功能的状态时：不要使用你的UI设置此状态。

这是一个更具说服力的例子：

想象一下，你正在测试购物车的功能。要对此进行测试，你需要能够将商品添加到该购物车。
那么商品来自哪里？你是否应该使用UI登录管理区域，然后创建所有商品，包括其描述，类别和图像？
完成后，你是否应该访问每个商品并将每个商品添加到购物车？

不，你不应该这样做。

警告不要用你的UI去构建状态。这是非常缓慢，繁琐和不必要的。

登录与我们刚才描述的完全相同的场景。登录只是在所有其他测试之前的前置状态条件。

因为 Cypress 不是 Selenium ，我们实际上可以在这里采取一个巨大的捷径，不需要使用UI而直接使用 cy.request() 。

因为 cy.request() 会自动获取并设置 cookie ，我们实际上可以使用它来构建状态而不使用浏览器的UI，但仍然可以使其完全像它来自浏览器一样！

让我们重温上面的例子，但假设我们正在测试系统的其他部分。

describe('The Dashboard Page', function () {
  beforeEach(function () {
    // 每次测试之前重置数据库，保证测试数据干净
    cy.exec('npm run db:reset && npm run db:seed')

    // 发个post请求 '/test/seed/user'注册用户， 往数据库写入测试用户数据
    // 假设它为我们生成一个随机密码
    cy.request('POST', '/test/seed/user', { username: 'jane.lane' })
      .its('body')
      .as('currentUser')
  })

  it('logs in programmatically without using the UI', function () {
    // 引用上面的currentUser对象
    const { username, password } = this.currentUser

    // 通过登陆接口发request请求，不需要用UI界面去登陆
    cy.request('POST', '/login', {
      username,
      password
    })

    // 现在已经是登陆状态了，可以用visit访问登陆后的任意页面了
    cy.visit('/dashboard')

    // 断言用户登录后cookie存在
    cy.getCookie('your-session-cookie').should('exist')

    // 断言UI页面是包含 'jane.lane' 文本
    cy.get('h1').should('contain', 'jane.lane')
  })
})