安裝 Cypress 涉及到如下幾個部分:
- node.js 環境
- vscode 開發工具
- 通過 npm 安裝 Cypress
node.js 環境
Windows 環境直接下載最新的 node.js 版本,從官網下載最新的 LTS 版本,並執行安裝即可。
因爲要用到 npm 安裝 Cypress,但是由於 npm 安裝緩慢,所以需要用到國內的鏡像。
在安裝好 node.js,在 CMD 中 輸入node -v
,能正確看到版本號就表明安裝成功,然後執行如下命令,將 npm 下載源改爲淘寶的鏡像庫:
npm install -g cnpm --registry=https://registry.npm.taobao.org
以後下載就像飛一樣了。
vscode 開發工具
vscode 是微軟開源的一個開發工具,非常受歡迎,用來進行 JavaScript 的開發最好不過。
直接下載安裝即可,再裝一下簡體中文插件即可,這裏不再詳述。
安裝 Cypress
- 在你的工作目錄,新建一個文件夾。如
D:\workspace\cypress
- 接下來,在命令提示符進入該文件夾:
- 進入該文件夾後,運行
npm init
命令(其實就是初始化 npm 包環境, 會生成一個 package.json 文件)。注意,如果沒有特殊需要,一路回車就可以了。
- 你現在可以在
D:\workspace\cypress
這個文件夾下看到一個package.json
文件。 - 再然後執行 Cypress 的安裝命令:
cnpm install cypress --save-dev
出現以下內容就是開始安裝:
等待全部運行完畢即可。
- 啓動 Cypress
在 CMD 中繼續執行以下命令:
npx cypress open
會啓動 Cypress 面板,並生成 Cypress 默認的一系列文件夾。其中包含了 Cypress 示例。
至此,Cypress 已安裝完畢。
運行示例
接下來,使用 vscode 打開 D:\workspace\cypress
可以看到如下目錄結構。
我們的測試代碼一般都放在 integration 文件夾中,關於文件夾的劃分,後續再進行說明。
現在你可以在 Cypress 面板上執行一些示例代碼,感受一下了。
點擊右邊的 Run all specs
或者直接點擊某個 .js
文件都可以執行。