Zenn
Open4

Playwright で遊ぶ

Next.js
Test
Playwright
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

このスクラップについて

このスクラップでは Playwright を使って Next.js アプリの E2E テストを書く過程を記録する。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

プロジェクト作成

コマンド
npx create-next-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*" \
  --use-npm \
  nextjs-playwright
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

テスト対象を作る

コマンド
mkdir src/app/send
touch src/app/send/page.tsx
src/app/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
src/app/page.tsx
export default function Home() {
  return (
    <main className="container mx-auto px-3">
      <h1 className="mt-3 mb-3 text-3xl">Home</h1>
      <form method="GET" action="/send">
        <div className="mb-3">
          <label htmlFor="subject" className="block mb-1">
            Subject
          </label>
          <input
            type="text"
            name="subject"
            id="subject"
            className="border border-gray-400 p-1"
          />
        </div>
        <div className="mb-3">
          <label htmlFor="content" className="block mb-1">
            Content
          </label>
          <textarea
            rows={10}
            name="content"
            id="content"
            className="border border-gray-400 p-1"
          />
        </div>
        <button
          type="submit"
          className="inline-block border border-gray-400 px-3 py-1"
        >
          Submit
        </button>
      </form>
    </main>
  );
}
src/app/send/page.tsx
import Link from "next/link";

export default function Send() {
  return (
    <main className="container mx-auto px-3">
      <h1 className="mt-3 mb-3 text-3xl">Send</h1>
      <Link href="/" className="inline-block border border-gray-400 px-3 py-1">
        Back to Home
      </Link>
    </main>
  );
}


http://localhost:3000/


http://localhost:3000/send