Cypress 中的逐步頁面對像模型與示例

頁面對像模型俗稱 POM, 是任何自動化框架中的流行模式。 頁面對像模型也可以在 Cypress 中應用。 頁面對像模型在創建測試自動化框架方面具有許多優勢,例如減少代碼重複並提高可維護性和可讀性。 Cypress 為我們提供了將頁面對像模型合併到測試腳本中的靈活性。 在本文中,我們將著眼於在 柏樹台階 一步一步舉例。

目錄:

cypress 頁面對像模型
賽普拉斯頁面對像模型

什麼是頁面對像模型?

頁面對像模型是一種設計模式,其中 頁面對象與自動化測試腳本分離。 自動化測試為我們提供了許多使我們在測試中受益的槓桿; 但是,隨著項目的發展,會出現一些結果,例如代碼重複和可維護性風險的增加。 讓我們通過一個例子來理解 POM 的意義。

考慮我們的應用程序中有多個頁面,例如登錄頁面、註冊頁面和預訂航班頁面。

  • 登錄頁麵包含登錄功能的所有 Web 元素
  • 註冊包含註冊過程的所有方法和網絡元素
  • 預訂航班包含航班預訂頁面的 Web 元素

共有三個測試用例,分別是 TC1、TC2 和 TC3。

  • TC1 包含登錄測試用例。
  • TC2 包含登錄和註冊測試用例
  • TC3 包含登錄、註冊和航班預訂測試用例
沒有 POM 的示例

現在,登錄頁面與 TC1 交互。

註冊頁面需要與TC1和TC2進行交互,並且

航班預訂頁面需要與TC1、TC2、TC3進行交互

如您所見,所有三個測試用例之間都有共同的功能。 我們可以單獨擁有它們並跨文件訪問它們,而不是在所有測試用例文件中編寫登錄的方法和定位器。 這樣,代碼就不會重複,而且很容易閱讀。

編碼中的最佳實踐之一是一個稱為 DRY。 它的意思是 不要重複自己. 正如完整表格明確指出的那樣,我們不應該一次又一次地重複代碼行。 為了克服這一點, 頁面對像模型 在最佳編碼實踐中發揮著重要作用。

頁面對像模型框架架構

頁面對像模型框架 架構是一種經過驗證的架構,可以使用簡單的方法進行自定義。 今天,幾乎所有公司都遵循敏捷方法,其中涉及持續集成、開發和測試。 自動化測試人員維護測試框架以與開發過程一起工作 頁面對像模型. 這是一個重要的 維護自動化測試框架的設計模式 隨著代碼隨著新功能的增長而增長。

頁面對像是一種設計模式,它是一個面向對象的類,它與我們正在測試的應用程序的頁面進行交互. 頁面對象包括 頁麵類 及 測試用例頁麵類 由與 Web 元素交互的方法和定位器組成。 我們為應用程序中的每個頁面創建單獨的類。 我們將為每個功能創建單獨的方法並在我們的規範文件中訪問它們。

頁面對像模型

在 Cypress 中使用頁面對像模型的優勢

  1. 方法是 可重複使用 貫穿整個項目,並且隨著項目的增長易於維護。 代碼行變成  可讀的 及 優化。
  2. 頁面對像模式建議我們將 操作和流程 我們在 UI 中執行的 驗證 腳步。 當我們遵循 POM 模式時,我們傾向於寫 乾淨且易於理解的代碼.
  3. 使用頁面對像模型, 對象 及 測試用例 是相互獨立的。 我們可以在項目中的任何地方調用這些對象。 這樣,如果我們使用不同的工具,如 TestNG/JUnit 進行功能測試或 Cucumber 進行驗收測試,那麼很容易 無障礙.

逐步頁面對像模型 Cypress 與示例

本節將了解如何在 帶有實時示例的賽普拉斯 我們可以在項目中實施。 我們將從創建頁面對像模型的基本設置和分步過程中了解。

讓我們討論我們將在此示例中編寫函數的場景。

  1. 導航 https://admin-demo.nopcommerce.com/ 網站
  2. 輸入有效的用戶名和密碼
  3. 點擊登錄按鈕
  4. 驗證 URL 是否附加 /admin 登錄後

