如果想從頭學起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

常見的環境變數設定方式

可參考這篇文章：https://www.cnblogs.com/poloyy/p/13056393.html

前言

• 裡面寫的設定方式針對的是單個環境
• 但實際專案可能會存在多個環境（開發、測試、預發、生產），不同環境的環境變數就會不一樣
• 如果還是單純只用上面講到的方式，切換不同環境時，還得手動修改環境變數，極其不方便

使用 cypress.env.json

前言

• Cypress 允許針對不同測試環境使用多個配置檔案並且在執行時動態指定
• 從而免除每切換一次環境，就需要更改環境變數值的情況

具體操作步驟

建立資料夾和檔案

• 在 cypress安裝目錄下建立一個 config 資料夾
• 資料夾下建立兩個檔案，分別命名為 cypress.dev.json，cypress.qa.json

cypress.dev.json 程式碼

{
  "baseUrl": "http://localhost:7077/login",
  "env": {
    "username": "jane.lane",
    "password": "password123"
  }
}

cypress.qa.json 程式碼

{
  "baseUrl": "http://localhost:7077/login",
  "env": {
    "username": "wrongUser",
    "password": "wrongPwd"
  }
}

在 cypress 安裝目錄/plugins/index.js 中更改配置如下

index.js 的程式碼

測試用例程式碼

命令列執行 cypress 命令

yarn cypress:open --env configFile=qa

• 上述命令開啟 cypress 執行器（Test Runner）
• 當然 configFile 作為環境變數可以有多種方式傳遞，參照一開始的文章哦

檢視執行器的配置項

測試結果

點選即可執行測試用例檔案

執行時動態指定環境變數

• 上面講的使用 cypress.env.json 可以指定測試環境執行，但需要額外建立檔案
• 除 cypress.env.json 外，在執行時指定測試環境的同時仍然可以使用 cypress.json 檔案

cypress.json 程式碼

  "targetEnv": "dev",
  "env": {
    "dev": {
      "username": "iTesting",
      "password": "weChat",
      "Url": "http://localhost:5883"
    },
    "qa": {
      "username": "wrongUser",
      "password": "wrongPassword",
      "Url": "http://www.test.com:5883"
    }
  }

support/index.js 程式碼

命令列執行 cypress 命令

指定需要執行的測試環境

yarn cypress:open --env testEnv=qa