UIテストを革命的に変身させるdata-testidを精通する

Selenium

このアプローチをどのように実装するのか？

フロントエンド開発プロセスに data-testid アプローチを実装するには、プロジェクトの設定から属性を有効に使用する最良の方法に至るまでのいくつかのステップがあります。以下は、このアプローチを実装するためのステップバイステップのガイドです。

テストファーストの考え方を取る

テスト計画

コーディングに飛び込む前に、UIコンポーネント設計においてテスト可能性を重視するようにしてください。チームと一緒に、要素がどのようにテストされ、data-testidが適用される場所を話し合います。

早期にQAに関与

開発プロセスの初めにQAエンジニアを巻き込むことで、data-testid属性が必要な要素を特定します。このコラボレーションは、コンポーネントがテストを念頭に設計されたことを保証します。

コンポーネントにdata-testid属性を追加

重要要素の特定

UI内のテストにおいて重要な要素を決定します。これには、ボタン、フォームの入力、リンク、およびテストが対話を行う動的コンテンツが含まれます。

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

// Playwrightでのdata-testidを使用したテスト
await page.click('[data-testid="submit-button"]');
await page.fill('[data-testid="username-input"]', 'testuser');



// Cypressでのdata-testidを使用したテスト
cy.get('[data-testid="submit-button"]').click();
cy.get('[data-testid="username-input"]').type('testuser');

テストの可読性を保持する

data-testidに意味的で説明的な値を使用してください。これによりテストの可読性を向上し、理解しやすくなります。

開発 workflow に data-testid を統合する

使用方法の標準化

プロジェクト内でdata-testidの使用に関するガイドラインや命名規則を作成してください。これによりコードベース内での一貫性を確保し、すべてのチームメンバーが跟従することがより容易になります。

コードレビュー

コードレビュー中にdata-testid属性が適切にと一致して使用されているかどうかを確認してください。意味的で必要なことを確認してください。

data-testid の使用するBest Practices

ハイフン化された名前を使用する: data-testidの値にハイフン化された名前またはsnake_caseの命名規則を好みます(例: submit-button, username_input)。これにより名前の一貫性と可読性を保ちます。
動的なデータを使用しない: data-testidの値に動的なデータを含めないでください。時間戳やIDのようなデータは変更される可能性があり、これにより選定器の信頼性を下げる可能性があります。
バランステストカバレッジ: 重要なUI要素にdata-testidを使用してテストを行うが、それを過剰に依存しないようにする。適切に他の選択子と結合することで、テストを完全に保ちます。

自動開発に影響を与える

自動化の安定性: data-testidが安定した選択子を提供しているため、自動化テストはより信頼性の高く、维护が容易になり、不确实なテストが減少します。
時間節約: テストのメンテナンス時間が減少し、QAチームは新しいテストを書くことと、テストカバレッジを改善することに集中できます。
改善された協力: 開発者とQAエンジニアがより効果的に協力できるように、data-testidの使用は簡単であり、各テストの意図を明確にする。

テストの自動化とメンテナンス

CI/CD統合: テストスイートを継続uous Integration/Continuous Deployment (CI/CD)パイプラインに統合します。これにより、自動化テストはコードの每一次のプッシュで実行され、アプリケーションの安定性を保証します。
監視と更新: アプリケーションが進化するたびにテストとdata-testidの使用を定期的に评审します。新しい機能が開発されるたびに新しいdata-testid属性を追加または更新します。

チームを教育する

トレーニング: チームにdata-testidを開発とテストで正しく使用する方法のトレーニングセッションや文書を提供します。
連続的な改善: あなたのチームからdata-testidの使用についてのフィードバックを奨励し、彼らの投稿に基づいてあなたのアPROachを精练してください。

どのようにこのアPROachを異なるフレームワークに適用するのか？

data-testidアPROachをSelenium、Playwright、Cypressなどの異なるテストフレームワークで実装することは、各ツールがDOMとのやり取りを理解すること、data-testid属性を使用して安定したおよび信頼性のあるテストスクリプトを作成する方法を理解することで行われます。これらのツールを使用してこのアPROachを実装する方法についての詳細なガイドを以下に示します。

1. Selenium

SeleniumはID、クラス、名前、XPathなどの位置子でWeb要素とやり取りすることができます。data-testidを使用することで、UIの視覚構造に依存しないより安定した選択子を作成することができます。例えば、ユーザー名のフィールド、パスワードのフィールド、および送信按钮があるログインフォームを考えてください。

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

Webアプリケーションに強力な自動化機能を提供している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のスyntaxとdata-testidを合わせると、非常に読むがやすく、維持しやすいテストスクリプトができます。
テストの安定性: data-testidの選定子を使用することで、UIの変更による破損を防ぐことができるため、テストはより信頼性が高まります。

一般的なbest practiceの実装

意味のある名前付け: あなたのdata-testid属性には説明的な名前を使用してください。例えば、data-testid="submit-button"はdata-testid="btn1"よりも説明的です。
一致性: あなたがアプリケーションでdata-testidを適用する方法を一致性を维持してください。これは一貫性のあるテストスクリプトを作成するのに役立ちます。
选择的な使用: テストに重要な要素にdata-testidを適用してください。HTMLに混乱を引き起こすのを避けるためにはそれを過剰に使用しないでください。
動的なデータを避ける: data-testid属性に時間スタンプやユニークIDのような動的値を含めないでください。これらのデータが変更されるとテストが失敗する可能性があります。

結論

: フロントエンド開発プロセスにdata-testidアプローチを実装することは、Selenium、Playwright、Cypressなどの様々なテストフレームワークで重要な利点を提供します。テストスクリプトの安定性、可読性、およびメンテナンス性を向上させ、より信頼性の高いテストとより効率的なQAプロセスを実現します。提供された例とbest practiceに従って、data-testidをあなたの workflowに簡単に統合し、产品质量を向上させることができます。

参考文献

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