e2e test - Cypress use

1. Installation

# npm
npm install cypress --save-dev

# yarn
yarn add cypress --dev

Add npm script:

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

start up:

npm run cypress:open

2. Write tests

Cypress Directory Description

cypress //cypress目录
---- fixtures # 测试数据配置文件，可以使用 fixture 方法读取
---- integration # 测试脚本文件
---- plugin # 插件支持
---- support # 支持文件
-cypress.json # cypress 全局配置文件

Create test file

touch {your_project}/cypress/integration/sample_spec.js

Once the file is created, we should see Cypress Test Runner immediately display it in the Integration Tests list. Cypress monitors your spec file for any changes and displays any changes automatically.

Even though we haven't written any tests yet - that's ok - let's click on sample_spec.js and watch Cypress fire up your browser.

Cypress opens the test in the browser installed on the system. You can read more about how we do this in Launch Browser.

write test file

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

insert image description here
Write a failing test:

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(false)
  })
})

After saving again, the test fails and Cypress displays the failed test false in red.

Cypress also displays stack traces and code frames where the assertion failed (if available). You can click the blue file link to open the errored file in your preferred file opener. To learn more about error displays, read about debugging errors.
insert image description here

For example, the path of my vscode here is: C:\Users\lpz\AppData\Local\Programs\Microsoft VS Code\Code.exe

switch browser

The Cypress test runner attempts to find all compatible browsers on the user's computer. The Select Another Browser dropdown is located in the upper right corner of the test runner.
insert image description here
More usage reference: https://docs.cypress.io/guides/guides/launching-browsers .

3. Common APIs of Cypress

describe('Post Resource', () => {
  it('Creating a New Post', () => {
    cy.visit('/posts/new') // 1.

    cy.get('input.post-title') // 2.
      .type('My First Post') // 3.

    cy.get('input.post-body') // 4.
      .type('Hello, world!') // 5.

    cy.contains('Submit') // 6.
      .click() // 7.

    cy.url() // 8.
      .should('include', '/posts/my-first-post')

    cy.get('h1') // 9.
      .should('contain', 'My First Post')
  })
})

Go to the page /posts/new.
Find the with class post-title.
Type "my first post" into it.
Find the with class post-body.
Type "Hello, world!" into it.
Find the element that contains the text Submit.
click it.
Grab the browser URL and make sure it contains /posts/my-first-post.
Find the h1 tag and make sure it contains the text "My first post".

query element

If you've used jQuery before, you're probably used to querying elements like:

$('.my-selector')

In Cypress, the query elements are the same:

cy.get('.my-selector')

In fact, Cypress bundles jQuery and exposes many DOM traversal methods to you, so you can easily manipulate complex HTML structures using APIs you're already familiar with.

// Each method is equivalent to its jQuery counterpart. Use what you know!
cy.get('#main-content').find('.article').children('img[src^="/static"]').first()

However, the method of accessing the DOM elements returned from the query is different:

// This is fine, jQuery returns the element synchronously.
const $jqElement = $('.element')

// This will not work! Cypress does not return the element synchronously.
const $cyElement = cy.get('.element')

Cypress is not like jQuery

Reference: https://docs.cypress.io/guides/core-concepts/introduction-to-cypress#Cypress-is-Not-Like-jQuery .

Query by text content

// Find an element in the document containing the text 'New Post'
cy.contains('New Post')

// Find an element within '.main' containing the text 'New Post'
cy.get('.main').contains('New Post')

query timeout

// Give this element 10 seconds to appear
cy.get('.my-slow-selector', { timeout: 10000 })

The default is 4 seconds.

cy.get('textarea.post-body').type('This is an excellent post.')

Cypress provides more operational commands for interacting with your application:

● .blur() - Blurs the focused DOM element.
● .focus() - focus on the DOM element.
● .clear() - Clears the value of an input or textarea.
● .check() - Checks a checkbox or radio button.
● .uncheck() - Unchecks a checkbox.
● .select() - Select one in .
● .dblclick() - Double click on a DOM element.
● .rightclick() - Right click on a DOM element.

assertion element

cy.get(':checkbox').should('be.disabled')

cy.get('form').should('have.class', 'form-horizontal')

cy.get('input').should('not.have.value', 'US')

// 针对长度的断言
cy.get('li.selected').should('have.length',3)

// 针对类的断言
cy.get('from').fijd('input').should('not.have.class','disabled')

// 针对值的断言
cy.get('textarea').should('have.value','3testing')

// 针对文本内容的断言
cy.get('a').parent('span.help').should('contain','click me')

// 针对元素可见与否的断言
cy.get('button').should('be.visible')

// 针对元素存在与否的断言
cy.get('#loading').should('not.exist')

// 针对元素状态的State的断言
cy.get(':radio').should('be.checked')

// 针对CSS的断言
cy.get('.completed').should('have.css','text-decoration','line-through')

Referencing queries using aliases

cy.get('.my-selector')
  .as('myElement') // sets the alias
  .click()

/* many more actions */

cy.get('@myElement') // re-queries the DOM as before (only if necessary)
  .click()

This allows us to re-use DOM queries for faster testing while the element is still in the DOM, and it automatically handles the DOM re-query for us when the element is not immediately found in the DOM. This is especially useful when dealing with front-end frameworks that do a lot of re-rendering!