Cypress - 快速指南

---

---

Cypress - 簡介

Cypress 是一款開源且免費的測試自動化工具，可以長期廣泛使用。它主要用於前端測試自動化。此工具主要是為了解決團隊在自動化應用程式時遇到的問題而開發的。

Cypress 有助於實現以下目標 -

• 配置測試。

• 配置測試。

• 執行測試。

• 識別錯誤（如果有）。

Selenium 和 Cypress 通常在功能方面進行比較。但是，Cypress 在架構和功能方面有所不同。此外，它解決了我們在 Selenium 中遇到的一些問題。

Cypress 基於 Javascript 並在瀏覽器內執行測試。它有助於開發包含以下內容的測試 -

• 單元測試。

• 端到端測試。

• 整合測試。

特性

Cypress 的重要特性如下所示 -

• 支援測試驅動開發。

• 提供儀表盤服務。

• 使用開發人員工具進行高效除錯，並生成堆疊跟蹤和錯誤。

• 為失敗的測試提供螢幕截圖。

• 無需新增等待來停止執行一段時間。預設情況下，會在執行後續步驟或斷言之前應用等待。

• 能夠監控和控制伺服器響應、函式和計時器的特性，這對於單元測試至關重要。

• 檢查和管理網路流量。

• 允許多瀏覽器支援。

• 提供內建的執行影片捕獲功能。

• 可以與持續整合工具整合。

• 頁面響應能力與視口大小調整。

• 預設情況下重新載入對測試所做的更改。

• 提供友好的應用程式程式設計介面 (API)。

• 提供測試執行器，允許直接從使用者介面 (UI) 執行測試。

缺點

使用 Cypress 有一些缺點，如下所示 -

• 它僅基於 JavaScript。

• 一個相對較新的工具，因此社群支援不廣泛。

• 它無法執行移動測試。

• 無法訪問 Shadow 文件物件模型 (DOM)。

• 標籤頁/子視窗透過變通方法管理。

Cypress - 架構和環境設定

Cypress 架構在下面的圖中說明 -

上圖的來源為 https://tutorialspoint.tw/cypress-architecturetest-automation

像 Selenium 這樣的自動化工具透過在瀏覽器外部執行來工作。但是，Cypress 具有不同的架構。它在瀏覽器內執行。Cypress 基本上基於伺服器 - Node.js。

Cypress 與 Node.js 持續互動，它們相互協調工作。因此，Cypress 可用於測試應用程式的前端和後端。

因此，Cypress 能夠處理在 UI 上即時執行的任務，同時還可以在瀏覽器外部執行操作。

Cypress 和 Selenium 之間的區別

Cypress 和 Selenium 之間的基本區別如下所示 -

Cypress 環境設定

要進行 Cypress 環境設定，請訪問以下連結 -https://nodejs.com.tw/en/download/。將顯示如下螢幕 -

將同時提供 Windows 和 macOS 安裝程式。我們必須根據本地作業系統獲取軟體包。

對於 64 位 Windows 配置，以下彈出視窗將出現以儲存安裝程式。

安裝完成後，將在 Program files 中建立一個 nodejs 檔案。應記下此檔案的路徑。然後，從“開始”中輸入環境變數，如下所示 -

在“系統屬性”彈出視窗中，移動到“高階”，單擊“環境變數”。然後單擊“確定”。

在“環境變數”彈出視窗中，移動到“系統變數”部分，然後單擊“新建”。

在“新建系統變數”彈出視窗中，分別在“變數名”和“變數值”欄位中輸入 NODE_HOME 和 node.js 路徑（之前記下的）。

設定 node.js 檔案的路徑後，我們將在任何所需位置建立一個空資料夾（例如 cypressautomation）。

接下來，我們需要一個 JavaScript 編輯器來編寫 Cypress 的程式碼。為此，我們可以從連結 https://vscode.com.tw/ 下載 Visual Studio Code

根據本地作業系統，選擇正確的軟體包 -

下載可執行檔案並完成所有安裝步驟後，將啟動 Visual Studio Code。

從“檔案”選單中選擇“開啟資料夾”選項。然後，將我們之前建立的 CypressAutomation 資料夾新增到 Visual Studio Code 中。

我們需要使用以下終端命令建立 package.json 檔案 -

我們必須輸入軟體包名稱、描述等詳細資訊，如下面的影像中所述 -

npm init

完成後，package.json 檔案將在專案資料夾中建立，其中包含我們提供的資訊。

完成後，package.json 檔案將在專案資料夾中建立，其中包含我們提供的資訊。

最後，要安裝 Cypress，請執行以下命令 -

npm install cypress --save-dev

您將獲得以下輸出 -

Cypress - 測試執行器

Cypress 測試執行器有助於觸發測試執行。完成 Cypress 安裝後，工具將在終端上提供以下建議 -

You can open Cypress by running − node_modules/.bin/cypress open

要開啟測試執行器，我們必須執行以下命令 -

node_modules/.bin/cypress open

測試執行器視窗將在一段時間後開啟，並顯示一條訊息，說明 Cypress 已在 examples 資料夾下提供了示例專案資料夾結構。

單擊“確定，知道了！”按鈕。將在您的計算機上顯示以下螢幕 -

然後啟動測試執行器，其中包含 examples 資料夾下提供的多個規範檔案，如下所示 -

要執行特定檔案，例如 test2.spec.js，我們必須單擊它。此外，瀏覽器和停止執行的選項也可用。

執行將以以下螢幕開始，顯示測試步驟、測試用例名稱、測試套件、URL、測試持續時間、瀏覽器尺寸等。

Cypress - 構建第一個測試

配置完 Cypress 後，將在專案中建立一個框架，該框架在資源管理器中自動可見。應在 integration 資料夾中建立新的測試檔案（例如 FirstTest.spec.js），如下所示。

Cypress 資料夾結構

讓我們瞭解 Cypress 中的資料夾結構。以下解釋了 Cypress 資料夾中包含的因素 -

• fixtures - 測試資料以鍵值對的形式儲存在此處，供測試使用。

• integration - 框架的測試用例儲存在此處。

• plugins - Cypress 事件（要在測試之前和之後執行的事件）儲存在此處。

• support - 可重用方法或自定義命令創建於此處，測試用例可以直接使用這些方法或命令，而無需建立物件。

• videos - 執行的測試步驟以影片形式記錄並儲存在此處。

• node_modules - 來自 npm 的專案依賴項儲存在此資料夾中。它是 Cypress 專案執行的核心。

• cypress.json - 預設配置設定在此資料夾中。此處可以修改當前配置的值，這將覆蓋預設配置。

• package.json - 專案的依賴項和指令碼儲存在此資料夾中。

基本測試的結構

Cypress 遵循 JavaScript 測試框架（Mocha、Jasmine 等）。要在 Cypress 中建立測試，我們必須遵守以下框架指南 -

• 必須在 describe 函式中提供測試套件名稱。

• 測試套件中的測試用例名稱必須在同一函式中提供，或者您必須指定該函式。

• 測試用例中的測試步驟必須在 it/specify 塊內實現。

基本測試實現

基本的測試實現可以透過以下命令完成：

// test suite name
describe('Tutorialspoint Test', function () {
// Test case
   it('Scenario 1', function (){
      // test step for URL launching
      cy.visit("https://www.google.com/");
   });
});

上面使用的 cy 命令不需要物件呼叫。安裝 node 模組後，它預設可用。

測試執行

要從命令列執行，請執行以下命令：

./node_modules/.bin/cypress run

這裡，integration 資料夾中的所有檔案都會被觸發。

要從測試執行器執行，請執行以下命令：

./node_modules/.bin/cypress open

然後，點選我們想要觸發執行的規範檔案。

要從命令列觸發特定檔案的執行，請執行以下命令：

cypress run --spec "<spec file path>"

您的電腦上將出現以下螢幕：

Cypress - 支援的瀏覽器

Cypress 可以執行 Chrome、Electron 和 Firefox 等瀏覽器中的測試。在測試執行器中，我們可以從右上角選擇瀏覽器。

另外，需要注意的是，如果某個瀏覽器選項不可用，則表示我們的系統中沒有該瀏覽器的最新版本。

從其他瀏覽器執行

以下是從命令列執行其他瀏覽器的說明：

要在 Chrome 中執行，您需要執行以下命令：

./node_modules/.bin/cypress run -- browser chrome

您將看到以下螢幕：

要在 Firefox 中執行，請執行以下命令：

./node_modules/.bin/cypress run -- browser firefox

您將看到以下螢幕：

要以有頭模式執行，請執行以下命令：

./node_modules/.bin/cypress run -- headed

從命令列，如果未指定選項，Cypress 會以無頭模式執行測試。

Cypress - 基本命令

Cypress 基本命令列出如下：

和

它用於建立斷言，是 .should() 的別名。

用法如下：

//element is visible & enabled
cy.get('#txt').should('be.visible').and('be.enabled')
//element is checked
cy.contains('Subject').and('be.checked')

作為

它為後續使用提供別名。

用法如下：

//alias element as parent
cy.get('#txt').find('li').first().as('parent')

失焦

它使焦點中的元素失焦。

用法如下：

//blur input
cy.get('#txt'). type('abc').blur()

選中

它選中單選按鈕或複選框，並應用於具有 input 標籤的元素。

用法如下：

//checks element having class attribute chkbox
cy.get('.chkbox').check()

子元素

它獲取元素的子元素。

用法如下：

//obtains children of element n
cy.get('n').children()

清除

它刪除 textarea 或 input 中的值。

用法如下：

//removes input abc
cy.get('#txt'). type('abc').clear()

清除Cookie

