Cypress自動化環境搭建

一、Cypress 下載：

官網下載，下載後直接解壓便可，解壓後即可單機exe文件打開

Ps：直接打開exe是會報錯找不到json文件的，因此還要安裝依賴環境

運行cypress項目前，必須vue-cli建立項目，可是vue是基於node環境的，因此咱們還要先安裝node.js

 

二、安裝node.js

官網下載地址：https://nodejs.org/en/download/

安裝步驟就不說了，傻瓜式一鍵繼續安裝

查看是否安裝成功命令

node –v  ：查看node版本

npm –v ：查看npm版本

ps：新的node安裝包已經包換了npm

 

2.一、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路徑，好像也並沒有關係，反正已經安裝好

參考文檔：http://www.javashuo.com/article/p-mpdcimfc-hw.html

  

三、vue-cli建立項目

安裝vue-cli

npm install -g vue-cli

以後能夠經過vue list來查看可使用哪些模板

 

 

建立項目

vue init webpack <your project name>

ps：建立項目後會建立一堆文件

進入項目

cd project

經過npm安裝依賴

npm install

npm i cypress –save-dev  （安裝cypress依賴）

安裝依賴後，在項目根目錄建立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格式化檢測工具檢測是否報錯

 

四、啓動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

 

同時控制檯也會輸出相應的操做日子

 

 

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