Cypress 自動化環境搭建

1、Cypress 下載：

• 官網下載，下載后直接解壓即可，解壓后便可單機 exe 文件打開
• Ps：直接打開 exe 是會報錯找不到 json文件的，所以還要安裝依賴環境
• 運行 cypress 項目前，必須 vue-cli 創建項目，但是 vue 是基於 node 環境的，所以我們還要先安裝 node.js

2、安裝 node.js

• 官網下載地址：https://nodejs.org/en/download/
• 安裝步驟就不說了，傻瓜式一鍵繼續安裝
• 查看是否安裝成功命令
• node –v：查看 node 版本
• npm –v：查看 npm 版本
• ps：新的 node 安裝包已經包換了 npm

3、node 環境配置

• 這里的環境配置主要配置的是 npm 安裝的全局模塊所在的路徑，以及緩存 cache 的路徑，之所以要配置，是因為以后在執行類似：npm install express [-g] （后面的可選參數 -g，g 代表 global 全局安裝的意思）的安裝語句時，會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中，占 C 盤空間
• 例如：我希望將全模塊所在路徑和緩存路徑放在我 node.js 安裝的文件夾中，則在我安裝的文件夾【D:\Develop\nodejs】下創建兩個文件夾【node_global】及【node_cache】如下圖：

 

• 創建完兩個空文件夾之后，打開 cmd 命令窗口，輸入

npm config set prefix "D:\Develop\nodejs\node_global"

npm config set cache "D:\Develop\nodejs\node_cache"

 

• 然后就是設置環境變量了
  • 新建 NODE_PATH  輸入【D:\Develop\nodejs\node_global\node_modules】　　
  • 然后將【用戶變量】下的【Path】修改為【D:\Develop\nodejs\node_global】　　
  • Ps：是用戶變量的 path，不是全局的 path　　

• 測試：
  • 配置完后，安裝個 module 測試下，我們就安裝最常用的 express 模塊，打開 cmd 窗口　
  • 輸入如下命令進行模塊的全局安裝：　　

npm install express -g     # -g是全局安裝的意思

 

• Ps：當時安裝的時候並未出現 node_golbal 路徑，好像也並無關系，反正已經安裝好
• 參考文檔：https://www.cnblogs.com/zhouyu2017/p/6485265.html

4、vue-cli 創建項目

• 安裝 vue-cli

npm install -g vue-cli

• 之后可以通過 vue list 來查看可以使用哪些模板

 

• 創建項目

vue init webpack <your project name>

• ps：創建項目后會創建一堆文件
• 進入項目

cd project

# 通過 npm 安裝依賴
npm install

# 安裝 cypress 依賴
npm i cypress –save-dev  

# 安裝依賴后，在項目根目錄創建 cypress.json 文件並添加以下配置信息
{
"baseUrl": "http://localhost:8080",  //測試域名
"integrationFolder": "cypress/integration",  //測試文件存放目錄
"testFiles": "**/*.cypress.spec.js", //根據規則匹配具體測試文件，可修改
"vedio": false,    //是否使用錄制功能
"viewportHeight": 800,    //瀏覽器高度
"viewportWidth": 1600    //瀏覽器寬度
}

• Ps：具體配置的時候，把注釋去掉，不然會報錯
• 修改 package.json 文件，添加 cypress 配置信息，如下

"cypress": "cypress run",
"cypress-gui": "cypress open"

 

• Ps:如果 json 報錯，可用在線 json 格式化檢測工具檢測是否報錯

5、啟動 cypress

• 到這里，配置就已經差不多了，cmd 運行啟動命令

npm run cypress-gui

• 沒報錯的話可以啟動 cypress 了

 

• 未找到測試文件，因為我們還未創建而已，不是報錯，下面我們先編寫 js 測試文件，先測試打開我們的測試網站
• 在 integration 目錄下創建測試文件 test.cypress.spec.js

describe('My First Test', function() {
  it('Visits the Kitchen Sink', function() {
    cy.visit('https://sz.ichunt.com')
cy.contains('closemz').click()
  })
})

• Cypress配置參考地址
  • https://www.imooc.com/article/details/id/28054
    
• 腳本編寫參考cypress官方文檔：
  • https://docs.cypress.io/api/api/table-of-contents.html
    
  • https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Step-3-Click-an-element
    
• 頁面打開如下圖

 

• 同時控制台也會輸出相應的操作日子

 

•  至此環境是已經搭建好了，但是具體使用的話，還要去深入學習一下哦。。。