對於此示例,我們將創建兩個文件——一個 PageObject 文件和一個規範文件。 讓我們開始吧!

步驟 1:在VS代碼中打開我們的項目。 創建一個名為的文件夾 頁面對象積分 文件夾。 在此文件夾下,您可以為任何模塊創建頁面目標文件。

名為 PageObject 的新文件夾

步驟 2: 創建一個名為 登錄頁面.js 在 頁面對象 文件夾。 在 LoginPage.js 中,我們將編寫涉及登錄功能的方法。

在 PageObject 文件夾下創建 LoginPage.js

步驟 3:讓我們開始編寫我們的第一個測試方法 登錄頁面.js 文件。 我們必須首先創建一個類,我們將在我們的規範文件中導出該類。 我們將我們的班級稱為 登錄頁面

類登錄頁面 { }

根據我們的偽代碼,我們的第一步是導航到 URL。 我們將我們的方法稱為 navigate(). 在我們的導航方法中,我們將添加 cy.visit() 來自賽普拉斯的功能。

 導航() { cy.visit('https://admin-demo.nopcommerce.com/') }

導航方法

步驟 4:現在,我們必須在我們的電子郵件字段中輸入用戶名。 我們將我們的方法命名為 輸入電子郵件(). 首先,我們應該獲取電子郵件字段的定位器並通過以下方式訪問它們 cy.get() 命令。 然後我們將使用 clear() 命令並使用添加用戶名 type() 命令。 在我們的方法中,我們傳遞一個參數 用戶名 傳遞規範文件中的值。 這樣,如果需要不同的電子郵件 ID,我們將保持通用訪問此方法。

enterEmail(username) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(username); 返回這個 }

而不是寫 cy.get() 在上面的代碼中命令兩次,我們可以簡單地用  操作員。

  enterEmail(username) { cy.get('[id=Email]') .clear() .type(username); 返回這個 }

enterEmail 方法

你可能已經註意到 return this 在第 9 行。 Free Introduction 表示 輸入郵箱 方法屬於特定的 登錄頁面 班級。 基本上, Free Introduction 代表班級。

步驟 5:我們必須創建一個類似於我們的 enterEmail 方法的密碼方法。 我們將把我們的密碼方法稱為 enterPassword(). 最初,我們將獲取密碼的定位器,清除該字段並鍵入輸入值。 我們將一個參數傳遞給我們的方法調用 密碼 和訪問 type() 命令。

enterPassword(pswd) { cy.get('[id=Password]') .clear() .type(pswd) 返回這個 }
輸入密碼方法

步驟 6:我們最後的方法是點擊登錄按鈕。 我們將我們的方法命名為 submit(). 我們將獲得定位器並使用 click() 來自賽普拉斯的方法。

 提交() { cy.get('[type=submit]').click() }

提交方法

步驟 7:現在,我們必須導出這個類才能在我們的規範文件中使用它。 為此,我們只需在我們的類之外添加一行,我們就可以在我們的規範文件中輕鬆訪問它。

導出默認登錄頁面

導出命令

歡呼! 我們已經為我們的項目創建了一個頁面對象文件。 這非常簡單和容易!

訪問 Spec 文件中的頁面對象

現在讓我們繼續我們的測試用例文件。 我們必須在我們的集成文件夾中創建一個規範文件。 我們將調用我們的規範文件 POMDemo.spec.js.

POMDemo.spec.js 文件創建

步驟 1:要訪問 LoginPage.js 文件中的方法,我們必須 進口 它們進入我們的規範文件。 我們使用 import 語句導入。 我們應該使用導航到 LoginPage.js 文件 ../

在我們的例子中,路徑是 ../integration/PageObject/LoginPage. 因此,import 語句將如下所示。

從“../integration/PageObject/LoginPage”導入登錄頁面

步驟 2: 因為我們用的是Mocha,所以我們會在裡面寫我們的測試用例 describe() 及 it() 堵塞。 describe() 代表一個 測試套件, it() 代表一個 測試用例. 這兩個塊都是一個函數,並接受一個字符串參數,其中包括 描述 測試。

