The main idea of the testing framework is to operate DOM through the API provided by the framework, and to simulate some human behaviors to achieve automatic testing
Cypress website HTTPS://www.cypress.io/The API documentation HTTPS://example.cypress.io/commands/traversal
Copy the code
Cypress – website

Project directory and configuration file introduction
1. Project catalog introduction

2. Common methods
Cy. wait(time) set the wait time to several milliseconds or wait for the alias resource to be resolved, then execute the next command cy.get(dom) to obtain the specified DOM and locate the element. Use CSS selector to locate the selector cy.click() to simulate the click event cy.visit(path) to simulate the route jump cy.find(dom) to locate the specified element cy.eq(num) to locate the specified DOM that matches the subscript of num Cy.fixture (file) Gets simulated data cy.mds. add(name, callbackFn) Add custom methods cy.mds. add(name, options, Overwrite (name, callbackFn) add custom method cy.reaload() equivalent to f5 cy.radload()trueRequest () initiates an HTTP request for cy.type() to assign an input value cypress.env () gets all environment variables cypress.env () gets the specified environment variable cy.should() Hava. Value is the value attribute of the element.'[aria-label=" last month "]', { timeout: 3000}) get the DOM based on the property valueCopy the code
Cypress. json configuration file

Modify configuration files to configure environment variables and a common configuration"chromeWebSecurity": falseTo solve cross-domain problems"integrationFolder": "cypress/integration", specifying that Cypress automatically scans test case paths"testFiles": "**/*.js"To filter test cases. The default suffix is.spec.js"viewportWidth": 1920To set the test case GUI form width"viewportHeight": 1130To set the test case GUI form height baseUrl: "HTTP :localhose:8080"Is your service deployment address/your local startup development address; Cy. visit(cy.visit(cy.visit(cy.visit(cy.visit)'http:localhose:8080/commands/actions') Short: cy.visit('/commands/actions')

"env"Env (key), for example: cypress.env(' prod ')"prod": "http://prod.com"."title": "A programmer who sells cell phones."

    }


Copy the code
The first step is to install Cypress by executing the command

npm install cypress –save-dev

Execute the change command in the project root directory

The second step is to add the following command to package.json

“cypress:open”: “cypress open”,

“cypress”: “cypress run”,

Step 3: Execute NPM run cypress:open, you can see the following page

Step 4 Click the test case to be executed on the operation page. The test unit will be automatically executed and the following window will open

Please say the source, thank you, respect the fruits of labor. If it is helpful to your development process, please give a thumbs-up (~ ▽ ~)~**