我們將討論在我們的代碼中編寫 JSON 的 JSON 結構、示例和詳細的實踐經驗。 但是，首先，讓我們深入研究我們的文章！

什麼是 Cypress Json：示例、架構、詳細的實踐分析

在我們以前的 文章，我們討論了變量和別名以及如何編寫我們的第一個測試用例。 現在，我們將討論 Cypress JSON 以及如何將其合併到我們的代碼中。

目錄

• 賽普拉斯 JSON 文件
• 默認 JSON 選項
• 全局選項
• 賽普拉斯 JSON 超時
• 賽普拉斯讀取 JSON 文件
• 屏幕截圖和視頻選項
• 視口和可操作性
• 賽普拉斯 JSON 示例
• 賽普拉斯夾具 JSON 數組
• 賽普拉斯環境 JSON
• 賽普拉斯 JSON 記者
• 賽普拉斯 package-lock.json

賽普拉斯 JSON 文件

正如我們之前看到的，我們第一次打開 Cypress Test Runner 時，它會創建一個 柏樹.json 文件。 該文件用於傳遞我們需要的任何配置值。 所以首先，我們將研究我們可以在我們的 cypress.json 文件。

默認 JSON 選項

某些選項在 Cypress 中默認設置。 但是，我們可以根據我們的項目自定義它們。 要識別賽普拉斯設置的默認值，請導航到 設定 Cypress Test Runner 中的文件夾。 從那裡，展開配置選項以查看賽普拉斯設置的默認選項。

這些選項是賽普拉斯提供的默認配置。

{
animationDistanceThreshold:5
baseUrl:null
blockHosts:null
browsers:Chrome, Firefox, Electron
chromeWebSecurity:true
component:{}
componentFolder:"cypress/component"
defaultCommandTimeout:4000
downloadsFolder:"cypress/downloads"
e2e:{}
env:null
execTimeout:60000
experimentalFetchPolyfill:false
experimentalInteractiveRunEvents:false
experimentalSourceRewriting:false
experimentalStudio:false
fileServerFolder:""
firefoxGcInterval:runMode, openMode
fixturesFolder:"cypress/fixtures"
hosts:null
ignoreTestFiles:".hot-update.js" includeShadowDom:false integrationFolder:"cypress/integration" modifyObstructiveCode:true nodeVersion:"default" numTestsKeptInMemory:50 pageLoadTimeout:60000 pluginsFile:"cypress/plugins" port:null projectId:"hpcsem" redirectionLimit:20 reporter:"spec" reporterOptions:null requestTimeout:5000 responseTimeout:30000 retries:runMode, openMode screenshotOnRunFailure:true screenshotsFolder:"cypress/screenshots" scrollBehavior:"top" supportFile:"cypress/support" taskTimeout:60000 testFiles:"/.*"
trashAssetsBeforeRuns:true
userAgent:null
video:true
videoCompression:32
videosFolder:"cypress/videos"
videoUploadOnPasses:true
viewportHeight:660
viewportWidth:1000
waitForAnimations:true
watchForFileChanges:true
}

選項

我們可以通過傳遞與我們的項目兼容的任何參數來更改 Cypress 的默認選項。 顧名思義，cypress.json 是一個 JSON 文件，所以我們必須以 JSON 格式傳遞我們的參數。 在我們的 VS 代碼中，您可以看到 cypress.json 是空的，沒有傳遞給它的參數。 現在讓我們看看可以在 JSON 文件中傳遞的不同選項。

全局選項

我們可以將全局選項傳遞給需要全局訪問的參數。 例如，在下表中，Options 列代表我們將在 JSON 文件中傳遞的關鍵字； Default 表示 Cypress 設置的特定選項的默認值，Description 表示選項的含義。

