Cypress - 安裝 & 第一個測試案例（Windows 10 & MAC OS）

本學習筆記整理自 Cypress Web Automation

一. 什么是 Cypress

基於 JavaScript 的開源 Web UI 自動化測試框架，官網：https://www.cypress.io/

二. Cypress 特點及限制

1. 不使用 Selenium Webdriver，與Selenium的架構完全不一樣
2. 關注 e2e 測試，僅支持前端框架或網站
3. 自動等待，相比 Selenium 來說更更快更穩定
4. 自動化過程全程有 video 且失敗自動截圖
5. 支持 requests 接口

三. Cypress 安裝（Windows 10）

1. 下載 Node & NPM

1. Google download nodejs
2. 點擊 windows installer(https://nodejs.org/en/download/current/)
3. 雙擊安裝 node js
4. 一直往下安裝

2. 設置 NODE_HOME 環境變量：C:\Program Files\nodejs
3. 創建 Cypress 工作目錄
4. 生成 package.json 文件

1. 在創建的 Cypress 工作目錄打開的地址欄輸入 cmd
2. 運行命令： npm init
3. 默認往下

5. 安裝 Cypress

在cmd 輸入： npm install cypress --save-dev

6. 下載安裝 Visual Studio Code，然后通過 File -> Open Folder 打開創建的 Cypress 工作目錄

四. Cypress 安裝（MAC OS）

1. 下載 Node & NPM

1. Google download nodejs
2. 點擊 macOS installer(https://nodejs.org/en/download/current/)
3. 雙擊安裝 node js (如果提示無法判斷是否惡意軟件，去系統設置的安全與隱私通用下面點仍要打開即可)
4. 一直往下安裝

2. 創建 Cypress 工作目錄
3. 生成 package.json 文件

1. 在創建的 Cypress 工作目錄打開 terminal（在文件夾右擊后選擇在目錄打開終端窗口）
2. 運行命令： npm init
3. 默認往下

4. 安裝 Cypress

在終端運行命令： npm install cypress --save-dev

5. 下載安裝 Visual Studio Code，然后通過 File -> Open Folder 打開創建的 Cypress 工作目錄

五. 打開 Cypress Test Runner

1. 在命令行輸入：

Windows:  .\node_modules\.bin\cypress open

Mac: ./node_modules/.bin/cypress open

Mac & Windows: npx cypress open

 

 

 

 2. 自動打開 Cypress 的 test runner (自帶一些示例）

 3. 自動生成的項目結構：

六. 第一個測試案例

1. 在 cypress/integration 下新建文件夾及測試文件 first-test.spec.js   (一般測試文件以 .spec.js 結尾）

2. 寫第一個測試案例的代碼

// describe 可以理解成一個 suite
describe('My First Test Suite', () => {
    // 每個 it 表示一個測試案例
    it('Verify Bing page title', () => {
        // 訪問網頁， 同 selenium 的 driver.get()
        cy.visit('https://www.bing.com/')
        // should 在此是斷言
        cy.title().should('eq', '微軟 Bing 搜索 - 國內版')
    })
})

3. 在 terminal 運行 npx cypress open 以打開 test runner

4. 雙擊 first-test.spec.js 即可自動跑測試案例