新一代前端自动化测试工具：cypress

你还在为前端自动化测试苦恼吗，这里为你推荐一款优秀的主流测试工具！

安装及配置

安装

npm i cypress -S -D

启动

cypress open

或者

npm run cypress:open

需要在package.json中配置以下命令：

{
  'scripts': {
    'cypress:open': 'cypress open'
  }
}

示例

describe('My First Test', function() {
  it('clicking "type" shows the right headings', function() {
    cy.visit('https://example.cypress.io')
    cy.pause()
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')
    cy.get('.action-email').type('fake@email.com').should('have.value', 'fake@email.com')
  })
})

进阶（自定义命令）

自定义命令，可有效避免代码过度冗余，可理解为逻辑的打包封装。

touch cpyress/support/commands.js

Cypress.Commands.add('login', (name, password) => {
  cy.visit('http://www.domain.com/sso/login?returnUrl=http://app.domain.com')
  // type in and submit
  cy.get('[data-cy=name]').type(name).should('have.value', name)
  cy.get('[data-cy=password]').type(password).should('have.value', password)
  cy.get('[data-cy=submit]').click()
})

使用方法

cy.login('[name]', '[password]').wait(250)