webapp-testing-jp

name	webapp-testing-jp
description	Simplified Japanese web application testing skill covering unit tests, E2E tests, integration tests, Japanese text validation, IME input testing, and naming conventions. Triggers on requests for Webテスト, テスト自動化, E2Eテスト, 日本語テスト, Japanese web testing.

Webアプリケーション テスト支援スキル

概要

Webアプリケーションのテスト設計・実装を支援するスキルです。日本語テキスト検証、IME入力テスト、全角・半角混在処理など、日本語Webアプリ特有のテスト観点をカバーします。

テストの種類

種類	ツール	対象
ユニットテスト	Vitest, Jest	関数、コンポーネント単体
統合テスト	Vitest, Jest	複数モジュールの連携
E2Eテスト	Playwright	ブラウザ上のユーザー操作全体

日本語テキスト検証

全角・半角混在テスト

describe("全角・半角変換", () => {
  test("全角英数字を半角に変換できる", () => {
    expect(toHalfWidth("Ａ Ｂ Ｃ１２３")).toBe("ABC123");
  });

  test("半角カタカナを全角に変換できる", () => {
    expect(toFullWidthKatakana("ｶﾀｶﾅ")).toBe("カタカナ");
  });

  test("全角・半角混在文字列を正しく処理する", () => {
    expect(normalize("Ｔｅｓｔテスト123")).toBe("Testテスト123");
  });
});

文字コードテスト

describe("文字コード処理", () => {
  test("UTF-8の日本語文字列を正しく処理する", () => {
    const text = "日本語テスト文字列🎌";
    expect(processText(text)).toHaveLength(10);
  });

  test("Shift_JISからUTF-8への変換が正しい", () => {
    const sjisBuffer = encodeShiftJIS("日本語");
    expect(decodeToUTF8(sjisBuffer)).toBe("日本語");
  });

  test("サロゲートペア文字を正しく扱う", () => {
    const text = "𠮷野家"; // 𠮷はサロゲートペア
    expect([...text]).toHaveLength(3);
  });
});

日本語バリデーション

describe("日本語入力バリデーション", () => {
  test("電話番号の形式を検証する", () => {
    expect(isValidPhoneNumber("03-1234-5678")).toBe(true);
    expect(isValidPhoneNumber("090-1234-5678")).toBe(true);
    expect(isValidPhoneNumber("0120-123-456")).toBe(true);
    expect(isValidPhoneNumber("12345")).toBe(false);
  });

  test("郵便番号の形式を検証する", () => {
    expect(isValidPostalCode("123-4567")).toBe(true);
    expect(isValidPostalCode("1234567")).toBe(true);
    expect(isValidPostalCode("123-456")).toBe(false);
  });

  test("全角カタカナのみを許可する", () => {
    expect(isFullWidthKatakana("カタカナ")).toBe(true);
    expect(isFullWidthKatakana("ｶﾀｶﾅ")).toBe(false);
    expect(isFullWidthKatakana("かたかな")).toBe(false);
  });
});

IME入力テスト

変換確定前後の挙動

describe("IME入力処理", () => {
  test("composition中はバリデーションを実行しない", async ({ page }) => {
    const input = page.locator("#name-input");

    // IME入力開始（compositionstart）
    await input.dispatchEvent("compositionstart");
    await input.fill("にほんご");
    // 変換確定前はエラー表示されないことを確認
    await expect(page.locator(".error-message")).not.toBeVisible();

    // IME変換確定（compositionend）
    await input.dispatchEvent("compositionend");
    // 確定後にバリデーションが走ることを確認
    await expect(input).toHaveValue("にほんご");
  });
});

Composition Events のテスト観点

イベント	テスト内容
compositionstart	バリデーションの一時停止
compositionupdate	変換候補表示中の挙動
compositionend	確定後のバリデーション実行
変換キャンセル	Escキーによる入力取消の処理

ツール設定

Playwright（E2Eテスト）

// playwright.config.ts
export default defineConfig({
  use: {
    locale: "ja-JP",
    timezoneId: "Asia/Tokyo",
  },
});

Vitest（ユニット・統合テスト）

// vitest.config.ts
export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
  },
});

テストケース日本語命名規則

命名のルール

// describe: 「テスト対象」を記述
describe("郵便番号入力フォーム", () => {

  // test: 「条件 → 期待結果」の形式
  test("正しい形式の郵便番号を入力すると住所が自動補完される", () => { });
  test("不正な形式の場合はエラーメッセージが表示される", () => { });
  test("ハイフンなしの7桁数字でも受け付ける", () => { });
});

命名のポイント

• test() の説明文は「〜すると〜される」の形式で統一
• 正常系・異常系・境界値を明確に区別する
• テスト実行結果のログが日本語で読めるようにする

テスト設計時の確認事項

1. 対象ブラウザ: テスト実行環境（Chromium / Firefox / WebKit）
2. 入力パターン: 全角・半角・絵文字・サロゲートペア文字の考慮
3. ロケール依存: 日付形式、通貨表示、ソート順の検証
4. 文字数カウント: String.length と [...str].length の違いに注意