它刪除特定的瀏覽器 Cookie。

用法如下：

//clear abc cookie
cy.clearCookie('abc')

清除所有Cookie

它刪除現有域和子域的瀏覽器 Cookie。

用法如下：

//clear all cookies
cy.clearCookies()

清除本地儲存

它刪除現有域和子域的本地儲存資料。

用法如下：

//clear all local storage
cy. clearLocalStorage ()

點選

它點選文件物件模型 (DOM) 中的元素。

用法如下：

//click on element with id txt
cy.get('#txt').click()

包含

它獲取包含特定文字的元素。該元素可以包含更多文字，並且仍然匹配。

用法如下：

//returns element in #txt having Tutor text
cy.get('#txt').contains('Tutor')

雙擊

它雙擊文件物件模型 (DOM) 中的元素。

用法如下：

//double clicks element with id txt
cy.get('#txt').dblclick()

除錯

它修復偵錯程式，並返回先前命令返回的日誌值。

用法如下：

//pause to debug at start of command
cy.get('#txt').debug()

文件

它獲取活動頁面上的 window.document。

用法如下：

cy.document()

每個

它迭代具有 length 屬性的陣列。

用法如下：

//iterate through individual li
cy.get('li').each(() => {...})

結束

它結束命令鏈。

用法如下：

//obtain null instead of input
cy.contains('input').end()

等於

它指的是元素陣列中特定索引處的元素。

用法如下：

//obtain third td in tr
cy.get('tr>td').eq(2)

執行

它執行系統命令。

用法如下：

cy.exec('npm init')

查詢

它獲取特定定位器的後代元素。

用法如下：

//obtain td from tr
cy.get('tr').find('td')

第一個

它獲取一組元素中的第一個元素。

用法如下：

//obtain first td in tr
cy.get('tr>td').first()

獲取

它透過定位器獲取單個或多個元素。

用法如下：

//obtain td from tr

查詢

它獲取特定定位器的後代元素。

用法如下：

//obtain all td from tr in list
cy.get('tr>td')

獲取Cookie

它透過名稱獲取特定的瀏覽器 Cookie。

用法如下：

cy.getCookie('abc')

獲取所有Cookie

它獲取所有 Cookie。

用法如下：

cy.getCookies()

跳轉

它在瀏覽器歷史記錄中向前或向後移動到下一個或上一個 URL。

用法如下：

//like clicking back button
cy.go('back')
//like clicking forward button
cy.go('forward')

訪問

它啟動一個 URL。

用法如下：

cy.visit('https://tutorialspoint.tw/index.htm')

下一個

它獲取文件物件模型 (DOM) 中一組元素中元素的直接同級元素。

用法如下：

//gives the following link in element l.
cy.get('l a:first').next()

父元素

它獲取 DOM 中一組元素的父元素。

用法如下：

//get parent of element with class h
cy.get('.h').parent()

應該

它用於建立斷言，是 .and() 的別名。

用法如下：

//assert element is visible & enabled
cy.get('#txt').should('be.visible').and('be.enabled')

等待

在毫秒數內等待一段時間，或在執行後續步驟之前等待一個別名元素。

用法如下：

cy.wait(1000)

標題

它獲取活動頁面的 document.title。

用法如下：

cy.title()

視口

它管理螢幕的尺寸和位置。

用法如下：

// viewport to 100px and 500px
cy.viewport(100, 500)

日誌

它將訊息列印到命令日誌。

用法如下：

cy.log('Cypress logging ')

重新載入

它用於頁面重新載入。

用法如下：

cy.reload()

Cypress - 變數

在 Cypress 中，使用了 var、let 和 const 等變數。在使用閉包時，我們可以使用未賦值的物件。但是，在處理可變物件時，情況並非如此。

當物件修改其特性時，我們可能需要將其先前值與其新值進行比較。

程式碼實現

我們可以使用以下命令進行程式碼實現：

cy.get('.btn').then(($span) => {
   // value capture before button click and stored in const
   const n = parseInt($span.text())
   cy.get('b').click().then(() => {
      // value capture after button click and stored in const
      const m = parseInt($span.text())
      // comparison
      expect(n).to.eq(m)
   })
})

在上述情況下，我們使用 const 變數，因為物件 $span 正在發生變化。在處理可變物件及其值時，建議使用 const 型別的變數。

Cypress - 別名

Cypress 別名是一個重要的元件，具有多種用途。這些用途列出如下：

共享上下文

我們必須使用 .as() 來為我們要共享的內容設定別名。要為物件和基本型別設定別名，可以使用 Mocha 上下文物件。可以使用 this.* 訪問別名物件。

預設情況下，Mocha 為適用於測試的所有鉤子共享上下文，並且在測試執行後會重新整理別名屬性。

describe('element', () => {
   beforeEach(() => {
      cy.wrap('eleone').as('x')
   })
   context('subelement', () => {
      beforeEach(() => {
         cy.wrap('eletwo').as('y')
      })
         it('aliases properties', function () {
            expect(this.x).to.eq(' eleone ')
            expect(this.y).to.eq(' eleone ')
         })
      })
   })
})

我們可以透過共享上下文來處理夾具。我們還可以使用 cy.get()（這是一個非同步命令）來使用 @ 符號（而不是使用 this.*）訪問別名。這是一個同步命令。

beforeEach(() => {
   // alias fixtures
   cy.fixture('users.json').as('u')
})
it('scenario', function () {
   // '@' to handle aliases
   cy.get('@u').then((u) => {
      // access element argument
      const i = u[0]
      //verification
      cy.get('header').should('contain', u.name)
   })
})

元素

別名可以與文件物件模型 (DOM) 元素一起使用，並在以後重複使用。在下面的示例中，Cypress 預設情況下會對作為別名 cols 獲取的 td 集合進行引用。要使用相同的 cols，我們必須使用 cy.get() 命令。

// alias td in tr
cy.get('tr').find('td').as('cols')
cy.get('@cols').first().click()

由於我們在 cy.get() 中使用了 @，因此 Cypress 會搜尋當前別名 (cols) 並生成其引用。

路由

別名可用於路由。它確保應用程式已發出請求。然後，它等待來自伺服器的響應並訪問請求以進行驗證。

cy.intercept('POST', '/users', { id: 54 }).as('u')
cy.get('#btn').click()
cy.wait('@u').then(({ request }) =>{
//assertion
   expect(request.body).to.have.property('name', 'User')
})
cy.contains('User added')

請求

別名可用於請求。我們可以為請求設定別名，並在以後使用其屬性。這可以透過以下方式完成：

cy.request('https://jsonplaceholder.cypress.io/comments').as('c')
// other implementations if any
cy.get('@c').should((response) => {
   if (response.status === 404) {
      // assertion
         expect(response).to.have.property('duration')
      } else {
         // do something else
      }
   })
})

Cypress - 定位器

Cypress 僅支援使用層疊樣式表 (CSS) 選擇器來識別元素。但是，它也可以在 'Cypress-Xpath' 外掛的幫助下使用 xpath。

讓我們考慮一個 html 程式碼片段，並瞭解一些 css 表示式的規則。

CSS 表示式規則

層疊樣式表 (CSS) 表示式的規則如下：

• 使用屬性 ID 和標籤名的語法為 tagname#id - 這裡，css 表示式應為 -input#gsc-i-id1。

• 使用屬性類和標籤名的語法為 tagname.class - 這裡，css 表示式應為 - input.gsc-input。

• 使用任何屬性值和標籤名的語法為 tagname[attribute='value' - 這裡，css 表示式應為 - input[title='search']。

• 使用父到子遍歷的語法為 parent child - 這裡，css 表示式應為 -tr td。

Cypress 提供了“開啟選擇器遊樂場”的功能，我們可以使用它來自動定位和識別元素。此功能位於測試執行器視窗內，如下面的影像中突出顯示。

點選“開啟選擇器遊樂場”後，將出現一個箭頭。點選它並將其移動到我們要識別的元素上。css 表示式將填充到箭頭右側可用的 cy.get 欄位中。

同時，元素將突出顯示，如下面的影像所示：

Cypress - 斷言

Cypress 有多種型別的斷言，這些斷言來自 Mocha、Chai 等各種庫。斷言型別有顯式和隱式。

隱式斷言

如果斷言適用於鏈中從父命令獲取的物件，則稱為隱式斷言。常用的隱式斷言包括 .and/.should。

這些命令不能作為獨立命令使用。通常，當我們必須驗證特定物件的多個檢查時，才會使用它們。

讓我們用以下示例說明隱式斷言：

// test suite
describe('Tutorialspoint', function () {
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://tutorialspoint.tw/videotutorials/index.php")
		// assertion to validate count of sub-elements and class attribute value
		cy.get('.toc chapters').find('li').should('have.length',5)
		.and('have.class', 'dropdown')
   });
});

執行結果

輸出如下：

輸出日誌顯示了使用 should 和命令獲取的兩個斷言。

顯式斷言

如果斷言直接適用於物件，則稱為顯式斷言。常用的顯式斷言包括 assert/expect。

顯式斷言的命令如下：

// test suite
describe('Tutorialspoint', function () {
// it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://#")
		// identify element
      cy.get('h1#headingText').find('span').then(function(e){
         const t = e.text()
         // assertion expect
         expect(t).to.contains('Sign')
      })
   })
})

執行結果

輸出如下：

輸出日誌顯示了使用 expect 命令直接應用於物件的斷言。

Cypress 具有預設斷言，這些斷言在內部處理，不需要專門呼叫。

一些示例如下：

• cy.visit() - 預期頁面顯示內容，狀態碼為 200。

• cy.request() - 預期遠端伺服器可用併發送響應。