選項	預設產品	產品描述
baseUrl	null	我們可以全局設置 URL，而不是傳入每個文件。 它可以用於 cy.visit() or cy.request() 命令
clientCertificates	[]	您可以使用此選項基於 URL 配置客戶端證書
env	{}	您可以將任何環境變量作為值傳遞。 如果我們在不同的環境（如登台或生產）中測試我們的應用程序，此選項將非常有用。
watchForFileChanges	true	此選項檢查賽普拉斯是否監視並重新啟動對任何文件更改進行的測試。
port	null	我們可以在託管 Cypress 上傳遞端口號。 生成一個隨機端口，但我們可以添加我們需要的端口號。
numTestsKeptInMemory	50	此選項是存儲在內存中的測試快照和命令數據的數量。 如果在測試運行期間瀏覽器內存消耗很高，我們可以減少數量。
retries	{ "runMode": 0, "openMode": 0 }	此選項用於指定重試失敗的測試的次數。 我們可以單獨配置 柏樹跑 及 柏樹開放.
redirectionLimit	20	我們可以配置應用程序在發生錯誤之前可以重定向的次數限制。
includeShadowDom	false	在 Shadow DOM 中導航以與元素交互的能力。 默認情況下，它設置為 false。 如果我們的應用程序有任何需要影子根導航的元素，您可以將其設置為 true.

賽普拉斯 JSON 超時

超時是任何自動化框架中最重要的概念之一。 Cypress 提供了多種選項來幫助處理我們腳本中的超時。 首先，我們將研究可以配置的選項。

選項	預設產品	產品描述
defaultCommandTimeout	4000	此選項用於等待基於 DOM Elements 的命令加載。 這是以毫秒為單位。
requestTimeout	5000	等待 cy.wait() 命令請求超時的時間（以毫秒為單位）。
responseTimeout	30000	這個超時是等待一系列命令的響應，例如  cy.request(), cy.wait(), cy.fixture(), cy.getCookie(),  cy.getCookies(), cy.setCookie(), cy.clearCookie(), cy.clearCookies()和 cy.screenshot() 命令
taskTimeout	60000	超時，以毫秒為單位，完成執行 cy.task() 命令
execTimeout	60000	這個以毫秒為單位的時間是等待完成執行 cy.exec() 命令， 這是系統命令的完成
pageLoadTimeout	60000	這個超時等待 page navigation events 或交互的命令 像這樣的頁面 cy.visit(), cy.go(), cy.reload()

賽普拉斯讀取 JSON 文件

有時，我們需要與項目中的文件夾或文件進行交互。 要進行交互，我們必須在我們的 cypress.json 文件來操作文件。 因此，首先，讓我們看看文件夾/文件配置中可用的選項。

