以 TypeScript Cypress 為例，介紹 14 個測試自動化中簡單實用的實踐技巧

綜合編譯｜TesterHome 社群
作者｜Maria Golubeva，QA 工程師

以下為作者觀點：

自動化測試已成為現代軟體開發的重要組成部分，使團隊能夠簡化測試工作並更快地交付高質量的軟體。

在本文中，我將介紹 14 個簡單且比較實用的實踐，給大家在測試自動化工作中提供有益參考。從測試用例設計到執行和分析，這些實踐旨在最佳化測試流程，提高軟體產品的整體質量。

我將使用 TypeScript Cypress 自動化示例來說明這些實踐。

1.從策略開始

在深入進行測試自動化之前，必須制定明確的計劃或策略。為你的測試自動化工作定義明確的目的和目標。根據可行性確定哪些內容需要自動化，哪些內容不適合自動化。

它還意味著與最瞭解應用程式的人交談，例如 PM、BA 或 UI/UX 設計師 -- 瞭解應用程式如何工作以及對使用者來說至關重要的內容的團隊成員。你還可以從 QA 團隊內部緊密討論，可以分享過去專案的經驗，並建議是否堅持經過驗證的策略或根據該特定專案的需求制定新的策略。

2.聰明地使用測試集

根據應用程式的主題、功能或頁面來組織團隊。例如，可能有一組用於測試登入功能，另一組用於測試支付功能，等等。這使得更容易有效地管理和執行測試，特別是當測試套件變得越來越大時。

下面一個例子，讓我們考慮 “預訂流程” 功能（測試套件），其中包括 “為成人預訂機票” 和 “為成人和兒童預訂機票” 等測試。

