Preface
Web technology has evolved, and web testing technology has finally kept up. Has a new generation of web automation technology emerged?
Cypress enables fast, easy and reliable testing of anything running in the browser.
Official address https://www.cypress.io/ , detailed documentation https://docs.cypress.io/guides/overview/why-cypress.html
Windows environment installation
System Requirements:
- macOS 10.9 and above (64-bit only)
- Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)
- Windows 7 and above
If you npm install Cypress using Cypress, you must require Node.js 8 or higher
Install node.js
Official website download address:https://nodejs.org/en/download/
After downloading, install it in a fool-proof way. After the installation is completed, run cmd, enter node –v to view the version number, and then enter npm -v
C:\Users\dell>node -v
v10.2.0
C:\Users\dell>npm -v
6.14.5
npm install
NPM is a package management tool installed along with NodeJS. It can solve many problems in NodeJS code deployment. Common usage scenarios include the following:
- Allow users to download third-party packages written by others from the NPM server for local use.
- Allows users to download and install command line programs written by others from the NPM server for local use.
- Allows users to upload packages or command line programs they write to the NPM server for others to use.
Since the new version of nodejs has integrated npm, npm was also installed before. You can test whether the installation is successful by entering "npm -v".
npm -v
If the npm version is too low, you can also upgrade the npm version through the following command
npm install npm -g
Direct downloading of npm will be very slow. Modify the download source first.http://registry.npm.taobao.org
npm config set registry http://registry.npm.taobao.org
After making the changes, check whether the changes were successful.
npm config get registry
Install Cypress
Create a new directory on your local computer, cd to the directory, and execute the npm command to install it.
cd /your/project/path
npm install cypress --save-dev
The installation will be a bit slow, please be patient!
D:\Cypress>npm install cypress --save-dev
> [email protected] postinstall D:\Cypress\node_modules\cypress
> node index.js --exec install
Installing Cypress (version: 4.5.0)
√ Downloaded Cypress
√ Unzipped Cypress
√ Finished Installation C:\Users\dell\AppData\Local\Cypress\Cache\4.5.0
You can now open Cypress by running: node_modules.bin\cypress open
https://on.cypress.io/installing-cypress
npm WARN saveError ENOENT: no such file or directory, open 'D:\Cypress\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\Cypress\package.json'
npm WARN Cypress No description
npm WARN Cypress No repository field.
npm WARN Cypress No README data
npm WARN Cypress No license field.
+ [email protected]
updated 1 package in 1142.836s
1 package is looking for funding
run `npm fund` for details
Start cypress
First cd to the node_modules/.bin directory
cd node_modules/.bin
cypress open
D:\Cypress\node_modules.bin>cypress open
It looks like this is your first time using Cypress: 4.5.0
√ Verified Cypress! C:\Users\dell\AppData\Local\Cypress\Cache\4.5.0\Cypress
Opening Cypress...
Next, the startup interface will appear on the desktop.
You can also npx start it through , so you don’t need to cd to the node_modules.bin directory.
npx cypress open
It can also be yarn started by
yarn run cypress open
Add npm script
During the previous installation, you will see that a file is missing. npm WARN saveError ENOENT: no such file or directory, open 'D:\Cypress\package.json'
Next, create a new package.json file in the root directory D:\Cypress.
{
"scripts": {
"cypress:open": "cypress open"
}
}
Now you can call the command from the project root directory like this:
npm run cypress:open
D:\Cypress\node_modules.bin>npm run cypress:open
> @ cypress:open D:\Cypress
> cypress open
Next, you can see the correct startup cypress interface.
There are some js case scripts here that you can click directly to see the running effect!
For mac installation tutorial, view the official documentation https://docs.cypress.io/guides/getting-started/installing-cypress.html#Switching-browsers