• cy.contains() - 預期具有其屬性的 Web 元素在 DOM 中可用。

• cy.get() - 預期 Web 元素在 DOM 中可用。

• .find() - 預期 Web 元素在 DOM 中可用。

• .type() - 預期 Web 元素變為可輸入狀態。

• .click() - 預期 Web 元素變為可點選狀態。

• .its() - 預期在現有主題上存在 Web 元素屬性。

其他 Cypress 斷言

其他 Cypress 斷言如下：

長度

它檢查從先前鏈式命令獲取的元素的數量。

例如，

cy.get('#txt-fld').should('have.length',5)

值

它檢查 Web 元素是否具有某個值。

例如，

cy.get('#txt-fld').should('have.length',5)

值

它檢查 Web 元素是否具有某個值。

例如，

cy.get(' #txt-fld').should('have.value', 'Cypress')

類

它檢查 Web 元素是否擁有某個類。

例如，

cy.get('#txt-fld'').should('have.class', 'txt')

包含

它檢查 Web 元素是否包含某個文字。

例如，

cy.get('#txt-fld'').should('contain', 'Cypress')

可見

它檢查 Web 元素是否可見。

例如，

cy.get('#txt-fld'').should('be.visible')

存在

它檢查 Web 元素是否在文件物件模型 (DOM) 中可用。

例如，

cy.get('#txt-fld'').should('not.exist');

CSS

它檢查 Web 元素是否具有某個 CSS 屬性。

例如，

cy.get('#txt-fld'').should('have.css', 'display', 'block');

Cypress - 文字驗證

text 方法可用於獲取 Web 元素的文字。還可以新增斷言來驗證文字內容。

使用 text() 實現

以下是關於驗證的 text() 實現命令：

// test suite
describe('Tutorialspoint', function () {
   // it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://#")
      // identify element
      cy.get('h1#headingText').find('span').then(function(e){
         //method text to obtain text content
         const t = e.text()
         expect(t).to.contains('Sign')
      })
   })
})

執行結果

輸出如下：

輸出日誌顯示了使用 text 方法獲取的文字“登入”。

使用文字斷言實現

我們還可以使用以下命令在 Web 元素文字上實現斷言：

// test suite
describe('Tutorialspoint', function () {
   // it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://#")
      // verify text with have.text
      cy.get('h1#headingText').find('span').should('have.text','Sign in')
   })
})

執行結果

輸出如下：

輸出日誌顯示了使用 should 斷言完成的文字驗證。

Cypress - 非同步行為

Cypress 衍生自 node.js，而 node.js 基於 JavaScript。Cypress 命令本質上是同步的，因為它們依賴於節點伺服器。非同步流意味著測試步驟的執行不依賴於其之前的步驟。

它們之間沒有依賴關係，每個步驟都作為獨立的個體執行。儘管測試步驟按順序排列，但單個測試步驟不會考慮前一步的結果，而只是執行自身。

示例

以下是 Cypress 中非同步行為的示例：

// test suite
describe('Tutorialspoint', function () {
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://#")
      // identify element
      cy.get('h1#headingText').find('span').should('have.text', 'Sign in')
      cy.get('h1#headingText').find('span').then(function(e){
         const t = e.text()
         // get in Console
         console.log(t)
      })
      // Console message
      console.log("Tutorialspoint-Cypress")
   })
})

執行結果

輸出如下：

Promise

右鍵點選 Test Runner 並點選 Inspect，我們可以在 Console 中驗證結果。這裡，Tutorialspoint-Cypress（之前的步驟）在Sign – in（後來新增的步驟）之前記錄在 Console 中。

Cypress 命令的設計方式使得每個步驟都按順序執行，並且不會同時觸發。但它們一個接一個地排列。因此，它使流程成為同步的。這是透過 Promise 實現的。

在上面的示例中，console.log 是一個純 JavaScript 語句。它沒有像 Cypress 命令那樣進行排列和等待的能力。Promise 允許我們以序列模式執行 Cypress 命令。

Promise 中的模式

Promise 有三種模式來對命令執行的狀態進行分類。它們如下：

• 已解決（Resolved） - 如果測試步驟成功執行，則會產生此結果。

• 掛起（Pending） - 如果正在等待測試步驟執行結果，則會產生此結果。

• 拒絕（Rejected） - 如果測試步驟執行失敗，則會產生此結果。

只有在先前的步驟成功執行或收到已解決的 Promise 響應後，Cypress 命令才會執行。然後，該方法用於在 Cypress 中實現 Promise。

示例

以下是 Cypress 中 Promise 的示例：

describe('Tutorialspoint Test', function () {
   it('Promise', function (){
      return cy.visit('https://#')
      .then(() => {
         return cy.get('h1#heading');
      })
   })
})

Cypress 對 Promise 的實現是封裝的，不可見。因此，它有助於編寫更簡潔的程式碼。此外，在自動化測試時，我們不必考慮 Promise 的狀態。

無 Promise 的實現

以下命令解釋瞭如何在 Cypress 中實現無 Promise 的方式：

describe('Tutorialspoint Test', function () {
   it('Without Promise', function (){
      cy.visit('https://#')
      cy.get('h1#heading')
   })
})

Cypress - 使用 XHR

XHR 是 XML HTTP 請求。它是一個作為物件可用的應用程式程式設計介面 (API)，其方法在 Web 瀏覽器和伺服器之間傳送資料。XHR 中的物件可以以響應的形式從伺服器請求資料。

Cypress 不僅可以用於前端自動化，還可以透過直接訪問 XHR 物件來控制網路流量。然後，它對這些物件應用斷言。它可以模擬或存根響應。可以在瀏覽器的 Network 選項卡中檢視 XHR 詳細資訊。

XHR 響應頭如下：

響應如下：

要發出 XHR 請求，可以使用 cy.request() 命令。cy.intercept() 方法用於將響應重定向到匹配的請求。

XHR 請求的實現

下面給出的是解釋在 Cypress 中實現 XHR 請求的命令：

cy.request('https://jsonplaceholder.cypress.io/comments').as('c')
//aliasing request
cy.get('@c').should((response) => {
   expect(response.body).to.have.length(100)
   expect(response).to.have.property('headers')
})

Cypress - jQuery

Cypress 可以處理 jQuery 物件及其方法以及其內部命令。當 Cypress 使用 get 方法識別 Web 元素時，jQuery 使用 $() 方法實現相同目的。

在 Cypress 中，識別 Web 元素的命令如下：

cy.get('h1#heading')

而在 jQuery 中，識別 Web 元素的命令如下：

$('h1#heading')

Cypress 基於非同步性質的 JavaScript。但是，Cypress 命令透過在內部解析 Promise 來同步執行，這對於終端使用者是隱藏的。

但是，當 Cypress 處理 jQuery 物件及其方法時，必須專門實現 Promise 邏輯，以使流程同步（藉助 then 方法）。

例如，當我們想要提取 Web 元素的文字內容（使用 jQuery 方法 - text）時，我們需要使用 then 方法實現 Promise。

jQuery 中的 Promise 實現

以下是 Cypress 中 jQuery 的 Promise 實現的命令：

// test suite
describe('Tutorialspoint', function () {
// it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://#")
      // Promise implementation with then()
      cy.get('h1#headingText').find('span').then(function(e){
         //method text to obtain text content
         const t = e.text()
         expect(t).to.contains('Sign')
      })
   })
})

在 jQuery 中，如果提供的定位符與 DOM 中的任何 Web 元素都不匹配，則會返回一個空集合。

為了避免異常，建議驗證 $() 生成的 jQuery 集合的長度。相應的命令如下：

const e = $('#txt')
if (e.length > 0){
   //proceed
}

但是，如果 DOM 中沒有匹配的 Web 元素，則 Cypress 會自動進入重試模式，直到元素可用或超時，如下所示：

cy.get('#txt')
   .then((e) => { //proceed working on element })

該方法生成一個 Promise。此外，只有當 Web 元素與定位符匹配時，Promise 才會處於已解決狀態。如果 Promise 處於拒絕狀態，則 then 塊中的邏輯將永遠不會執行。

我們可以使用以下表達式訪問 Cypress 中的 jQuery 方法：

Cypress.$( '#txt'), where #txt is the locator.

jQuery 方法的實現

下面是使用 jQuery 在 Cypress 中識別和執行測試的命令：

// test suite
describe('Tutorialspoint', function () {
// it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://#")
      // access web element with Cypress.$
      cy.request('/').get('h1#headingText').then(function(e){
         Cypress.$(e).find('span')
         const t = e.text()
         cy.log(t)
      })
   })
})

在執行上述測試時，如果我們開啟 Console（按 F12），並使用表示式 Cypress.$('h1#headingText').text() 查詢所需的 Web 元素，我們可以驗證我們的測試，如下所示：

日誌訊息 - Sign –in 來自 Cypress 中的 cy.log 命令。

Cypress - 複選框

check 和 uncheck 命令用於處理複選框。在 html 程式碼中，複選框具有 input 標籤，其 type 屬性的值為 checkbox。

Cypress 命令

與複選框相關的 Cypress 命令如下：

• 用於點選所有複選框的命令如下：

cy.get('input[type="checkbox"]').check()

• 用於點選 id 為 check 的複選框的命令如下：

cy.get('#chk').check()

• 用於點選值為 Cypress 的複選框的命令如下：

cy.get('input[type="checkbox"]').check('Cypress')

• 用於點選值為 Java 和 Python 的複選框的命令如下：

cy.get('input[type="checkbox"]').check(['Java','Python'])

• 用於點選值為 Java 並帶選項的複選框的命令如下：

cy.get('.chk').check('Java', options)

