Cypress tutorial-this is the textbook (1)

From Cypress Roll! Efficient front-end automated testing framework!

Note: This article is specifically for the Cypressactual combat,
please pay attention to the next article to get started

Introduction

Lead: front-end test automation Road - Cypress
Author: become excellent white
hobbies: American some ice!

Note: If you encounter something you don’t understand halfway, you can directly comment and leave a message, and you will immediately answer questions!

What is Cypress

A front-end testing tools and frameworks, based on Mocha Chai and build, support Chai'sof BDDand TDDassert that style (this style is recommended as far as possible)

• Usage
  • E2ETesting, integration testing, unit testing (because it is embedded Mocha)
  • Anything that runs in the browser
• Cypress Some functions provided
  • Time travel - Auto waiting (similar Jestin wait)
  • Complete asynchronous operations with synchronous style code
  • Network flow control
  • Screenshot
  • Continuous integration
• Cypress Grammar design (and built-in objects)
  • jQuery + Chain call
  • Promise（Bluebird）
  • Mocha + Chai

Why use Cypress

• When you need E2E testing
• Ranked second in the test category of JavaScript star projects in 2019
• Simpler, flexible and robust than other similar E2E test tools

Project structure

- /cypress
  - /fixtures（mock 数据）
    - example.json
  - /integration（测试文件）
    - /examples
      - example.spec.js （一般格式为 *.spec.js,可支持.jsx/.coffee/.cjsx）
  - /plugins（用于配置安装的 插件，task 系统）
    - index.js
  - /support（用于调整 自定义选项）
    - commands.js
    - index.js
  - /screenshots（默认截屏文件夹）

Assert Style

Cypress supports BDD (expect/should) and TDD (assert)

ex is as follows:

# BDD
it('can add numbers', () => {
  expect(add(1, 2)).to.eq(3)
})
# TDD
it('can subtract numbers', () => {
  assert.equal(subtract(5, 12), -7, 'these numbers are equal')
})

Hooks (hook method)

Cypress provides hook method (Mocha) The
following is the official demo

beforeEach(() => {
  // root-level hook
  // runs before every test
})
describe('Hooks', () => {
  before(() => {
    // runs once before all tests in the block
  })

  beforeEach(() => {
    // runs before each test in the block
  })

  afterEach(() => {
    // runs after each test in the block
  })

  after(() => {
    // runs once after all tests in the block
  })
})

Related configuration

Allowed environment configuration values ​​(detailed!)

Value that can be changed for each test

• animationDistanceThreshold
• baseUrl (used to prefix the URL of the cy.visit() or cy.request() command URL)
• browser
• defaultCommandTimeout (the time to wait before most DOM-based commands time out)
• execTimeout (time, in milliseconds, during the waiting period, the execution of the system command is completed)
• env (any value to be set as an environment variable)
• requestTimeout (the time to wait for the XHR request to be issued in the cy.wait() command, in milliseconds)
• responseTimeout (time, in milliseconds, waiting for a response)
• viewportHeight
• viewportWidth
• waitForAnimations

Suite (test suite) configuration

describe('page display on medium size screen', {
  viewportHeight: 1000,
  viewportWidth: 400
}, () => {
  it('does not display sidebar', () => {
    cy.get('#sidebar').should('not.be.visible')
  })

  it('shows hamburger menu', () => {
    cy.get('#header').find('i.menu').should('be.visible')
  })
})

Test (example) placement

it('Show warning outside Chrome', {  browser: '!chrome' }, () => {
  cy.get('.browser-warning')
    .should('contain', 'For optimal viewing, use Chrome browser')
})

Dynamic (dynamic) generates Test (use case)

Generate a suite containing 4 events

describe('if your app uses jQuery', () => {
  ['mouseover', 'mouseout', 'mouseenter', 'mouseleave'].forEach((event) => {
    it('triggers event: ' + event, () => {
      // if your app uses jQuery, then we can trigger a jQuery
      // event that causes the event callback to fire
      cy
        .get('#with-jquery').invoke('trigger', event)
        .get('#messages').should('contain', 'the event ' + event + 'was fired')
    })
  })
})

Plug-in

Can be Nodeset dynamically using code, no need to set environment variables in the file

Related learning address

github
cypress doc
docker cypress
cypress-example-recipes

Summary: If you have any questions or suggestions, you can leave a comment directly! I will reply one by one! !

If Xiaobai’s blog has suggestions or criticisms, just leave a comment below! If you think Xiaobai is pretty good, please leave your likes, attention and favorites! !