Cypress 安裝指南 node.js 環境 vscode 開發工具 安裝 Cypress 運行示例

安裝 Cypress 涉及到如下幾個部分:

  1. node.js 環境
  2. vscode 開發工具
  3. 通過 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

  1. 在你的工作目錄,新建一個文件夾。如
D:\workspace\cypress
  1. 接下來,在命令提示符進入該文件夾:
  1. 進入該文件夾後,運行 npm init 命令(其實就是初始化 npm 包環境, 會生成一個 package.json 文件)。注意,如果沒有特殊需要,一路回車就可以了。
  1. 你現在可以在D:\workspace\cypress這個文件夾下看到一個package.json文件。
  2. 再然後執行 Cypress 的安裝命令:
cnpm install cypress --save-dev

出現以下內容就是開始安裝:

等待全部運行完畢即可。

  1. 啓動 Cypress
    在 CMD 中繼續執行以下命令:
npx cypress open

會啓動 Cypress 面板,並生成 Cypress 默認的一系列文件夾。其中包含了 Cypress 示例。

至此,Cypress 已安裝完畢。

運行示例

接下來,使用 vscode 打開 D:\workspace\cypress 可以看到如下目錄結構。

我們的測試代碼一般都放在 integration 文件夾中,關於文件夾的劃分,後續再進行說明。

現在你可以在 Cypress 面板上執行一些示例代碼,感受一下了。

點擊右邊的 Run all specs 或者直接點擊某個 .js 文件都可以執行。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章