• 用於點選值為 Java 和 Python 並帶選項的複選框的命令如下

cy.get('input[type="checkbox"]').check(['Java','Python'], options)

• 用於點選類名為 check 並帶選項的複選框的命令如下：

cy.get('.chk').check({force : true})

• 用於取消選中所有複選框的命令如下：

cy.get('input[type="checkbox"]').uncheck()

• 用於取消選中 id 為 check 的複選框的命令如下：

cy.get('#chk').uncheck()

• 用於取消選中值為 Cypress 的複選框的命令如下：

cy.get('input[type="checkbox"]').uncheck('Cypress')

• 用於取消選中值為 Java 和 Python 的複選框的命令如下：

cy.get('input[type="checkbox"]').uncheck(['Java','Python'])

• 用於取消選中值為 Java 並帶選項的複選框的命令如下：

cy.get('.chk').uncheck('Java', options)

• 用於取消選中值為 Java 和 Python 的複選框並帶選項的命令如下：

cy.get('input[type="checkbox"]').uncheck(['Java','Python'], options)

• 用於取消選中類名為 check 並帶選項的複選框的命令如下：

cy.get('.chk').uncheck({force : true)

Cypress 中的選項

Cypress 中可用的選項如下：

• log – 預設值 – true - 用於開啟/關閉控制檯日誌。

• timeout – 預設值 – defaultCommandTimeout(4000ms) - 用於提供在丟擲錯誤之前的最大等待時間。

• force – 預設值 – false - 用於強制執行操作。

• scrollBehaviour – 預設值 – scrollBehaviour(top) - 用於命令執行前視口滾動到的元素位置。

• waitForAnimations – 預設值 – waitForAnimations(true) - 用於等待元素完成動畫後再執行命令。

• animationDistanceThreshold - 預設值 – animationDistanceThreshold (5) - 用於元素應超過的畫素距離，以符合動畫條件。

check/uncheck 命令都需要與生成 DOM 元素的命令連結，並且可以對這些命令應用斷言。

Cypress 命令的實現

Cypress 中命令的實現解釋如下：

// test suite
describe('Tutorialspoint', function () {
   // it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://#/signup")
      //checkbox with assertion
      cy.get('input[type="checkbox"]').check().should('be.checked')
      //identify checkbox with class with assertion
      cy.get('.VfPpkd-muHVFf-bMcfAe').uncheck().should('not.be.checked')
   })
})

執行結果

輸出如下：

以上結果顯示，Show password 左側的複選框首先使用 check 命令選中（使用斷言-should 驗證）。

然後，它使用 uncheck 命令取消選中（也使用斷言-should 驗證）。

Cypress - 標籤頁

Cypress 沒有專門用於處理選項卡的命令。它在 jQuery 中有一個變通方法來處理選項卡。在 html 程式碼中，由於 target 屬性，連結或按鈕會開啟一個新選項卡。

如果 target 屬性的值為空白，它將開啟一個新選項卡。Cypress 使用 jQuery 方法 removeAttr，該方法由 invoke 命令呼叫。removeAttr 刪除作為 invoke 方法引數之一傳遞的屬性。

刪除 target=blank 後，連結/按鈕將在父視窗中開啟。稍後在對其執行操作後，我們可以使用 go 命令返回到父 URL。

相應的 Html 程式碼如下：

實現

下面給出的是 Cypress 中使用與選項卡相關的命令的實現：

describe('Tutorialspoint', function () {
   // test case
   it('Scenario 1', function (){
      // url launch
      cy.visit("https://the-internet.herokuapp.com/windows")
      // delete target attribute with invoke for link
      cy.get('.example > a')
      .invoke('removeAttr', 'target').click()
      // verify tab url
      cy.url()
      .should('include', 'https://the-internet.herokuapp.com/windows/new')
      // shift to parent window
     cy.go('back');
   });
});

執行結果

輸出如下：

輸出日誌顯示 target 屬性的刪除以及在新選項卡中父視窗的啟動。

Cypress - 下拉列表

select 命令用於處理靜態下拉列表。在 html 程式碼中，下拉列表具有 select 標籤，下拉列表元素由 option 標籤名錶示。

下拉列表 Cypress 命令

與下拉列表相關的 Cypress 命令如下：

• 用於選擇Cypress 選項的命令如下：

cy.get('select').select('Cypress')

• 選擇 Tutorialspoint 和 JavaScript 選項的命令如下：

cy.get('select').select(['Tutorialspoint', 'JavaScript'])

• 可以與選項一起選擇下拉列表選項值的命令（修改預設特性）如下：

cy.get('select').select('option1', options )

• 用於選擇多個值並帶選項的命令如下：

cy.get('select').select(['option1', 'option2'], options)

Cypress 中下拉列表的選項

Cypress 中可用於下拉列表的選項如下：

• log – 預設值 – true - 用於開啟/關閉控制檯日誌。

• timeout – 預設值 – defaultCommandTimeout(4000) - 用於在丟擲錯誤之前提供選擇的最大等待時間。

• force – 預設值 – false - 用於強制執行操作。

可以在 Cypress 中對 select 命令應用斷言。

讓我們嘗試從 html 程式碼中值為 99 的下拉列表中選擇India選項。

實現

下面解釋了在 Cypress 中實現下拉列表命令以選擇 India 選項：

// test suite
describe('Tutorialspoint', function () {
   // it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://register.rediff.com/register/register.php")
      //select option India with value then verify with assertion
      cy.get('select[id="country"]').select('99').should('have.value', '99')
   })
})

執行結果

輸出如下：

輸出顯示 Country 下拉列表選擇了 India 選項（在 html 程式碼中，此選項的標識值為 99）。

Cypress - 警報

Cypress 可以預設處理警報。彈出視窗可以是警報或確認彈出視窗。Cypress 的設計使得它始終會點選彈出視窗上的確定按鈕。此外，Cypress 具有觸發瀏覽器事件的能力。

警報由window:alert 事件觸發。預設情況下，Cypress 會處理此事件，並在執行過程中自動點選警報上的“確定”按鈕，而不會顯示該按鈕。

但是，執行日誌會顯示警報的存在。

警報實現

下面給出了 Cypress 中警報的實現：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch url
      cy.visit("https://register.rediff.com/register/register.php");
      // click submit
      cy.get('input[type="submit"]').click();
   });
});

執行結果

輸出如下：

警報訊息將顯示在 Cypress 執行日誌中。

Cypress 能夠利用 on 方法觸發 window:alert 事件。然後，我們可以驗證警報文字。

但是，此事件將在後端發生，在執行過程中不可見。

警報文字驗證實現

下面給出了 Cypress 中警報文字驗證的實現：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch url
      cy.visit("https://register.rediff.com/register/register.php");
      // click submit
      cy.get('input[type="submit"]').click();
      // fire event with method on
      cy.on('window:alert',(t)=>{
         //assertions
         expect(t).to.contains('Your full name');
      })
   });
});

執行結果

輸出如下：

輸出日誌顯示了成功驗證警報文字，該文字由 Cypress 觸發警報事件產生。

對於確認彈出視窗，會觸發瀏覽器事件 window:confirm。與警報彈出視窗一樣，Cypress 可以使用 on 方法觸發此事件，並預設點選“確定”按鈕。

示例

讓我們看下面的例子。在這裡，點選“點選以獲取 JS 確認”按鈕，會顯示一個確認彈出視窗。

顯示以下帶有確定和取消按鈕的確認彈出視窗。

點選“確定”按鈕，將顯示以下內容：

You clicked: Ok

將顯示如下所示的影像：

點選取消按鈕，在“結果”下方顯示以下內容：

You clicked: Cancel

將顯示如下所示的影像：

確認驗證實現

下面給出了 Cypress 中確認驗證的實現：

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      //URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //fire confirm browser event and accept
      cy.get(':nth-child(2) > button').click()
      cy.on("window:confirm", (t) => {
         //verify text on pop-up
         expect(t).to.equal("I am a JS Confirm");
      });
   });
});

執行結果

輸出如下：

確認驗證實現

下面給出了 Cypress 中確認驗證的實現：

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      //URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //fire confirm browser event and accept
      cy.get(':nth-child(2) > button').click()
      cy.on("window:confirm", (t) => {
         //verify text on pop-up
         expect(t).to.equal("I am a JS Confirm");
      });
   });
});

執行結果

輸出如下：

輸出日誌顯示了成功驗證確認文字，該文字由 Cypress 觸發 confirm 事件產生。

取消點選實現

Cypress 中確認彈出視窗上取消點選的實現如下：

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      // URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //fire confirm browser event
      cy.on("window:confirm", (s) => {
         return false;
      });
      // click on Click for JS Confirm button
      cy.get(':nth-child(2) > button').click()
      // verify application message on Cancel button click
      cy.get('#result').should('have.text', 'You clicked: Cancel')
   });
});

執行結果

輸出如下：

輸出日誌顯示成功驗證文字您點選：取消，該文字是在確認彈出視窗上點選“取消”按鈕時產生的。

Cypress - 子視窗

Cypress 沒有專門的命令來處理子視窗。它有一個 jQuery 的變通方法來處理子視窗。在 html 程式碼中，由於 target 屬性，連結或按鈕會開啟一個子視窗。

如果 target 屬性的值為空白，則它會開啟一個子視窗。Cypress 使用 jQuery 方法 removeAttr，該方法由 Cypress 中的 invoke 命令呼叫。removeAttr 刪除作為 invoke 方法引數之一傳遞的屬性。

刪除 target=blank 後，連結/按鈕將在父視窗中開啟，並在其上執行操作後，我們可以使用 go 命令返回到父 URL。

