前言
web技術已經進化了,web的測試技術最終還是跟上了腳步,新一代的web自動化技術出現了?
Cypress可以對在瀏覽器中運行的任何東西進行快速、簡單和可靠的測試。
"The web has evolved.
Finally, testing has too.
Fast, easy and reliable testing for anything that runs in a browser."
官方地址https://www.cypress.io/,詳細的文檔介紹https://docs.cypress.io/guides/overview/why-cypress.html
windows環境安裝
系統要求:
- 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
如果你使用 npm
安裝 Cypress,必須要求 Node.js 8
或更高版本
安裝node.js
官網下載地址:https://nodejs.org/en/download/
下載后一路傻瓜式安裝,安裝完成后,運行cmd,輸入node –v查看版本號,然后輸入npm -v
C:\Users\dell>node -v
v10.2.0
C:\Users\dell>npm -v
6.14.5
npm安裝
NPM是隨同NodeJS一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問題,常見的使用場景有以下幾種:
- 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
- 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
- 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。
由於新版的nodejs已經集成了 npm,所以之前 npm也 一並安裝好了。可以通過輸入 "npm -v"來測試是否成功安裝.
npm -v
如果npm版本過低,也可以通過以下指令升級npm版本
npm install npm -g
npm直接下載會很慢,先修改下載源http://registry.npm.taobao.org
npm config set registry http://registry.npm.taobao.org
改完之后查看是否改成功
npm config get registry
安裝 Cypress
自己本地電腦新建一個目錄,cd 到目錄,執行 npm 指令安裝
cd /your/project/path
npm install cypress --save-dev
安裝會有點慢,耐心等待!
D:\Cypress>npm install cypress --save-dev
> cypress@4.5.0 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.
+ cypress@4.5.0
updated 1 package in 1142.836s
1 package is looking for funding
run `npm fund` for details
啟動cypress
先cd到node_modules/.bin目錄
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...
接下來桌面會出現啟動界面
也可以通過 npx
來啟動,這樣就不用cd 到 node_modules.bin 目錄了
npx cypress open
還可以通過 yarn
來啟動
yarn run cypress open
添加 npm 腳本
在前面安裝的時候,會看到缺少個文件 npm WARN saveError ENOENT: no such file or directory, open 'D:\Cypress\package.json'
接下來在根目錄 D:\Cypress 下新建一個 package.json 文件
{
"scripts": {
"cypress:open": "cypress open"
}
}
現在,您可以從項目根目錄調用命令,如下所示:
npm run cypress:open
D:\Cypress\node_modules\.bin>npm run cypress:open
> @ cypress:open D:\Cypress
> cypress open
接下來就可以看到正確的啟動 cypress 界面了
這里面有一些js的案例腳本可以直接點下,就能看到運行效果了!
mac的安裝教程,查看官方文檔https://docs.cypress.io/guides/getting-started/installing-cypress.html#Switching-browsers
QQ交流群:939110556