describe("Cypress POM 測試套件", function () { })

描述塊

在 describe 塊中,我們將編寫我們的 it() 通過將描述添加為具有有效憑據的登錄名。

it("使用有效憑據登錄", function () { })

它阻塞

步驟 3:要從我們的 Page 對象文件訪問我們的方法,我們應該為我們的 Login 類創建一個實例。 要為登錄類創建一個實例,我們必須聲明一個變量並使用 關鍵詞。 使用聲明的變量,我們可以輕鬆訪問 Page 對象文件中的方法。

                                               const login = new LoginPage();
類的實例

備註: 變量 login,我們可以從 Page 對像類訪問這些方法。 當我們開始打字時 login. ,vscode 將列出 LoginPage.js 文件中所有可用方法的建議。 這有助於我們驗證我們是否正確導出和導入了我們的類!

步驟 4: 讓我們打電話給我們 navigate() 訪問 URL 的方法。 這是我們測試用例中的第一個動作。

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("使用有效憑據登錄", function () { const login = new LoginPage(); login.navigate(); }); });

步驟 5:我們應該在電子郵件字段中輸入用戶名。 我們訪問 enterEmail()登錄 目的。 enterEmail() 方法接受一個參數 用戶名. 所以我們應該將用戶名的值作為 在我們的規範文件中

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("使用有效憑據登錄", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); }) })

步驟 6: 類似於第 5 步,我們應該調用我們的 enterPassword() 方法通過將密碼作為字符串中的參數傳遞。

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("使用有效憑據登錄", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); }) })

步驟 7:接下來,我們必須點擊登錄按鈕。 我們將調用該方法 submit() 來自我們的頁面目標文件。

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("使用有效憑據登錄", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); login.submit(); }) })

步驟 8:登錄後,我們必須斷言URL。 我們將驗證 URL 是否為 等於 登錄後的網址。 對於斷言,我們將使用  斷言庫,它內置於賽普拉斯。

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("使用有效憑據登錄", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); login.submit(); cy.url().should('be.equal', 'https://admin-demo .nopcommerce.com/admin/') }) })

登錄測試用例

上圖代表登錄測試用例。 我們能夠通過很少的簡單步驟使用頁面對像模型編寫測試用例。 現在讓我們運行測試用例並查看結果。

我們將打開 Cypress 測試運行程序並單擊規範文件並運行我們的測試用例。 檢查這個 文章 關於如何打開 Cypress 測試運行器。

Cypress 中的測試結果

歡呼! 我們已經成功地編寫了一個在 Cypress 中使用頁面對像模型的測試用例。 我們可以在實時項目中加入這種模式。 我們可以通過多種方式在頁面對象文件中編寫方法。 我已經向您展示了一個適用於任何項目的標準示例。 你也可以只寫 返回函數 在頁面對象文件中,然後單擊 和 類型 直接在我們的規範文件中。

我們將看到可以在項目中使用的另一種模式。 這種方法也可以很好地工作。

在這種類型中,我們將僅返回方法中的定位器函數並在測試文件中執行操作。 我們將為上面看到的相同場景編寫代碼。

頁面對象 – LoginPage.js

類 LoginPage { navigate() { cy.visit('https://admin-demo.nopcommerce.com/') } enterEmail() { return cy.get('[id=Email]') } enterPassword() { return cy.get('[id=Password]') } submit() { return cy.get('[type=submit]') } } 導出默認登錄頁面

正如我們在上面看到的,我們只在我們的函數中編寫定位器並返回它們。 返回表示特定方法屬於 類 LoginPage.js. 我們沒有在我們的方法中添加任何動作。

頁面對象文件示例

規範文件 – POMDemo.spec.js

