Agent skill
webapp-testing-jp
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/webapp-testing-jp
SKILL.md
Webアプリケーション テスト支援スキル
概要
Webアプリケーションのテスト設計・実装を支援するスキルです。日本語テキスト検証、IME入力テスト、全角・半角混在処理など、日本語Webアプリ特有のテスト観点をカバーします。
テストの種類
| 種類 | ツール | 対象 |
|---|---|---|
| ユニットテスト | Vitest, Jest | 関数、コンポーネント単体 |
| 統合テスト | Vitest, Jest | 複数モジュールの連携 |
| E2Eテスト | Playwright | ブラウザ上のユーザー操作全体 |
日本語テキスト検証
全角・半角混在テスト
describe("全角・半角変換", () => {
test("全角英数字を半角に変換できる", () => {
expect(toHalfWidth("A B C123")).toBe("ABC123");
});
test("半角カタカナを全角に変換できる", () => {
expect(toFullWidthKatakana("カタカナ")).toBe("カタカナ");
});
test("全角・半角混在文字列を正しく処理する", () => {
expect(normalize("Testテスト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()の説明文は「〜すると〜される」の形式で統一- 正常系・異常系・境界値を明確に区別する
- テスト実行結果のログが日本語で読めるようにする
テスト設計時の確認事項
- 対象ブラウザ: テスト実行環境(Chromium / Firefox / WebKit)
- 入力パターン: 全角・半角・絵文字・サロゲートペア文字の考慮
- ロケール依存: 日付形式、通貨表示、ソート順の検証
- 文字数カウント:
String.lengthと[...str].lengthの違いに注意
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?