選項	預設產品	產品描述
downloadsFolder	cypress/downloads	這是在測試運行期間下載和存儲文件的路徑
fixturesFolder	cypress/fixtures	這是包含夾具文件的文件夾的路徑。 我們可以通過 false 禁用存儲文件。
ignoreTestFiles*.hot-update.jsYou can pass this as a string or array of global patterns to ignore test files for the test run. However, it would be displayed in the test files.
integrationFolder	cypress/integration	集成測試文件存儲在該文件夾的路徑中。
pluginsFile	cypress/plugins/index.js	此路徑是存儲插件的位置。 您可以將參數傳遞為 false 以禁用此配置。
screenshotsFoldercypress/screenshotsScreenshots from the execution of cy.screenshot() command and test failure during cypress run are stored in this foldersupportFilecypress/support/index.jsHere the test files that load before the test are stored. You have the option to disable by passing false
testFiles	**/*.*	需要加載的測試文件的路徑。 它是一個字符串或全局模式數組。
videosFolder	cypress/videos	測試執行期間將存儲視頻的文件夾路徑

屏幕截圖和視頻選項

我們可以在 cypress.json() 文件中配置我們的快照和視頻，Cypress 為我們提供了一些選項來自定義我們的配置。

選項	預設產品	產品描述
screenshotOnRunFailure	true	當賽普拉斯運行時，賽普拉斯是否在測試失敗期間截取屏幕截圖，將其設置為 true 或 false 的選項。 它被設置為 true 默認情況下，
trashAssetsBeforeRuns	true	此選項用於垃圾中的資產 videosFolder, downloadsFolder 及 screenshotsFolder 每次之前 cypress run
videoCompression	32	此選項是在恆定速率因子 (CRF) 中測量的視頻壓縮質量。 通過傳遞 false，您也可以禁用此選項。 您可以傳遞 0 到 51 之間的值，其中最低值提供更好的質量。
videosFolder	cypress/videos	保存測試視頻的文件夾。
video	true	用於捕獲測試執行視頻的布爾值 cypress run.
videoUploadOnPasses	true	此選項用於在規範文件中的所有測試用例都通過時將視頻上傳到儀表板。

視口和可操作性

您可以使用賽普拉斯提供的選項配置和傳遞值以更改視口高度和寬度。 還可以配置可操作性選項。

選項	預設產品	產品描述
viewportHeight	660	這是為了以像素為單位提供應用程序的默認高度。 我們可以用 cy.viewport()
viewportWidth	1000	應用程序視口寬度的選項（以像素為單位）。 可以覆蓋 cy.viewport() 命令。
animationDistanceThreshold	5	以像素為單位測量的距離閾值，考慮到動畫時間，元素必須超過該距離。
waitForAnimations	true	在執行任何命令之前等待元素完成動畫的選項。
scrollBehavior	top	這是一個視口選項，必須在執行任何命令之前滾動到元素。 可用的選項是 'center', 'top', 'bottom', 'nearest'， 或者 false，其特徵在於 false 禁用滾動。

賽普拉斯 JSON 示例

早些時候，我們看到了我們可以在我們的 cypress.json 文件。 現在，我們將研究如何在我們的項目中使用它們的示例。

覆蓋 cypress.json 文件中的默認值

在我們的 VS 代碼中，打開 cypress.json 文件。 我們將覆蓋 defaultCommandTimeout 命令 8000.

{
    "defaultCommandTimeout" : 8000
}

這就是它在我們的 VS 代碼項目中的樣子。

通過改變 cypress.json 文件，它適用於整個框架。 我們可以通過導航到我們的 Cypress 設置來驗證。 它已從默認值更改為 4000 至 8000

通過測試腳本覆蓋默認值

我們也可以通過我們的測試腳本操作默認值。 而不是傳入 cypress.json 文件，我們將在我們的測試文件中傳遞它。

//Changing the timeout from 4 seconds to 8 seconds
Cypress.config('defaultCommandTimeout',8000)

// Test code
cy.get('#username').type(users.email)
cy.get('#pswd').type(users.password)
cy.get('#login_btn').click()

這樣，我們可以覆蓋測試文件中的默認值。 但是，這不會影響框架級別的任何配置更改。 Cypress 優先考慮中的值 cypress.json. 最後，它佔用了全局配置。

賽普拉斯夾具 JSON 數組

柏 cy.fixture() 是一個在文件中加載一組固定數據的函數。 我們可以將夾具用作 JSON 來加載 JSON 文件中的任何值或數組。 首先，讓我們了解如何訪問我們項目中的 JSON 文件。

我的 JSON 文件有兩個屬性：用戶名和密碼。 我的 JSON 文件名是 examples.json.

{
"email": "test@gmail.com",
"password" : test123
}

在我們的規範文件中，我們將使用 cy.fixture() 命令和 別名.

 cy.fixture('example.json').as('example')

 //Using the alias name to this keyword, So we can use globally  
        const userObj = this.userData
//looping our .json data with a new variable users
         cy.get(userData).each((users) => 
         {
              //Write the test code.
        cy.get('#username').type(users.email)
        cy.get('#pswd').type(users.password)
          }       

賽普拉斯環境 JSON

環境變量用於組織中的許多項目。 我們使用環境變量

• 當值在不同機器上是動態的時
• 當我們想在不同的環境下進行測試時，例如登台、測試、開發、生產/現場

這些情況需要我們定義環境變量。 但是，如果我們在一個規範文件中設置了一個 env 變量，它不會在其他規範文件中反映出來。 這是因為賽普拉斯獨立運行每個規範文件。 這樣，我們將需要單獨配置 env 變量。

我們從 Cypress JSON 文件訪問我們的環境文件，即， cypress.json 文件。 所以我們將被要求在我們的 cypress.json 文件並在我們的規範文件中使用它。 因此，讓我們深入研究我們的示例。

我們可以在我們的配置文件中設置我們的環境變量或者 cypress.env.json 文件。

在 cypress.json 文件中設置環境變量

我們通過鍵值對設置 env 屬性。 在關鍵字下傳遞的任何值 env 屬於環境變量，賽普拉斯從 env 關鍵詞。 語法如下所示。

{
  "env": {
    "key1": "value1",
    "key2": "value2"
  }
}

如果我們想訪問 env 我們的規範文件中的變量，我們如下所述分配它們。

Cypress.env() //returns both the key1,value1 and key2, value2

Cypress.env(key1) //returns only the value1

我們將添加 env 我們項目中的配置，並將在我們的規範文件中訪問它們。 在我們的 cypress.json 文件，添加如下配置。 我們正在設置我們的 URL 屬性並將它們分配給我們的 URL。 這裡， URL 是關鍵，並且 https://lambdageeks.com/technology/ 是價值。

{
  "env" : {
      "url" : "https://lambdageeks.com/technology/"
    }
}

由於我們已經聲明了配置，我們將在我們的規範文件中訪問它們。 它看起來像下面。 如上所述，我們將使用 Cypress.env() 訪問env變量的方法。

// type definitions for Cypress object "cy"
// <reference types="cypress" />

describe('Cypress Example ', function () {

    it('accessing the environment variable', function () {

        //Calling URL from cypress.json
        cy.visit(Cypress.env('url'));

    })
})

在 cypress.env.json 文件中設置環境變量

我們可以在我們的 cypress env JSON 文件中分配我們的環境變量。 為此，我們應該創建一個名為的新文件 cypress.env.json 在項目的根。 我們不會要求 env 關鍵詞; 相反，我們可以通過傳遞鍵值對直接訪問它們。

{
    "key1": "value1",
    "key2": "value2"
}

讓我們看看如何在我們的 cypress.env.json 文件。

{
    "url" : "https://lambdageeks.com/",
    "urlTechnology" : "https://lambdageeks.com/technology/"
}

如上所示，我們創建了一個新文件， cypress.env.json，並添加了我們的 URL 特性。 訪問環境變量的方式與上一節中提到的相同。

賽普拉斯 JSON 記者

眾所周知，Cypress 建立在 Mocha 之上； 任何為 Mocha 構建的記者都可以使用。 我們可以在我們的 JSON 文件中全局配置報告器 cypress.json 文件。

reporter	spec	在這裡，您可以指定在 cypress 運行期間應生成的報告器。 它被設置為 spec 作為默認記者。
reporterOptions	null	這是為報告者指定支持的選項。

上面提到的選項是默認在reporter中設置的配置。 除此之外 spec 報告者是默認設置的。 因此，在報告器中，我們可以設置任何與摩卡兼容的報告器。 reporterOptions 是根據我們正在配置的報告器指定支持的選項。

讓我們看看如何在我們的 cypress.json 文件。

讓我們將多記者 mochawesome 視為我們的記者。 我們將首先安裝報告器並將它們添加到我們的 cypress.json 文件。

npm install --save-dev mocha cypress-multi-reporters mochawesome

通過在命令行中傳遞上述命令來安裝報告器。 現在，在我們的 cypress.json 文件，添加以下屬性。

"reporter": "cypress-multi-reporters",
  "reporterOptions": {
      "reportDir": "cypress/reports/multireports",
      "overwrite": false,
      "html": false,
      "json": true
    }

我們將詳細了解每個屬性。

記者：我們在項目中配置的報告器的名稱

報告目錄: 我們要輸出結果的目錄。

覆蓋：這個標誌要求覆蓋以前的報告。

HTML：生成測試完成報告。

JSON: 是否在測試完成時生成 JSON 文件。

賽普拉斯 package-lock.json

 包-lock.json 當 npm 修改節點模塊或 package.json 文件時，會為任何操作自動創建文件。 當我們添加任何選項或 將任何新的依賴項安裝到我們的賽普拉斯 打包 JSON 文件，然后賽普拉斯 package-lock.json 會自動更新。

Cypess package.lock JSON 文件跟踪每個包及其版本，以便在全局每次 npm 安裝時維護和更新安裝。 因此，在我們的 Cypress 包 JSON 文件中，當我們更新版本或添加任何依賴項時，package-lock.json 也會更新，我們不想對其進行任何更改。