我們將研究訪問規範文件中的方法的示例。

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("使用有效憑據登錄", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('admin@yourstore.com'); login.enterPassword().clear() login.enterPassword().type('admin'); login. submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

規範文件示例

在這裡,我們從 PageObject 文件調用該方法並執行測試用例操作。 所以首先,我們調用我們的引用變量 登錄 然後用方法附加它 enterEmail() 最後附加動作 類型。 在我們的 type(), 我們正在傳遞用戶名 .

測試結果

可以看到,所有的命令都已經執行完畢,測試用例通過了!

您可以選擇適合您的項目和意見的頁面對像模型。 沒有特定的規則可以只堅持一種程序。

如何在 Cypress 的頁面對像模型中使用 Fixtures 作為測試數據源?

在我們的頁面對像模型示例中,我們直接在頁面對象文件中或直接在測試用例文件中傳遞用戶名和密碼值。 本節將了解如何使用 賽普拉斯的固定裝置 以確保數據安全且不暴露。 我們應該嘗試將所有憑據和數據保存在一個文件中並訪問它們。 這樣,易於維護,並且不會暴露用戶名和密碼等敏感數據。 這個方法也是我們在頁面對像模式中需要遵循的程序之一。

如前所述, Fixture 有助於將數據存儲在 JSON 文件或 excel 文件中,或者像 Apache POI 這樣的外部庫中. 我們將通過創建一個變量來使用這些數據,並在我們的規範文件中訪問它們。 讓我們通過一個例子來理解。

Cypress 提供了一個名為“固定裝置。” 我們將創建一個 JSON 文件名為 證書.JSON 在“燈具”文件夾下。

JSON 文件創建

讓我們聲明我們需要以 JSON 格式驗證的用戶名、密碼和 URL 值 憑據.json 文件。

{“用戶名”:“admin@yourstore.com”,“密碼”:“admin”,“adminUrl”:“https://admin-demo.nopcommerce.com/admin/”}

在credentials.json 文件中傳遞值

從測試用例文件中的 JSON 文件訪問值

由於我們已經在 JSON 文件中定義了值,因此我們將在我們的測試用例文件中使用 賽程 來自賽普拉斯。 我們將訪問 JSON 值 Free Introduction  關鍵詞。 讓我們將夾具功能包裝在一個 前() 阻塞。

describe("Cypress POM 測試套件", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) })

cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) – 這條線代表我們正在通過 憑據.json 文件作為我們的參數 cy.夾具() 命令。 在這裡,我們不需要傳遞是否是 JSON 文件。 只需單獨傳遞文件名。 後來,我們通過 測試數據 作為函數中的參數並訪問 測試數據 變量使用 Free Introduction .

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("使用有效憑據登錄", function () { const login = new LoginPage(); login.navigate(); login.enterEmail(this.testdata.username) login.enterPassword(this.testdata.password ) login.submit(); cy.url().should('be.equal', this.testdata.adminUrl) }); });

login.enterEmail(this.testdata.username) – 這將從credentials.json 文件中獲取用戶名值並將其填充到電子郵件字段中。

login.enterPassword(this.testdata.password) – 這將從credentials.json 文件中獲取密碼值並將其填入密碼字段

cy.url().should('be.equal', this.testdata.adminUrl) – 這將從credentials.json 文件中獲取adminUrl 並在斷言中進行驗證

將數據從 JSON 文件傳遞到規範文件

現在,讓我們為結果運行測試用例。

測試結果

如我們所見,測試用例已經執行並通過。 此示例將幫助您編寫一個基本的數據驅動測試用例。 您可以使用此方法將其合併到您的項目中。 您可以在 Fixture 文件夾下創建新的 JSON 文件,添加與測試數據相關的值,並在任何測試文件中訪問它。

常見問題解答

賽普拉斯是否支持頁面對像模型?

當然。 Cypress 提供了在存儲庫中處理頁面和對象的所有靈活性。 這很容易實現。

我應該使用上面示例中的哪個頁面對像模型?

沒有特定的規則可以只堅持一種頁面對像模型。 您可以使用上面討論過的任何模型。 您可以根據您的項目自由定制模型。

為什麼我應該在 Cypress 的頁面對像模型中使用裝置?

Fixture 有助於將用戶名、密碼和 URL 等敏感數據存儲在 JSON 或 excel 等單獨文件中。 這確保了應用程序的安全性,並可以在整個項目的任何文件中輕鬆訪問它們。 要訪問 JSON 文件,我們使用 固定裝置 在我們的規範文件中使用它。

回到頁首