在 Cypress 中開啟子視窗的 Html 程式碼如下：

實現

下面給出了 Cypress 中子視窗命令的實現：

describe('Tutorialspoint', function () {
   // test case
   it('Scenario 1', function (){
      // url launch
      cy.visit("https://the-internet.herokuapp.com/windows")
      // delete target attribute with invoke for link
      cy.get('.example > a')
      .invoke('removeAttr', 'target').click()
      // verify child window url
      cy.url()
      .should('include', 'https://the-internet.herokuapp.com/windows/new')
      // shift to parent window
      cy.go('back');
   });
});

執行結果

輸出如下：

輸出日誌顯示了 target 屬性的刪除以及在父視窗中啟動子視窗。

Cypress - 隱藏元素

Cypress 可以處理隱藏元素。有時，子菜單隻有在將滑鼠懸停在主選單上時才會顯示。這些子選單最初使用層疊樣式表 (CSS) 屬性 display:none 隱藏。

為了處理隱藏元素，Cypress 利用 jQuery 方法 show。它必須藉助 Cypress 命令 (invoke['show']) 呼叫。

例如，將滑鼠懸停在“登入”選單上時，會顯示“登入”按鈕，如下所示：

將滑鼠移出“登入”選單時，“登入”按鈕將隱藏，如下所示：

實現

使用 jQuery show 方法處理隱藏元素的實現如下：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      // show hidden element with invoke
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click hidden element
      cy.contains('Sign').click();
   });
});

執行結果

輸出如下：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      // show hidden element with invoke
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click hidden element
      cy.contains('Sign').click();
   });
});

執行結果

輸出如下：

執行日誌顯示隱藏元素，由步驟右側的圖標表示。

Cypress 還有另一種處理隱藏元素的技術。

例如，要點選隱藏元素，我們可以使用 Cypress 命令 click 並將選項 {force : true} 作為引數傳遞給它 - click({ force: true })。

這將修改隱藏元素的隱藏特性，我們可以點選它。

使用 click 的實現

下面給出了 Cypress 中帶有選項的 click 實現：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      //click hidden element
      cy.contains('Sign').click({force:true});
   });
});

執行結果

輸出如下：

執行日誌顯示隱藏元素（登入）被點選，我們被導航到下一頁。

Cypress - 框架

早期版本的 Cypress 無法訪問框架內的元素。但是，最新版本為框架提供瞭解決方案。

要使用框架，首先，我們必須使用以下命令安裝 Cypress 外掛：

npm install –D cypress-iframe

將顯示以下螢幕：

對於 Cypress 中的框架實現，我們必須在程式碼中新增語句import 'cypressiframe'。名為 frame/iframe 的標籤用於在 html 程式碼中表示框架。

您的電腦上將出現以下螢幕：

Cypress 命令 frameload 用於將焦點從主頁面移動到框架。焦點移動後，我們可以與框架內的元素互動。

這是使用 cy.iframe 方法完成的。

實現

下面給出了 Cypress 中框架命令的實現，使用 cy.iframe 方法：

import 'cypress-iframe'
describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case6', function (){
      // launch URL
      cy.visit("https://jqueryui.com/draggable/");
      // frame loading
      cy.frameLoaded('.demo-frame');
      //shifting focus
      cy.iframe().find("#draggable").then(function(t){
         const frmtxt = t.text()
         //assertion to verify text
         expect(frmtxt).to.contains('Drag me around');
         cy.log(frmtxt);
      })
   });
});

執行結果

輸出如下：

執行日誌顯示了訪問框架內的元素以及在其中獲取的文字。

Cypress 無法在一個頁面中處理多個框架。

此外，對於框架 Intellisense 到 Cypress，我們可以將/// <reference types = "Cypressiframe"/> 新增到程式碼中。

Cypress - 網頁表格

Cypress 能夠處理 Web 表格。表格基本上分為兩種型別：動態和靜態。與動態表格不同，靜態表格具有固定數量的列和行。

在 html 程式碼中，表格由 table 標籤表示，行由 tr 表示，列由 td 表示。

• 要訪問行，Cypress 命令如下：

 cy.get("tr")

• 要訪問列，Cypress 命令如下：

 cy.get("td") or cy.get("tr td")

• 要訪問特定列，CSS 表示式應如下所示：

td:nth-child(column number)

• 要遍歷表格的行/列，使用 Cypress 命令 each。

在 Cypress 中，我們有命令next用於切換到緊隨其後的同級元素。此命令必須與 get 命令連結。prev 命令用於切換到緊隨其前的同級元素。

表格的 Html 結構如下所示：

示例

讓我們以表格為例，並驗證第二列 TYPE（開源）中對應於第一列 AUTOMATION TOOL 中的值 Selenium 的內容。

您的電腦上將出現以下螢幕：

實現

下面給出了 Cypress 與表格相關的命令的實現：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      //URL launch
      cy.visit("https://sqengineer.com/practice-sites/practice-tables-selenium/")
      // identify first column
      cy.get('#table1> tbody > tr > td:nth-child(1)').each(($elm, index, $list)=> {
         // text captured from column1
         const t = $elm.text();
         // matching criteria
         if (t.includes('Selenium')){
            // next sibling captured
            cy.get('#table1 > tbody > tr > td:nth-child(1)')
            .eq(index).next().then(function(d) {
               // text of following sibling
               const r = d.text()
               //assertion
               expect(r).to.contains('Commercial');
            })
         }
      })
   });
});

執行結果

輸出如下：

執行日誌顯示 TYPE 列中的值為 Open Source。這是因為它緊隨 Selenium（第一列）元素之後，出現在同一行中。

Cypress - 滑鼠操作

Cypress 可以處理隱藏元素。有時，子菜單隻有在將滑鼠懸停在主選單上時才會顯示。這些子選單最初使用 CSS 屬性 display:none 隱藏。

為了處理隱藏元素，Cypress 利用 jQuery 方法 show。它必須藉助 Cypress 命令 (invoke['show']) 呼叫。

例如，將滑鼠懸停在“滑鼠懸停”按鈕上時，會顯示“頂部”和“重新載入”按鈕，如下所示：

將滑鼠移出“滑鼠懸停”按鈕時，“頂部”和“重新載入”按鈕將隱藏，如下所示：

使用 jQuery show 方法的實現

下面給出了 Cypress 中使用 jQuery show 方法的實現：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://learn.letskodeit.com/p/practice");
      // show hidden element with invoke
      cy.get('div.mouse-hover-content').invoke('show');
      //click hidden element
      cy.contains('Top').click();
   });
});

執行結果

輸出如下：

執行日誌顯示隱藏元素 - “頂部”按鈕，由步驟右側的圖標表示。

Cypress - Cookie

Cypress 使用Cookies.preserveOnce()和Cookies.defaults()方法處理 Cookie。如果 Cookie 發生任何更改，Cookies.debug()方法會將日誌輸出到控制檯。

預設情況下，Cypress 會在每次測試執行之前刪除所有 Cookie。我們可以利用Cypress.Cookies.preserveOnce()來保留其名稱的 Cookie，以便用於其他測試。

語法

Cypress 中與 Cookie 相關的命令語法如下：

如果 Cookie 值被配置或清除，這將生成控制檯日誌。

Cypress.Cookies.debug(enable, option)

這裡，

• enable - 如果應啟用 Cookie 除錯。

• option - 配置 Cookie 的預設值，例如，保留 Cookie。

Cypress.Cookies.debug(true) // logs will generate if cookies are modified
cy.clearCookie('cookie1')
cy.setCookie('cookie2', 'val')

降低日誌級別。

Cypress.Cookies.debug(true, { verbose: false })
Cypress.Cookies.debug(false) // logs will not generate if cookies are modified

以下給出的語法將保留 Cookie，並且在執行另一個測試之前不會清除它們。

Cypress.Cookies.preserveOnce(cookie names...)

此語法用於修改全域性配置並維護一組為測試保留的 Cookie。任何修改都將適用於該特定測試。（儲存在 cypress/support/index.js 檔案中，並在測試執行之前載入）。

Cypress.Cookies.defaults(option)
Cypress.Cookies.defaults({
   preserve: 'cookie1'
})

這裡，名為 cookie1 的 Cookie 在執行測試之前不會被清除。

Cookie 方法

Cypress 中的一些 Cookie 方法如下：

• cy.clearCookies() - 它刪除當前域和子域中的所有 Cookie。

• cy.clearCookie(name) - 它按名稱從瀏覽器中刪除 Cookie。

• cy.getCookie(name) - 用於按名稱從瀏覽器中獲取 Cookie。

• cy.getCookies() - 用於獲取所有 Cookie。

• cy.setCookie(name) - 它可以配置 Cookie。

實現

下面給出了 Cypress 中 Cookie 方法的實現：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch the application
      cy.visit("https://#");
      // enable cookie logging
      Cypress.Cookies.debug(true)
      //set cookie
      cy.setCookie('cookie1', 'value1')
      //get cookie by name and verify value
      cy.getCookie('cookie1').should('have.property', 'value', 'value1')
      //clear cookie by name
      cy.clearCookie('cookie')
      //get all cookies
      cy.getCookies()
      //clear all cookies
      cy.clearCookies()
      //verify no cookies
      cy.getCookies().should('be.empty')
   });
});

執行結果

輸出如下：

Cypress - Get 和 Post

Get 和 Post 方法是應用程式程式設計介面 (API) 測試的一部分，Cypress 可以執行此測試。

Get 方法

要執行 Get 操作，我們將使用cy.request()發出 HTTP 請求，並將 Get 方法和 URL 作為引數傳遞給該方法。

