The theory of cypress for e2e testing

cypress's theory of e2e testing

Cypress is a very popular test component of e2e at present. It is internally bound with assertions such as macha, chai, chai-jquery, etc. In order to make the code
more convincing and reduce submission test errors, it is obviously very necessary to conduct e2e testing .

Official
websiteGitHub

To borrow a sentence from the official website:

Cypress is a next generation front end testing tool built for the modern web. We address the key
pain points developers and QA engineers face when testing modern applications.

This article environment

node v9.5\
npm v5.5

Introduction to e2e

The abbreviation of e2e test end-to-end test, e2e is end to end,
refers to any person's social, transaction, leisure can directly have a relationship with any other person, decentralization, channelization .

cypress

cypress environment setup

How come there is less npm in front-end?

$ npm i -D cypress

Then for convenience, we package.jsonwrite the following script in:

{
  "scripts": {
    "e2e:open": "cypress open",
    "e2e:run": "cypress run"
  }
}

To run npm run e2e:open, start a cypress server as follows:

As shown below, this completes a startup of a cypress. When you click it for the first time, cypress will help you create an initialization configuration directory. This is
the structure of the directory recommended by cypress. Of course, you can also create it yourself.

Click the example_spec.js file, then you can see the following interface, cypress starts the test:

Above you can see the running process of cypress. Let's take a look at
what is written in the example_spec.js (file location: projectName/cypress/integration) file:

describe('Kitchen Sink', function() {
  it('.should() - assert that <title> is correct', function() {
    // ...
  }
})

This is the main structure. Most of the following are inside a itfunction, which is the callback function in the test. For details, see TDD and BDD test
frameworks , which are bundled with cypress.

cy.visit

This is a very important method in cypress, you can access a link, which is listed in the example.js file as follows:

beforeEach(function() {
  // Visiting our app before each test removes any state build up from
  // previous tests. Visiting acts as if we closed a tab and opened a fresh one
  cy.visit('https://example.cypress.io/commands/querying')
})

Here is https://...../queryingthe link accessed in the pre-hook function. If the code requires browser debugging, such as user
interaction clicks, user input, etc. The first step is to visit: cy.visit

cy.get

Let's start with the example_spec.js question:

it('cy.get() - query DOM elements', function() {
  // https://on.cypress.io/get

  // Get DOM elements by id
  cy.get('#query-btn').should('contain', 'Button')

  // Get DOM elements by class
  cy.get('.query-btn').should('contain', 'Button')

  cy.get('#querying .well>button:first').should('contain', 'Button')
  //              ↲
  // Use CSS selectors just like jQuery
})

A test unit is defined here. What is done in this? The first step is to get the button whose id is query-btn. Next, you should operate
, and present a table to check it yourself:

Another way to play cy.get is cy.get('@app'), which means that you have already done so before, you cy.get('.app').as('app')don't need to
get , just use the alias directly

Screenshot form from the official website,
detailed jquery-chai document form

Seeing it here is very similar to whether it is very similar, cy.get()and jquery.$said this sentence on the official website:

The querying behavior of this command matches exactly how $(…) works in jQuery.

So you can use cy.get() as $, but what is returned here is just the jquery object. The object returned here can
be , as shown in the following figure:

is an object used for all methods of cypress. Then you can operate his api.

The first part is mainly query, to query whether the page elements exist as we want to develop, let's see the second part:

context('Actions', function() {
  beforeEach(function() {
    cy.visit('https://example.cypress.io/commands/actions')
  })

  // Let's perform some actions on DOM elements
  // https://on.cypress.io/interacting-with-elements

  it('.type() - type into a DOM element', function() {
    // https://on.cypress.io/type
    cy
      .get('.action-email')
      .type('[email protected]')
      .should('have.value', '[email protected]')

      // .type() with special character sequences
      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
      .type('{del}{selectall}{backspace}')

      // .type() with key modifiers
      .type('{alt}{option}') //these are equivalent
      .type('{ctrl}{control}') //these are equivalent
      .type('{meta}{command}{cmd}') //these are equivalent
      .type('{shift}')

      // Delay each keypress by 0.1 sec
      .type('[email protected]', { delay: 100 })
      .should('have.value', '[email protected]')

    cy
      .get('.action-disabled')
      // Ignore error checking prior to type
      // like whether the input is visible or disabled
      .type('disabled error checking', { force: true })
      .should('have.value', 'disabled error checking')
  })
})

This part is mainly to get element interaction, the following is how the interaction is done. Similar to cy.get also:

• cy.contains get element by text
• cy.closet see jqery
• cy.next/cy.nextAll can be used in conjunction with cy.contains to get the next node of the node
• cy.prev/cy.prevAll same as above
• cy.children/cy.parents/cy.parent get child nodes/all parent nodes/parent nodes
• cy.first/cy.last
• cy.url gets the current page url
• cy.title Get the current page title
• … There are quite a lot of APIs,
  and the api documentation is also provided

cypress interaction logic

Since it is necessary to click and enter scrolling to interact, there can also be dragging and so on. Let's start with the input for a while.

cy.type

This is not a method that can be used directly. To be cy.getused together, the function is to input the space. E.g:

Test input such as text, textarea

cy.get('input').type('hello world')

test tabIndex

  <div class="el" tabIndex="1">
    This is TabIndex div.
  </div>

cy.get('.el').type('laldkadaljdkljasf') // 这个里面是随机字符串

Test input as date

cy.get('input[type=date]').type('2008-8-9')

keyboard bindings

The following is a combination of keyboard operations on the input directly

cy.get('input').type('{shift}{alt}Q')

Press and hold the keyboard

cy.get('input').type('{alt}这里是按了一下alt后输入的内容')

There are also operations such as long-pressing the keyboard. For details, see the official website. Here are the links
. https://docs.cypress.io/api/commands/type.html#Key-Combinations

Here is the combination operation on the keyboard.

For select e.g. radio, checkbox

These just need to use the click event, as follows:

cy
  .get('input[type=radio]')
  .as('radio')
  .click()
cy.get('@radio').should('be.checked')

timing

cy.wait

The following is waiting for 1s

cy.wait(1000)

cy.clock 和 cy.tick

own code:

var seconds = 0
setInterval(() => {
  $('#seconds-elapsed').text(++seconds + ' seconds')
}, 1000)

test code

cy.clock()
cy.visit('/index.html')
cy.tick(1000)
cy.get('#seconds-elapsed').should('have.text', '1 seconds')
cy.tick(1000)
cy.get('#seconds-elapsed').should('have.text', '2 seconds')

The usage of clock and tick will appear here
. For more usage, see the documentation. I am also partially confused. To be resolved later. Old rules document address:
address

About cypress configuration

Copy a section first:

{
  "baseUrl": "http://localhost:8080",
  "pageLoadTimeout": 3000,
  "viewportHeight": 667,
  "viewportWidth": 375
}

Here is a very stripped-down configuration:

• baseUrl is the basic link, then when using cy.visit, you only need to access the specific route. For example: cy.visit('/Hello')
• viewport two properties
  
  • viewportHeight Test the height of the window
  • viewportWidth Test the width of the window
• pageLoadTimeout The page is set to timeout when it exceeds 3000ms.

Summarize

The above is the basic usage of cypress. Cypress is a testing framework based on electron, which provides a web environment for point-to-point testing. Under the
programmer's thinking, it can perform automated interactive operations and point detection instructions when necessary. This is a great use. For example, if you have data buried points later,
you can detect whether there are buried points in a fixed position. Test if the desired place matches the data. It's all great for simulating user clicks. In
the era of jquery operation, under the strange naming of various ids and classes, these can be easily found. In the era of vue and react, it
is possible to find nodes through text. This is also a very good experience, more secrets need to be experienced, here is the official address
: official website cypress