Open4
Playwright で遊ぶ
薄田達哉 / tatsuyasusukidaこのスクラップについて
このスクラップでは Playwright を使って Next.js アプリの E2E テストを書く過程を記録する。
薄田達哉 / tatsuyasusukidaプロジェクト作成
コマンド
npx create-next-app \
--typescript \
--tailwind \
--eslint \
--app \
--src-dir \
--import-alias "@/*" \
--use-npm \
nextjs-playwright
薄田達哉 / 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>
);
}
