I. Introduction
In the past few years, when we were doing web-side UI automation testing, the first thing we thought of was based on Selenium tools, but with the upgrading of web-side technology, many front-end testing frameworks appeared. Most of these frameworks do not depend on Selenium, so Cypress testing framework It came into being in this trend of technological upgrading.
Two, Cypress brief introduction
(1) Cypress is a next-generation front-end testing tool specially created for modern networks, which solves the main pain points faced by developers and quality engineers when testing modern applications.
(2) Cypress is a JavaScript-based front-end testing tool that can test any content running in the browser.
(3) Comparing Cypress and Selenium tools, they are fundamentally and architecturally different. Cypress is not restricted by Selenium, and the underlying protocol of Cypress does not use WebDriver.
(4) Cypress is different from other UI automation testing tools. It provides a complete set of end-to-end tests, which can write all types of tests (unit tests, integration tests), and can set up tests, write tests, execute tests, and debug test.
Official address: https://www.cypress.io
Detailed documentation: https://docs.cypress.io/guides/overview/why-cypress.html
Remarks: We can also refer to "Cypress From Entry to Proficiency" written by Mr. Chao Cai
3. Environmental requirements
Operating system: Windows 7 version or higher operating system.
Nodejs version: Node.js 8 or higher is required.
For detailed installation steps of Nodejs, please refer to: https://blog.csdn.net/weixin_43184774/article/details/106719889
Four, npm installation
npm has been integrated in the new version of Node.js, which can solve many problems in Node.js code deployment. Common usage scenarios are as follows:
(1) Allow users to download third-party packages written by others from the npm server to local use.
(2) Allow users to download and install command line programs written by others from the npm server for local use.
(3) Allow users to upload their own packages or commands to the npm server for others to use.
◎ Since the new version of Node.js has integrated npm, you can verify the successful installation of npm by entering the following command in the cmd window.
npm -v
◎ If the npm version is too low, you can upgrade the npm version through the following instructions
npm install npm -g
Five, Cypress installation
First create a Cypress folder directory on the local computer (for example: D:\software\Cypress), then in the cmd window, cd into the Cypress directory you created, and execute the following command to install Cypress
npm install cypress --save-dev
Six, Cypress starts
(1) In the cmd window, cd into the \node_modules\.bin directory of the Cypress installation directory, and execute the following command:
cypress open
(2) It can also be started by npx, so you don't need to cd to enter the node_modules.bin directory. The execution command is as follows:
npx cypress open
Seven, solve the Cypress installation warning problem
During the previous installation, you will see a missing file npm WARN saveError ENOENT: no such file or directory, open'D:\software\Cypress\package.json' this warning prompt
Solution:
(1) Create a new package.json file under the root directory D:\software\Cypress.
(2) Enter the following content in the package.json file
{
"scripts": {
"cypress:open": "cypress open"
}
} 
(3) Execute the following commands directly in the Cypress directory to start Cypress normally
npm run cypress:open