狀態程式碼反映請求是否已被正確接受和處理。程式碼 200（表示成功）和 201（表示已建立）。

Get 實現

下面解釋了 Cypress 中 Get 方法的實現：

describe("Get Method", function(){
   it("Scenario 2", function(){
      cy.request("GET", "https://jsonplaceholder.cypress.io/comments", {
      }).then((r) => {
         expect(r.status).to.eq(200)
         expect(r).to.have.property('headers')
         expect(r).to.have.property('duration')
      });
   })
})

執行結果

輸出如下：

Post 方法

使用 Post 方法時，我們實際上是在傳送資訊。如果我們有一組實體，我們可以使用 Post 在末尾追加新的實體。

要執行 Post 操作，我們將使用cy.request()發出 HTTP 請求，並將 Post 方法和 URL 作為引數傳遞給該方法。

Post 實現

下面給出了 Cypress 中 Post 方法的實現：

describe("Post Method", function(){
   it("Scenario 3", function(){
      cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
      .its('body.0') // yields the first element of the returned list
      // make a new post on behalf of the user
      cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
         title: 'Cypress',
         body: 'Automation Tool',
      })
   })
});

執行結果

輸出如下：

Cypress - 檔案上傳

要在 Cypress 中執行檔案上傳任務，我們必須首先使用以下命令安裝外掛：

   npm install –dev cypress-file-upload

您的電腦上將出現以下螢幕：

安裝完成後，我們必須在 command.js 檔案中新增語句 import 'cypress-file-upload'。此檔案位於 Cypress 專案的 support 資料夾內。

此外，我們還將在 fixtures 資料夾中新增要上傳的檔案（Picture.png 檔案）。將顯示以下螢幕：

要上傳檔案，我們必須使用 Cypress 命令 attachFile 並將要上傳的檔案路徑作為引數傳遞給它。

實現

Cypress 中上傳檔案的命令實現如下：

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case6', function (){
      //file to be uploaded path in project folder
      const p = 'Picture.png'
      // launch URL
      cy.visit("https://the-internet.herokuapp.com/upload")
      //upload file with attachFile
      cy.get('#file-upload').attachFile(p)
      //click on upload
      cy.get('#file-submit').click()
      //verify uploaded file
      cy.get('#uploaded-files').contains('Picture')
   });
});

執行結果

輸出如下：

執行日誌顯示檔案 Picture.png 已上傳，並且檔名已反映在頁面上。

Cypress - 資料驅動測試

Cypress 資料驅動測試是藉助夾具實現的。Cypress 夾具用於維護和儲存自動化測試資料。

夾具儲存在 Cypress 專案的 fixtures 資料夾（example.json 檔案）中。基本上，它幫助我們從外部檔案獲取資料輸入。

Cypress 夾具資料夾可以包含 JavaScript 物件表示法 (JSON) 或其他格式的檔案，資料以“鍵：值”對的形式維護。

多個測試可以使用所有測試資料。所有夾具資料都必須在 before hook 塊中宣告。

語法

Cypress 資料驅動測試的語法如下：

cy.fixture(path of test data)
cy.fixture(path of test data, encoding type)
cy.fixture(path of test data, opts)
cy.fixture(path of test data, encoding type, options)

這裡，

• 測試資料路徑是 fixtures 資料夾中測試資料檔案的路徑。

• 編碼型別 - 編碼型別（utf-8、asci 等）用於讀取檔案。

• Opts - 修改響應的超時時間。預設值為 30000ms。在 cy.fixture() 丟擲異常之前等待的時間。

在 example.json 中的實現

下面是使用 example.json 在 Cypress 中進行資料驅動測試的實現 -

{
   "email": "abctest@gmail.com",
   "password": "Test@123"
}

實際測試的實現

在 Cypress 中實際資料驅動測試的實現如下 -

describe('Tutorialspoint Test', function () {
   //part of before hook
   before(function(){
      //access fixture data
      cy.fixture('example').then(function(signInData){
         this.signInData = signInData
      })
   })
   // test case
   it('Test Case1', function (){
      // launch URL
      cy.visit("https://www.linkedin.com/")
      //data driven from fixture
      cy.get('#session_key ')
      .type(this.signInData.email)
      cy.get('# session_password').type(this.signInData.password)
   });
});

執行結果

輸出結果如下

輸出日誌顯示 abctest@gmail.com 和 Test@123 分別被傳遞給電子郵件和密碼欄位。這些資料是從 fixture 傳遞到測試中的。

Cypress - 提示彈出視窗

Cypress 可以處理提示彈出視窗，使用者可以在其中輸入值。提示視窗包含一個文字欄位，用於接收輸入。要處理提示彈出視窗，可以使用 cy.window() 方法。

它獲取提示物件（遠端視窗）的值。在確認/警報彈出視窗中，我們必須觸發瀏覽器事件。但對於提示彈出視窗，我們必須使用 cy.stub() 方法。

示例

讓我們看看下面的例子，點選“點選獲取 JS 提示”按鈕，將顯示一個提示彈出視窗，如下所示 -

將顯示以下帶有使用者輸入欄位的提示。在提示彈出視窗中輸入 Tutorialspoint，如下所示。

您輸入 - Tutorialspoint 顯示在“結果”下。

這可以在下面顯示的螢幕中看到 -

實現

下面是在 Cypress 中顯示提示彈出視窗的命令實現 -

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      //URL launch
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //handling prompt alert
      cy.window().then(function(p){
         //stubbing prompt window
         cy.stub(p, "prompt").returns("Tutorialspoint");
         // click on Click for JS Prompt button
         cy.get(':nth-child(3) > button').click()
         // verify application message on clicking on OK
         cy.get('#result').contains('You entered: Tutorialspoint')
      });
   });
});   

執行結果

輸出如下：

輸出日誌顯示文字驗證成功。

您輸入 - Tutorialspoint，在點選提示彈出視窗上的“確定”按鈕時生成。此外，應用於提示視窗的存根在輸出日誌中可見。

Cypress - 儀表盤

必須設定 Cypress Dashboard 服務，以在系統中執行的 Cypress 測試與託管在雲上的儀表板之間建立連結。

特性

Cypress Dashboard 的功能如下所述 -

• 它提供有關已透過、失敗和跳過的測試用例總數的資料。

• 失敗測試的堆疊跟蹤和螢幕截圖可用。

• 測試執行的影片可用。

• 可以管理測試資料、框架及其訪問許可權。

• 提供了組織中的使用趨勢。

設定 Cypress Dashboard

要設定此過程，首先，我們應該轉到 Cypress Test Runner 視窗中的“執行”選項卡。然後，點選“連線到儀表板”。將出現以下螢幕 -

我們將獲得各種登入儀表板的選項，如下所示 -

成功登入後，我們將收到成功訊息。點選“繼續”。

輸入專案名稱、所有者和可以檢視專案的使用者。

然後，點選“設定專案”。

然後，Cypress 將給出以下建議 -

• 專案 ID

• 唯一的專案金鑰（以在終端中執行的命令形式）

從 Cypress 建議中獲得的 projectId 應與專案資料夾內的 cypress.json 檔案中提供的專案 ID 匹配。

接下來，我們必須執行 Cypress 建議的以下命令 -

node_modules/cypress/bin/cypress run --record --key <project key>

將出現如下所示的螢幕 -

執行完成後，我們必須開啟 Test Runner 的“執行”選項卡。它包含有關平臺、瀏覽器和測試持續時間的資訊。

測試記錄將可見。點選記錄。

記錄將在瀏覽器中開啟，並顯示測試結果概述（已透過、失敗、掛起、跳過的計數），如下所示。

在“規範”選項卡中，我們應該有每個測試及其結果的詳細資訊。

此外，還有輸出、失敗測試螢幕截圖、影片等功能。

Cypress - 截圖和影片

Cypress 可以處理螢幕截圖和影片。首先，讓我們瞭解 Cypress 如何幫助捕獲螢幕截圖。

螢幕截圖

我們可以使用 Cypress 中的截圖命令捕獲整個頁面和特定元素的截圖。

此外，Cypress 具有內建功能，可以捕獲失敗測試的螢幕截圖。要捕獲特定場景的螢幕截圖，我們使用命令 screenshot。

螢幕截圖實現

在 Cypress 中截圖命令的實現如下 -

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      //URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //complete page screenshot with filename - CompletePage
      cy.screenshot('CompletePage')
      //screenshot of particular element
      cy.get(':nth-child(2) > button').screenshot()
   });
});

執行結果

輸出如下：

執行日誌顯示已捕獲完整的全頁面螢幕截圖（檔名 為 CompletePage.png），以及特定元素（“點選獲取 JS 確認”）的螢幕截圖。

這些螢幕截圖已捕獲到專案內的 screenshots 資料夾（在 plugins 資料夾中）。捕獲螢幕截圖的位置可以透過更改全域性配置進行修改。

為全頁面影像建立了 CompletePage.png 檔案。

已捕獲“點選獲取 JS 確認”按鈕的螢幕截圖。

在“Test Runner 設定”選項卡中，引數 screenshotOnRunFailure 預設設定為 true 值。因此，始終為失敗測試捕獲螢幕截圖。

此外，screenshotsFolder 引數具有值 cypress/screenshots。因此，螢幕截圖將捕獲到 screenshots 資料夾內。

要停用捕獲失敗螢幕截圖的功能，我們必須在 cypress.json 檔案中新增以下值 -

Cypress.Screenshot.defaults({
   screenshotOnRunFailure: false
})

影片

預設情況下，Cypress 的影片捕獲功能對測試開啟。它們儲存在專案內的 videos 資料夾中。

一旦使用以下命令執行 Cypress 測試 -

