本文へ移動
cccskills
無料GitHub で公開

e2e-playwright

Use this skill when writing end-to-end tests, browser automation, or verifying user flows in a real browser. Trigger words: E2E, Playwright, ブラウザテスト, ユーザーフロー, 結合テスト, シナリオテスト, ログインテスト, getByRole, expect.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

E2E テスト(Playwright)

いつ使うか

  • ログイン〜目的達成までのユーザーフローを通しで検証するとき。
  • フォーム送信・遷移・表示の結合的な確認が必要なとき。

やること

  • 役割/アクセシブルネームで要素を取る(getByRole/getByLabel)。CSS セレクタ依存を避ける。
  • ネットワーク待ちは await expect(...) の自動待機に任せる(固定 sleep 禁止)。
  • テストデータは各テストで独立に用意し、後始末する(他テストに依存しない)。
  • 認証が要るフローは storageState を使い回してログインを毎回しない。
  • 公式 webapp-testing スキル(_external/)があれば手順を参照。

守るルール

  • ✅ getByRole/getByLabel 中心のアクセシブルなセレクタ。
  • ✅ 自動待機(expect の retry)を使い、waitForTimeout を避ける。
  • ✅ テストは独立・再実行可能(順序非依存)。
  • ❌ 本番 DB に対して E2E を流さない(専用環境/シードを使う)。
  • ❌ セッション・秘密をテストコードにハードコードしない。

典型例(コード片)

// e2e/login.spec.ts
import { test, expect } from '@playwright/test';

test('ログインしてダッシュボードに到達', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('メールアドレス').fill('user@example.com');
  await page.getByLabel('パスワード').fill('correct-horse');
  await page.getByRole('button', { name: 'ログイン' }).click();
  await expect(page.getByRole('heading', { name: 'ダッシュボード' })).toBeVisible();
});

アンチパターン

  • page.waitForTimeout(3000) で待つ(不安定・遅い)。
  • .css-1a2b3c のような生成クラスをセレクタにする。
  • テスト同士が同じレコードを共有して順序依存になる。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

api-routes-hardening

無料日本語概要

Use this skill when creating or reviewing Next.js Route Handlers (app/api), adding rate limiting, input validation, or auth to API endpoints. Trigger words: API ルート, Route Handler, app/api, エンドポイント, レート制限, 入力検証, CORS, ヘッダー, 認証付き API, hardening.

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

atlas-search-vector

無料日本語概要

Use this skill when implementing full-text search, autocomplete, or vector/semantic search and RAG with MongoDB Atlas. Trigger words: 全文検索, あいまい検索, オートコンプリート, ベクトル検索, セマンティック検索, 類似検索, Atlas Search, $search, $vectorSearch, RAG, embedding.

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

auth-better-auth

無料日本語概要

Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

bootstrap

無料日本語概要

Use this skill when starting a new session, opening this project for the first time, or when you need to recall the project's tech stack, hard rules, and which other skills exist. Trigger words: セッション開始, このプロジェクト, 全体像, どのスキル, 何から, getting started, overview.

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

ci-github-actions

無料日本語概要

Use this skill when setting up or modifying CI pipelines, GitHub Actions workflows, or automated checks (lint, typecheck, test, build) for this project. Trigger words: CI, GitHub Actions, ワークフロー, パイプライン, 自動テスト, lint チェック, typecheck, ビルド検証, .github/workflows.

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

error-boundaries

無料日本語概要

Use this skill when handling runtime errors, adding error.tsx or not-found.tsx, designing fallback UI, or deciding what to surface to users vs logs. Trigger words: エラー処理, error.tsx, not-found, 例外, フォールバック, エラーバウンダリ, try catch, ユーザー向けエラー, ログ.

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

Akira-Papa のスキルをすべて見る

このスキルの問題を報告する