什麼是 Cypress Json:你應該知道的 11 個事實

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

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

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

柏樹json

目錄

賽普拉斯 JSON 文件

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

默認 JSON 選項

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

賽普拉斯 JSON 文件

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

{
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 表示選項的含義。

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

賽普拉斯 JSON 超時

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

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

賽普拉斯讀取 JSON 文件

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

選項預設產品產品描述
downloadsFoldercypress/downloads這是在測試運行期間下載和存儲文件的路徑
fixturesFoldercypress/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.
integrationFoldercypress/integration集成測試文件存儲在該文件夾的路徑中。
pluginsFilecypress/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**/*.*需要加載的測試文件的路徑。 它是一個字符串或全局模式數組。
videosFoldercypress/videos測試執行期間將存儲視頻的文件夾路徑

屏幕截圖和視頻選項

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

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

視口和可操作性

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

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

賽普拉斯 JSON 示例

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

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

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

{
    "defaultCommandTimeout" : 8000
}

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

cypress.json 文件

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

賽普拉斯設置默認值

通過測試腳本覆蓋默認值

我們也可以通過我們的測試腳本操作默認值。 而不是傳入 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 文件

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

賽普拉斯 JSON 記者

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

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

上面提到的選項是默認在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 文件。

cypress JSON 文件中的 Cypress 報告器

賽普拉斯 package-lock.json

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

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

賽普拉斯 package-lock.json 文件
回到頁首