1. 安裝NodeJS
下載地址，安裝完后通過node -v指令驗證是否安裝成功。
2. 創建package.json
我們可以使用命令npm init在項目的根目錄下來初始化一個package.json文件，運行這個命令后，它會詢問一些關於包的基本信息，根據實際情況回答即可。
如果不喜歡這種方式，可以使用npm init --yes （或npm init --y）命令直接使用默認的配置來創建package.json文件，最后根據需要修改創建好的package.json文件即可。
3. cypress安裝
cd /your/project/path
npm install cypress --save-dev
確保你已經運行了
npm init，或者存在node_modules文件夾，或者在你項目的根目錄存在package.json文件, 以此來確保cypress被安裝到正確的路徑下。
4. cypress啟動
./node_modules/.bin/cypress open
問題——啟動失敗：
解決辦法：
https://github.com/cypress-io/cypress/issues/1125
就是刪除下圖中的cypress文件，然后點擊啟動失敗圖中的“Try Again”：
啟動成功：
5. 創建用例
-
IDE 選擇微軟的VSCode(安裝教程)。
-
File>Open Folder， 選擇項目目錄中cypress文件夾，如E:\CypressTest\node_modules.bin\cypress
-
創建第一個用例，右擊integration目錄>New Folder， 起名為MyTests，再在MyTests下面新建一個mallcoo_C.js的文件，切換到Cypress，你是否發現Cypress自動給你刷新了目錄，你新建的mallcoo_C.js測試集文件，它已經幫你監測到了！只不過它現在還沒有任何內容。
Cypress提供了很多示例程序（examples），建議不要刪除它們，方便參考。
- 現在我們開始寫第一個自動化示例程序：
/// <reference types="Cypress" /> describe('XX模塊UI自動化測試', function () { beforeEach(() => { cy.viewport('iphone-6') // Set viewport to 375px x 667px 需要手機模式訪問時 // 瀏覽器模式訪問時，可按照自己的需要設置窗口大小，如 cy.viewport(1920,1100) //訪問10057商場C端首頁 cy.visit('https://m-t.mallcoo.cn/a/home/10057') }) it.only('登錄', function(){ //點擊首頁會員按鈕 cy.get('#div_index > div.fixed_b_menu.dis_flex > a:nth-child(2)').click() //點擊立即登錄按鈕 cy.get('#gotoLogin').click() //輸入手機號和密碼 cy.get('#mobile_p').type('xxxxxxxxxxx') cy.get('#pwd').type('xxxxxx') //點擊登錄按鈕 cy.get('#btnLoginPwd').click() }) it('個人中心', function () { //使用會員卡 cy.get('#use_card').click() }) it.skip('活動中心', function () { //使用會員卡 cy.contains('活動列表').click() }) }) 代碼解釋：
1 . reference表示告訴VSCode要去Cypress package里找相關的語義解析，這樣一來Cypress相關的語法和函數等就可以盡情地使用了；
2 . describe聲明了一個測試用例集；
3 . beforeEach相當於單元測試的setup，即在每個測試用例運行前需要做的事；
4 . viewport控制應用程序屏幕的大小和方向，詳見這里
5 . it聲明了一個測試用例；
6 . cy.get接受一個js selector， 就是元素定位字符串，當然Cypress也支持xpath定位，詳見這里；
-
it.only只測試這個,it.skip不要測這個
更方便起見，我們可以使用request方法登錄：
修改 D:\testProject\CypressProject\node_modules.bin\cypress\support路徑下的 commands.js 添加如下代碼:
Cypress.Commands.add('login', (userType, options = {}) => { const accountTypes = { admin:{ "username":"xxx", "password":"xxx", } } cy.request({ url:'your URL address', method:'POST', body:accountTypes[userType] }) }) 用例中在需要登錄的地方調用即可：
cy.login('admin')
6. 運行用例
保存代碼，在Cypress應用程序里找到mallcoo_C.js，點擊它，你會發現它跑起來了，而且如果再次對用例修改並保存，Cypress會自動檢測到新的改動，並馬上運行！當然，你也可以去掉這個自動重載機制...
Cypress會自動檢測可用的瀏覽器，以防萬一，建議把Chrome設置為默認瀏覽器，當然也可以在運行Cypress時手動指定cypress run --browser chrome。
7. 與Jenkins集成
構建結果：
推薦學習資料：《cypress從入門到精通》 一線資深測試經理蔡超編著