├── .gitignore
├── README.md
├── package.json
├── pages
├── _app.js
├── api
│ └── reviews.js
└── index.js
├── public
├── lord-of-the-rings.jpg
└── the-intelligent-investor.jpg
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 | public/mockServiceWorker.js
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 |
34 | # vercel
35 | .vercel
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Playwright Example
2 |
3 | [Playwright](https://playwright.dev/) enables reliable end-to-end testing for modern web apps.
4 |
5 | This repo was created as a starting point so you can follow along the [Testing Next.js using Playwright](https://frontend-digest.com/using-playwright-to-test-next-js-applications-80a767540091?source=friends_link&sk=033775ad20645fa607c27d73c0dd561b) article.
6 |
7 | If you want to jump straight to the finished setup, check out the [completed-setup](https://github.com/dferber90/nextjs-playwright-example/tree/completed-setup) branch.
8 |
9 | ## Deploy your own
10 |
11 | Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
12 |
13 | [](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-playwright&project-name=with-playwright&repository-name=with-playwright)
14 |
15 | ## How to use
16 |
17 | Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
18 |
19 | ```bash
20 | npx create-next-app --example with-playwright with-playwright-app
21 | # or
22 | yarn create next-app --example with-playwright with-playwright-app
23 | ```
24 |
25 | Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "with-playwright",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "dev": "next",
6 | "build": "next build",
7 | "start": "next start"
8 | },
9 | "license": "MIT",
10 | "dependencies": {
11 | "msw": "^0.29.0",
12 | "next": "latest",
13 | "react": "^17.0.1",
14 | "react-dom": "^17.0.1"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | export default function App({ Component, pageProps }) {
2 | return ;
3 | }
4 |
--------------------------------------------------------------------------------
/pages/api/reviews.js:
--------------------------------------------------------------------------------
1 | // Not actually used during tests as the requests to this route are mocked
2 | export default (req, res) => {
3 | res.status(200).json([
4 | {
5 | id: '10333292-7ca1-4361-bf38-b6b43b90cb11',
6 | author: 'Mellenn Domanais',
7 | text:
8 | 'Great read. Definitely earned its title of being the "bible of investing".',
9 | },
10 | ])
11 | }
12 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export default function Home({ book }) {
4 | const [reviews, setReviews] = useState(null);
5 |
6 | const handleGetReviews = () => {
7 | fetch("/api/reviews")
8 | .then((res) => res.json())
9 | .then(setReviews);
10 | };
11 |
12 | return (
13 |
14 |
15 |
{book.title}
16 |
{book.description}
17 |
18 | {reviews && (
19 |
20 | {reviews.map((review) => (
21 | -
22 |
{review.text}
23 | {review.author}
24 |
25 | ))}
26 |
27 | )}
28 |