node_modules/.bin/cypress run

我們將獲得控制檯訊息以及影片的位置、壓縮詳細資訊等 -

我們在專案中的相同位置獲得相應的影片。

要停用影片捕獲功能，我們必須在 cypress.json 檔案中新增以下值 -

{
   "video": false
}

Cypress - 除錯

Cypress 具有非常好的除錯功能，我們可以進行時間旅行，檢視測試執行期間實際發生的情況。這可以透過將滑鼠懸停在 Test Runner 日誌上來完成。

當我們在 Test Runner 視窗中逐步瀏覽時，元素將突出顯示。我們還可以使用 Cypress 命令 pause。這將暫停執行，在此期間我們可以除錯之前的步驟。之後，我們可以再次恢復執行。

實現

在 Cypress 中除錯命令的實現如下 -

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch the application
      cy.visit("https://#");
      // enable cookie logging
      Cypress.Cookies.debug(true)
      cy.getCookies
      //pause execution
      cy.pause()
      cy.setCookie('cookie1', 'value1' )
   });
});

執行結果

輸出如下：

輸出日誌顯示執行已暫停（由“暫停”按鈕表示）。然後，在除錯之前的步驟後，我們可以透過點選“恢復”按鈕（出現在“暫停”按鈕旁邊）再次恢復它。

輸出日誌現在包含恢復暫停後執行的所有步驟。

如果我們在瀏覽器上開啟開發者控制檯（按 F12），並從 Test Runner 中選擇一個步驟，控制檯將顯示使用的命令和產生的值。

例如，對於 setCookie 步驟，控制檯顯示命令 - setCookie，並且 Yielded 顯示 cookie 名稱 - cookie1 和值 - value1。

Cypress - 自定義命令

Cypress 自定義命令由使用者描述，而不是 Cypress 的預設命令。這些自定義命令用於建立在自動化流程中重複的測試步驟。

我們可以新增和覆蓋已存在的命令。它們應該放在 Cypress 專案中 support 資料夾內的 commands.js 檔案中。

語法

在 Cypress 中自定義命令的語法如下 -

Cypress.Commands.add(function-name, func)

Cypress.Commands.add(function-name, opts, func)

Cypress.Commands.overwrite(function-name, func)

這裡，

• function-name 是要新增/覆蓋的命令。

• func 是傳遞給命令的引數的函式。

• opts 用於傳遞選項以描述自定義命令的隱式特性。它還用於確定如何處理先前的產生的主題（僅適用於 Cypress.Commands.add()）以及選項的預設值是 false。選項 prevSubject 接受 false 以忽略先前的主題，接受 true 以接受先前的主題，並接受 optional 以啟動鏈或使用預先存在的鏈。選項接受字串、陣列或布林值。

自定義命令的實現

下面是在 commands.js 中自定義命令的實現

Cypress.Commands.add("userInput", (searchTxt) => {
   //to input search text in Google and perform search
   cy.get("input[type='text']").type(searchTxt);
   cy.contains("Google Search").click();
});

實際測試的實現

下面是在 Cypress 中使用自定義命令的實際測試的實現 -

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case 6', function (){
      // launch the application
      cy.visit("https://www.google.com/");
      //custom parent command
      cy.userInput('Java')
   });
});

執行結果

輸出如下：

輸出日誌顯示自定義命令 – userInput（具有 get、type 和 click 命令）正在執行。

建議自定義命令不要太長。它應該簡短，因為在自定義命令中新增太多操作會導致執行緩慢。

Cypress - Fixture

Cypress fixture 用於維護和儲存自動化測試資料。fixture 儲存在 Cypress 專案中的 fixtures 資料夾（example.json 檔案）內。基本上，它幫助我們從外部檔案獲取資料輸入。

Cypress fixtures 資料夾可以包含 JSON 或其他格式的檔案，資料以“鍵：值”對的形式維護。

多個測試可以使用所有測試資料。所有夾具資料都必須在 before hook 塊中宣告。

語法

Cypress 資料驅動測試的語法如下：

cy.fixture(path of test data)
cy.fixture(path of test data, encoding type)
cy.fixture(path of test data, opts)
cy.fixture(path of test data, encoding type, options)

這裡，

• 測試資料路徑是 fixtures 資料夾中測試資料檔案的路徑。

• 編碼型別 - 編碼型別（utf-8、asci 等）用於讀取檔案。

• Opts - 修改響應的超時時間。預設值為 30000ms。在 cy.fixture() 丟擲異常之前等待的時間。

在 example.json 中的實現

下面是使用 example.json 在 Cypress 中進行資料驅動測試的實現 -

{
   "fullName": "Robert",
   "number": "789456123"
}

實際測試的實現

在 Cypress 中實際資料驅動測試的實現如下 -

describe('Tutorialspoint Test', function () {
   //part of before hook
   before(function(){
      //access fixture data
      cy.fixture('example').then(function(regdata){
         this.regdata=regdata
      })
   })
   // test case
   it('Test Case1', function (){
      // launch URL
      cy.visit("https://register.rediff.com/register/register.php")
      //data driven from fixture
      cy.get(':nth-child(3) > [width="185"] > input')
      .type(this.regdata.fullName)
      cy.get('#mobno').type(this.regdata.number)
   });
});

執行結果

輸出如下：

輸出日誌顯示 Robert 和 789456123 分別被傳遞給“完整姓名”和“手機號碼”欄位。這些資料是從 fixture 傳遞到測試中的。

Cypress - 環境變數

我們可以定義環境變數，這些變數可以為測試自動化框架全域性宣告，並且所有測試用例都可以訪問它。這種型別的自定義環境變數可以儲存在專案內的 cypress.json 檔案中。

由於自定義變數不是 Cypress 的預設配置公開的，因此我們必須在 cypress.json 檔案中將金鑰指定為“evn”，然後設定值。

此外，要在實際測試中訪問此變數，我們必須使用 Cypress.env 並傳遞在 json 檔案中宣告的值。

在 cypress.json 中的實現

在 cypress.json 格式中環境變數命令的實現如下 -

{
   "projectId": "fvbpxy",
   "env" :
   {
      "url" : "https://www.google.com/"
   }
}

實際測試的實現

在 Cypress 中環境變數實際測試的實現如下 -

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch application from environment variable
      cy.visit(Cypress.env('url'))
      cy.getCookies()
      cy.setCookie('cookie1', 'value1')
   });
});

執行結果

輸出如下：

輸出日誌顯示啟動的 URL，該 URL 已在 cypress.json 檔案中設定為自定義環境變數。

配置環境變數

我們可以使用 --env 標誌從命令列配置或修改環境值。

要以帶頭模式執行特定檔案（例如：Test1.js），並在 URL 中使用 https://#，則命令應如下所示

./node_modules/.bin/cypress run --spec cypress/integration/examples/Test1.js --
env url=https://# –headed

如果我們在 cypress.json 檔案中為環境變數 url 設定了一個值，該值與從命令列設定的值不同，則 Cypress 將優先使用從命令列設定的值。

Cypress - Hook

Cypress Hooks 用於在每個/所有測試之前/之後執行某些操作。一些常見的鉤子如下 -

• before - 在 describe 塊中任何測試的先前執行完成後執行。

• after - 在 describe 塊中所有測試的執行完成後執行。

• beforeEach − 它在單個 it 塊執行之前執行，它位於 describe 塊中。

• afterEach − 它在單個 it 塊執行之後執行，它位於 describe 塊中。

實現

下面解釋了 Cypress Hooks 命令的實現。

describe('Tutorialspoint', function() {
   before(function() {
      // executes once prior all tests in it block
      cy.log("Before hook")
   })
   after(function() {
      // executes once post all tests in it block
      cy.log("After hook")
   })
   beforeEach(function() {
      // executes prior each test within it block
      cy.log("BeforeEach hook")
   })
   afterEach(function() {
      // executes post each test within it block
      cy.log("AfterEac hook")
   })
   it('First Test', function() {
      cy.log("First Test")
   })
   it('Second Test', function() {
      cy.log("Second Test")
   })
})

執行結果

輸出如下：

輸出日誌顯示第一個執行的步驟是 BEFORE ALL。

最後一個執行的步驟是 AFTER ALL。這兩個步驟都只執行了一次。

在 BEFORE EACH 下執行的步驟執行了兩次（在每個 TEST BODY 之前）。

同樣，在 AFTER EACH 下執行的步驟執行了兩次（在每個 TEST BODY 之後）。

兩個 it 塊按其實現順序執行。

標籤

除了鉤子之外，Cypress 還具有標籤 -.only 和 .skip。

當 .only 標籤用於執行其標記的 it 塊時，.skip 標籤用於排除其標記的 it 塊。

使用 .only 的實現

Cypress 中 .only 標籤的實現如下：

describe('Tutorialspoint', function()
   //it block with tag .only
   it.only('First Test', function() {
      cy.log("First Test")
   })
   //it block with tag .only
   It.only('Second Test', function() {
      cy.log("Second Test")
   })
   it('Third Test', function() {
      cy.log("Third Test")
   })
})

執行結果

輸出如下：

輸出日誌顯示帶有 .only 標籤的 it 塊（第一個測試和第二個測試）僅被執行。

使用 .skip 的實現

Cypress 中 .skip 標籤的實現如下：

describe('Tutorialspoint', function()
   it('First Test', function() {
      cy.log("First Test")
   })
   it('Second Test', function() {
      cy.log("Second Test")
   })
   //it block with tag .skip
   it.skip('Third Test', function() {
      cy.log("Third Test")
   })
})

執行結果

輸出如下：

輸出日誌顯示帶有 .skip 標籤的 it 塊（第三個測試）被跳過了。