describe('Booking flow', () => {

 it('Book ticket for adult', () => {
//test scenario code
 });

 it('Book tickets for adult and child', () => {
 //test scenario code
 });

3.全面描述測試場景

在編寫任何程式碼之前描述測試的每個步驟和預期結果。這就像在建造一個建築之前制定計劃一樣——在開始之前你想確切地知道你要做什麼。透過提前詳細說明每個步驟，稍後編寫實際的測試程式碼會變得更容易，因為你們已經定義了需要測試的內容以及如何測試。

自動化測試用例示例

4.編寫可維護的測試用例

編寫易於理解和維護的測試用例。對測試和測試元件使用描述性且有意義的名稱，花時間最佳化可重用的方法。遵循公司中定義的編碼標準和約定。下面，我將分享一些程式碼最佳化的想法。

5.為 HTML 元素新增識別符號

透過向前端程式碼中的 data-testidHTML 元素新增屬性，實際上你是在為測試目的標記它們。這有助於自動化測試準確地識別這些元素並與之互動，即使 HTML 佈局發生了修改。有時，QA 工程師無權訪問 FE 程式碼儲存庫，在這種情況下，你必須 data-testid 向開發人員請求。

HTML 中元素的 data-testid 示例

Cypress 中的使用示例 data-testid：

addNotes(value: string) {
  cy.findByTestId('notes')
   .type(value);
 }

6.使用前置條件和後置條件

前置條件和後置條件幫助我們準備測試和之後的清理工作。在執行測試之前，我們需要確保系統處於進行測試的正確狀態（前提條件）。測試完成後，我們需要重置系統或執行任何必要的清理，以使其為下一次測試做好準備（後置條件）。Before、After、BeforeEach 和 AfterEach 等方法幫助我們自動化這些設定和清理任務，確保我們的測試可靠且獨立。

Cypress 中,before()、 beforeEach()、after() 的 hooks 使用示例：

describe('Booking flow', () => {

 before(() => {
  createExcursion(excursionTypes.ticket.disneyland);
 });

 beforeEach(() => {
  cy.visit('/');
  loginPage.navigateToAmazonLoginPage();
  amazonLoginPage.signIn();
  homePage.isDisplayed();
 })

 after(() => {
  deleteExcursion(excursionTypes.ticket.disneyland);
 });

 it('Book ticket for adult', () => {
 //test scenario code 
 });
});

7.使用 API 呼叫自動執行任務，節省時間並避免不穩定

例如，這涉及利用 API 端點來建立必要的測試資料集並在執行測試之前配置使用者賬戶的狀態，以及在之後清理或重置這些資料。使用 API 呼叫不僅可以確保一致性，還可以透過自動執行重複任務來節省時間。

Cypress 中的使用方法示例 request()：

export function createExcursion(excursionType: string) {
 cy.request({
  method: 'POST',
  url: 'https://www.test',
  headers: { 'X-API-KEY': 'test key' },
  body: {
   type: excursionType,
   },
 });
}

8.適當應用頁面物件模式

使用此模式，應用程式的每個頁面都由程式碼中的單獨物件表示。這會讓你的測試更有組織性並且更易於維護，因為可以在相應的頁面物件中管理對 UI 的更改。透過使用頁面物件模式，測試程式碼變得更具可讀性和可擴充套件性。

在以下情況下，在測試自動化中使用頁面物件模式是合理的：

該應用程式具有複雜的 UI，其中包含多個頁面或元素，需要在測試中頻繁互動。
需要在多個測試或測試套件中重用元素或操作。
預計 UI 會頻繁更改，並且希望將與 UI 相關的更改集中在一處以便於維護。

在以下情況下可能不需要使用頁面物件模式：

該應用程式有一個簡單的 UI，只有幾個頁面或元素，在測試中不需要太多互動。
正在建立一次性或臨時測試，將來不需要維護或重複使用。
時間有限，需要快速建立測試，而不關注長期維護或可擴充套件性。

9.對共享頁面元素應用繼承

有些頁面可以從一個模板構建。我們可以建立一個包含公共元素的基本頁面物件，而不是在多個頁面物件之間複製共享元素的程式碼。然後，我們可以為繼承自基本頁面物件的特定頁面建立子頁面物件。這有助於使我們的測試程式碼更加模組化和有組織。

頁面繼承示例

10. 對共享元件進行分組以實現可重用性

識別某些元素何時出現在多個頁面上非常重要，例如頁首、頁尾或選單。

透過識別這些共享元件並將它們儲存在單獨的檔案中（如上所述），我們可以避免在不同的頁面物件之間重複相同的程式碼。相反，我們編寫方法來與這些共享元素互動一次。這種方法不僅節省了時間和精力，而且使我們的測試程式碼更加高效、可維護和可重用。

11.開發可重用的輔助方法

為在不同測試中頻繁執行的任務（例如授權）建立輔助方法是有益的。這些輔助方法封裝了執行這些操作的邏輯，使它們可以在多個測試中重用。

Cypress 專案的資料夾結構

12.記錄測試詳細資訊以便於除錯

在測試執行的各個階段記錄重要資訊很有幫助。這些日誌可以包括測試步驟、輸入資料、預期結果和實際結果等詳細資訊。日誌為故障排除和除錯測試失敗提供了有價值的資訊，有助於找到問題的根本原因並有效解決問題。

Cypress 中的使用方法示例 log()：

addNotes(value: string) {
  cy.findByTestId('notes').type(value);
  cy.log(`The "${value}" value is added to the notes`);
 }

13.將測試資料整理成專用檔案

將各種型別的測試資料儲存在專用於特定類別的單獨檔案中是有益的。這些檔案可以包含應用程式內容、用於識別 UI 上元素的定位器、測試場景的輸入值、網頁 URL 以及用於身份驗證的憑據等資訊。以這種方式組織測試資料並將其匯出的做法允許重複使用資料，並透過將資料集中在單個檔案中來簡化更新。可以在一個位置進行更改，而不是在測試中的多個位置修改資料，從而確保整個測試過程的一致性和效率。

.json 包含資料的檔案示例：

{
"adult":{
  "name":"TestName",
  "surname":"TestSurname",
  "email":"test@test.test",
  "number":"+375333333333",
},
"child":{
  "name":"ChildTestName",
  "surname":"ChildTestSurname",
}
}

14.定期維護

定期審查和更新自動化測試，以確保它們保持相關性和有效性。隨著時間的推移，忽視維護可能會降低測試的效率。根據需要進行更改以匹配要求和應用程式中的任何更新。