cypress get started

Brief introduction

 

Official website

Detailed API Reference

First, prepare the environment

1.1 VSCode installation, refer here to install directly from the platform download.

1.2 cypress installation, reference herein

 

Second, common API

2.1 Sample

/// <reference types="Cypress" />

 

DESCRIBE ( 'My First Test Case for Cypress', function () { 

    IT ( 'Home Page and Search Visit baidu for testerhome:', function () { 
        cy.visit ( 'http://www.baidu.com') / / access url 
        cy.title (). Should ( 'Contain', 'Baidu, you know')    // Authentication page title is correct 

        cy.get ( '#kw')       // according css positioning search input box 
         .type ( 'testerhome')         // enter keyword 
        .should ( 'have.value', 'testerhome')   // verify whether keywords automatically display the correct 

        cy.get ( '#su').   the Click () // According css locate and click on the search button 

        cy.url (). should ('the include', 'WD = testerhome')      // Verify that the target url is correct that contain the keyword 

        cy.title (). Should ( 'Contain', 'testerhome_ Baidu search')   // Authentication page title is correct 

        cy.get ( '[ID = ". 1"]' )    
        .should ( 'contain', 'TesterHome')    // verify whether the first result comprises TesterHome 

        cy.screenshot () 
    }) 
})    

 

Code explanation:

• reference represents VSCode going to tell where to find the semantic Cypress package related to the resolution
• describe declare a test suite;
• it declares a test case;
• beforeEach run before each test case needs to be done;
• cy.get accept a js selector, is positioning element string, of course, also supports Cypress positioning xpath
• By then, or should, we can get to the element object is passed to the next step, for further processing, where to find button_start_search by then passed to the next step, and ultimately be judged by whether button_start_search expect a function of the value attribute is consistent with expectations .

2.2 affirm

expect ([]). to.be.a ( 'Array') // type determination 
expect (ab) .to.exist // attribute determines whether there 
expect (1) .to.be.oneOf ([1,2 , 3]) // determines whether the value is one 
expect ( 'testing'). to.match (/ ^ test /) // regular match 
...

2.3 Call Interface & Mock

 

Third, the use

3.1 Operation　

From left to right shows the number of number of successes, failures, not running, time-consuming, and auto scroll button and re-run

 

Note that in the preparation of use cases, each time you save will automatically trigger tests for debugging is more convenient.

 

3.2 gets control positioning

1. Tap selector -> Click positioning element 2 -> 3 generated code Copy

3.3 generating a report ( Junit-Allure)

In cypress.json add-dependent:

"reporter": "junit",
"reporterOptions": {
 "mochaFile": "results/my-test-output[hash].xml", // 通过hash 标签区分不同文件的用例结果
 "toConsole": true
}

When executed cypress run automatically generates xml file
using the allure generate the corresponding report:

// 生成allure 报告
allure generate results --clean

// 打开报告
allure open allure-report

3.4 CI / CD

 

 

advantage:

• Speed ​​feels faster than selenium.
• Built-in request method can skip the login UI layer, but the requirement is that you can call the corresponding login interface.
• Automatically retry if steps fail. This will improve the stability of operation.
• Automatic screenshot fail