Cypress - JSON 檔案配置

Cypress 配置包含一些適用於框架中所有測試的關鍵值對。Cypress 預設配置在測試執行程式視窗的“設定”選項卡 ->“配置”（展開）下可用。

如果我們進一步向下檢視同一視窗，我們將看到 Cypress 給出的多個配置的現有值，例如超時、環境變數、資料夾路徑等。

它顯示如下：

如果我們進一步向下檢視同一視窗，我們將看到 Cypress 給出的多個配置的現有值，例如超時、環境變數、資料夾路徑等。

它顯示如下：

覆蓋預設值

要覆蓋 cypress.json 檔案中的預設配置，我們必須指定鍵值對。

在 cypress.json 中的實現

覆蓋 JSON 檔案預設值的實現如下：

{
   "baseUrl" : "https://www.google.com/"
}

這裡，鍵是 baseUrl，值是 https://www.google.com/。再次執行測試後，更改將反映在全域性配置中，如下所示：

實際測試的實現

覆蓋 JSON 檔案預設值的實際測試實現如下：

describe('Tutorialspoint', function () {
// test case
   it('First Test', function (){
      // launch application from configuration
      cy.visit("/")
   });
});

執行結果

輸出如下：

執行日誌顯示 baseUrl 已從 cypress.json 檔案中獲取，並且適用於框架中的所有測試。

覆蓋預設配置

我們可以從測試指令碼中覆蓋預設配置，這些配置適用於測試用例中的單個測試步驟，而不是整個框架。

這是藉助 Cypress 中的 config 命令完成的。

例如，如果我們想增加特定測試步驟的預設超時時間，則實現如下：

//set default time out to nine seconds from following steps in test
Cypress.config('defaultCommandTimeout',9000)
landPage.selectUser().click()

同時，如果 cypress.json 檔案中將 defaultCommandTimeout 值設定為 7 秒，則 Cypress 將優先考慮應用於測試步驟的超時時間（即 9 秒）。

最後，它優先考慮預設配置。

停用覆蓋預設配置

我們可以停用從 cypress.json 覆蓋預設配置的功能。

cypress.json 中的配置如下：

{
   "defaultCommandTimeout" : "9000"
}

要停用上述配置，請執行以下命令：

npx cypress open --config-file false

執行上述命令後，測試執行程式視窗的“設定”選項卡將顯示 config 標誌設定為 false。

此外，defaultCommandTimeout 設定為 4 秒，這是由預設配置設定的，而不是由 cypress.json 的 9 秒值覆蓋的。

Cypress - 報告

Cypress 與 Mocha 捆綁在一起。因此，可以為 Mocha 生成的任何報告也可以與 Cypress 一起使用。除此之外，Cypress 還有其他第三方報告程式，如 JUnit 和 teamcity。

Mochawesome 報告

Mochawesome 報告是 Cypress 中最重要的報告之一。

• 要安裝 mochawesome，請執行此處提供的命令：

npm install mochawesome --save-dev

您的電腦上將出現以下螢幕：

• 要安裝 mocha，請執行以下命令：

npm install mocha --save-dev

您的電腦上將出現以下螢幕：

• 要合併 mochawesome json 報告，請執行以下命令：

npm install mochawesome-merge --save-dev

您的電腦上將出現以下螢幕：

所有這些軟體包在安裝後都應該反映在 package.json 檔案中。

要將多個報告合併到一個報告中，請執行以下命令：

npm run combine-reports

cypress.json 檔案中的配置

在 cypress.json 檔案中，我們可以為 mochawesome 報告設定以下配置：

• overwrite − 如果其值設定為 false，則不應覆蓋先前生成的報告。

• reportDir − 它是儲存報告的位置。

• quiet − 如果其值設定為 true，則不應有任何與 Cypress 相關的輸出。只需要列印 mochawesome 輸出。

• html − 如果其值設定為 false，則在執行後不應生成任何 html 報告。

• json − 如果其值設定為 true，則將生成一個包含執行詳細資訊的 json 檔案。

在 cypress.json 中的實現

cypress.json 中 mochawesome 報告的實現如下：

{
   "reporter": "mochawesome",
   "reporterOptions": {
      "reportDir": "cypress/results",
      "overwrite": false,
      "html": false,
      "json": true
   }
}

要為 Cypress 專案的 integration 資料夾中的所有規範生成報告，請執行以下命令：

npx cypress run

要執行特定測試，請執行以下命令：

npx cypress run --spec "<path of spec file>"

執行完成後，mochawesome-report 資料夾將在 Cypress 專案中生成，其中包含 html 和 json 格式的報告。

右鍵單擊 mochawesome.html 報告。然後，選擇“複製路徑”選項並在瀏覽器中打開復制的路徑。

mochawesome 報告將開啟，其中包含執行結果、持續時間、測試用例名稱、測試步驟等詳細資訊。

單擊螢幕左上角的圖示（上圖中突出顯示），將顯示更多選項。

我們可以獲得不同的檢視來選擇已透過、失敗、掛起、跳過的測試用例以及應用於測試的鉤子。

JUnit 報告

Cypress 提供了另一種型別的報告，稱為 JUnit 報告。

要安裝 JUnit 報告的軟體包，請執行以下命令：

npm install cypress-junit-reporter --save-dev

您的電腦上將出現以下螢幕：

在 cypress.json 中的實現

以下是 cypress.json 中 JUnit 報告的實現：

{
   "reporter": "junit",
   "reporterOptions": {
      "mochaFile": "cypress/results/results.xml",
      "toConsole": true
   }
}

如果我們在一次執行中執行多個測試，並且希望為各個規範檔案提供唯一的報告，則必須在 cypress.json 中的 mochaFile 引數中新增 [hash]。

避免覆蓋報告的實現

以下是 cypress.json 中避免覆蓋 Cypress 中報告的實現：

{
   "reporter": "junit",
   "reporterOptions": {
      "mochaFile": "cypress/results/results-[hash].xml",
      "toConsole": true
   }
}

要為 Cypress 專案的 integration 資料夾中的所有規範生成報告，請執行以下命令：

npx cypress run --reporter junit

您的電腦上將出現以下螢幕：

執行完成後，results 資料夾將在 Cypress 專案中生成，其中包含 xml 格式的報告。

teamcity 報告

Cypress 提供了另一種型別的報告，稱為 teamcity 報告。

要安裝 teamcity 報告的軟體包，請執行以下命令：

npm install cypress-teamcity-reporter --save-dev

您的電腦上將出現以下螢幕：

要為 Cypress 專案的 integration 資料夾中的所有規範生成報告，請執行以下命令：

npx cypress run --reporter teamcity

您的電腦上將出現以下螢幕：

Cypress - 外掛

Cypress 有多個外掛可以新增到其功能中。外掛有多種型別，例如身份驗證、元件測試、自定義命令、開發工具等。

一些突出的外掛包括：

要執行檔案上傳任務，我們必須首先安裝一個外掛，使用以下命令：

npm install –dev cypress-file-upload

安裝完成後，我們必須在 command.js 檔案中新增語句 import 'cypress-file-upload'，該檔案位於 Cypress 專案的 support 資料夾內。

要使用框架，首先，我們必須使用以下命令安裝框架的 Cypress 外掛：

npm install –D cypress-iframe

然後，我們必須在程式碼中新增語句 import 'cypress-iframe'。

要使用 xpath 定位符識別元素，請執行以下命令：

npm install cypress-xpath

安裝完成後，我們必須在 index.js 檔案中新增語句 require ("cypress-xpath")，該檔案位於 Cypress 專案的 support 資料夾內。

此外，我們必須使用 cy.xpath 命令來識別元素。

要啟用主題，我們必須使用以下命令安裝一個外掛：

npm install --save-dev cypress-dark

安裝完成後，我們必須在 index.js 檔案中新增語句 require ("cypress-dark")，該檔案位於 Cypress 專案的 support 資料夾內。

Cypress - GitHub

要將 Cypress 與 GitHub 整合，我們必須首先安裝 Cypress GitHub 應用。這可以透過 Cypress 儀表盤中的組織整合設定或專案設定來完成。

安裝

Cypress GitHub 應用的安裝可以透過兩種方式完成。下面詳細解釋。

透過組織整合設定安裝

按照以下步驟透過組織整合設定安裝 GitHub：

• 導航到儀表盤組織頁面。

• 選擇要與 GitHub 帳戶或組織整合的組織。

• 從導航到側邊欄中，導航到所選組織的整合選項。

• 然後，單擊“GitHub 整合”按鈕。

透過專案設定安裝

按照以下步驟透過專案設定安裝 GitHub：

• 在組織切換器中選擇組織。

• 選擇要與 GitHub 中的儲存庫整合的專案。

• 轉到專案設定頁面。

• 轉到 GitHub 整合。

• 單擊“安裝 Cypress GitHub 應用”。

GitHub 應用安裝完成後，我們將被重定向到 GitHub.com 以繼續執行以下步驟：

• 選擇要與組織 Cypress 儀表盤整合的 GitHub 組織或帳戶。

• 接下來，我們必須將所有 GitHub 儲存庫或特定儲存庫與 Cypress GitHub 應用結合起來。

• 單擊“安裝”按鈕以完成安裝。

GitHub 整合啟用

下面解釋了在 Cypress 中啟用 GitHub 整合的過程：

• 轉到專案設定頁面。

• 導航到“GitHub 整合”部分，然後單擊“配置”。

• 從 GitHub 中選擇一個儲存庫與專案整合。

• 由於 GitHub 儲存庫已連線到 Cypress 專案，因此 GitHub 整合將被啟用。