掌握測試自動化：data-testid 如何革新 UI 測試

教學
Selenium

如何實現這個方法？

在您的前端開發過程中實現data-testid方法需要一些步驟，從設定您的項目到有效使用該屬性最佳實踐。以下是 Implementation 這個方法的步驟指南。

先考慮測試

规划測試

在開始編寫代碼之前，請確保可在您的UI元件設計中，將可測試性作為一個主要的考慮因素。與您的團隊討論如何進行元件測試以及data-testid將如何被應用。

及早讓QA參與

在開發過程中及早讓QA工程師參與，以確定哪些元件將需要data-testid屬性。這種合作確保您的元件在設計時已考慮到測試。

為您的元件添加data-testid屬性

識別關鍵元件

判定您UI中的哪些元件對於測試來說是關鍵的。這些可能包括按鈕、表單輸入、鏈接以及測試將 interacting 的任何动态内容。

應用data-testid

為這些關鍵元件添加data-testid屬性。例如：

<button data-testid="submit-button">Submit</button>
<input data-testid="username-input" type="text" />

選擇性添加

避免將data-testid添加到每個元件。集中在與您的測試案例直接相關元件上。過度使用data-testid可能會使您的HTML變得混亂，並且更難維護。

使用data-testid撰寫測試腳本

更新既有測試

如果您已有測試套件，請重构您的測試以在适当情況下使用data-testid選擇器。這會提高您的測試穩定性。使用Playwright和Cypress的示例：

JavaScript

  

// 使用data-testid的Playwright測試
await page.click('[data-testid="submit-button"]');
await page.fill('[data-testid="username-input"]', 'testuser');



// 使用data-testid的Cypress測試
cy.get('[data-testid="submit-button"]').click();
cy.get('[data-testid="username-input"]').type('testuser');

保持測試可讀性

為data-testid使用有意義且描繪性的值。這讓您的測試更易於閱讀和理解。

將data-testid整合到您的開發工作流程中

標準化使用

為您的项目中data-testid創建指導方针或命名規則。這確保了代碼庫中的一致性，並讓所有团队成员都更容易遵循。

代码审查

在代码審查過程中，檢查data-testid屬性是否恰当地並一致地使用。確保它們對測試有意義且必要。

使用data-testid的最佳實踐

  • 使用連字符命名：偏好使用連字符或snake_case命名 convention對於data-testid值（例如，submit-button，username_input）以保持名字一致且易於閱讀。
  • 避免使用動態數據：不要在data-testid值中包含像時間戳或ID這樣的動態數據，因為這些可能會變化，使您的選擇器變得不可靠。
  • 平衡測試覆蓋:對需要測試的關鍵UI元件使用data-testid，但不要過度依賴它。在适当的地方結合其他選擇器以保持您的測試周全。

評估對您的自動化開發的影響

  • 自動化的穩定性:透過data-testid提供穩定的選擇器，您的自動化測試將變得更加可靠且易于維護，減少测试的不穩定性。
  • 節省時間:測試維護時間的減少讓您的QA團隊能夠專注於撰寫新的測試並提高測試覆蓋率。
  • 改善协作:開發者和QA工程師可以更有效地合作，因為data-testid的使用簡單且使每個測試的意圖更清晰。

自動化和維護您的測試

  • CI/CD結合:將您的測試套件結合到 Continuous Integration/Continuous Deployment (CI/CD) 管線中。這讓自動化測試在每次代码推送時運行，確保您的應用程序保持穩定。
  • 監控和更新:定期查看您的測試和data-testid的使用情況隨著應用程序的發展。在開發新功能時更新或新增data-testid屬性。

教育和團隊

  • 培訓:為您的團隊提供有關正確在開發和測試中使用data-testid的培訓課程或文件。
  • 持续提升: encourage your team to provide feedback on the use of data-testid and refine your methodology based on their suggestions.

如何在不同的框架中实施此方法？

要在如Selenium、Playwright和Cypress等不同的测试框架中实施data-testid方法，需要了解每个工具与DOM的互动方式以及如何使用data-testid属性来创建稳定可靠的测试脚本。以下是使用这些工具实施此方法的详细指南。

1. Selenium

Selenium使用ID、类、名称、XPath等定位器与网页元素互动。通过使用data-testid，您可以创建更稳定的选择器，使其不受页面视觉结构的影响。假设您有一个包含用户名字段、密码字段和提交按钮的登录表单。

  • HTML 代码：
<form>
  <input data-testid="username-input" type="text" name="username" />
  <input data-testid="password-input" type="password" name="password" />
  <button data-testid="submit-button" type="submit">Login</button>
</form>

  • Selenium 测试脚本:
Java

  

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class LoginTest {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        driver.get("http://yourapp.com/login");

        // 使用 data-testid 定位元素
        WebElement usernameInput = driver.findElement(By.cssSelector("[data-testid='username-input']"));
        WebElement passwordInput = driver.findElement(By.cssSelector("[data-testid='password-input']"));
        WebElement submitButton = driver.findElement(By.cssSelector("[data-testid='submit-button']"));

        // 与元素互动
        usernameInput.sendKeys("testuser");
        passwordInput.sendKeys("password");
        submitButton.click();

        // 执行进一步的动作或断言
        driver.quit();
    }
}

在 Selenium 中的优势

  • 稳定性: 在Selenium中使用data-testid可以确保您的定位器由于UI变化而更不易损坏。
  • 可维护性: 由于data-testid相对于类或ID更不易更改，因此更新或重构测试更为容易。

2. Playwright

Playwright 提供了強大的自動化功能予網絡應用程式。它支持如 CSS、文字、XPath 以及 data-testid 之類的選擇器。

例子

以同一登入表格例：

  • Playwright 測試腳本 (TypeScript):
TypeScript

  

import { chromium, Browser, Page } from 'playwright';

(async () => {
    const browser: Browser = await chromium.launch();
    const page: Page = await browser.newPage();
    await page.goto('http://yourapp.com/login');

    // 使用 data-testid 定位元素
    await page.fill('[data-testid="username-input"]', 'testuser');
    await page.fill('[data-testid="password-input"]', 'password');
    await page.click('[data-testid="submit-button"]');

    // 执行进一步的动作或断言
    await browser.close();
})();

Playwright 的優勢

  • 效率: Playwright 对 data-testid 的支持有助于编写简洁明了的测试脚本。
  • 弹性: data-testid 选择器使测试脚本更加健壮，能够抵抗 DOM 结构的更改。

3. Cypress

Cypress 是一个 JavaScript 的端到端测试框架，提供了极佳的开发者体验。它也支持使用 data-testid 属性来定位元素。

例子

使用同一个登入表单：

  • Cypress 测试脚本 (JavaScript):
JavaScript

  

describe('Login Test', () => {
  it('should login with valid credentials', () => {
    cy.visit('http://yourapp.com/login');

    // 使用 data-testid 定位元素
    cy.get('[data-testid="username-input"]').type('testuser');
    cy.get('[data-testid="password-input"]').type('password');
    cy.get('[data-testid="submit-button"]').click();

    // 执行进一步的动作或断言
    cy.url().should('include', '/dashboard');
  });
});

Cypress 的 不发生又会如何

  • 开发者体验: Cypress 的语法与 data-testid 结合在一起，使得测试脚本非常易读且易于维护。
  • 测试稳定性: data-testid 选择器通过减少因 UI 更改而导致的测试破裂的可能性，使得测试更加可靠。

实施 data-testid

  1. 命名有意義：為您的data-testid屬性使用描叙性名稱。例如，data-testid="submit-button"比data-testid="btn1"更有意義。
  2. 一致性：在您的應用程序中一致地應用data-testid。這有助於创建一致的測試腳本。
  3. 選擇性使用：將data-testid應用於測試中關鍵的元素。避免過度使用，這可能會使您的HTML變得混亂。
  4. 避免動態數據：不要在data-testid屬性中包含像時間戳或唯一ID這樣的动态值，因為這些值的变化可能會導致測試失敗。

結論

在您的前端開發過程中實施data-testid方法為像Selenium、Playwright和Cypress這樣的各種測試框架帶來了顯著的好處。它增強了測試腳本的穩定性、可讀性和可維護性，從而導致更可靠的新型号測試和更有效的QA過程。通過遵循所提供的示例和最佳實踐，您可以無縫地将data-testid整合到您的 workflow中，並提高您產品的整體質量。

參考资料

Source:
https://dzone.com/articles/how-data-testid-can-revolutionize-ui-testing