Posted on Oct 15 • Originally published at ray.run Supercharge your Next.js app testing with Playwright – a tool for automating Chromium, Firefox, and WebKit browsers. Whether you're gearing up for End-to-End (E2E) or Integration tests, Playwright offers a seamless experience across all platforms. In this guide, I will walk you through setting up and running your first Playwright E2E test for a Next.js application.If you're eager to dive right in, the quickest way to kick things off is by leveraging the create-next-app with the with-playwright example:Then run npm run test:e2e to run the tests. Continue reading to learn how to setup Playwright in an existing Next.js project.For those of you with an existing NPM project and would prefer a manual setup, no worries, you're covered! Begin by installing the @playwright/test package:Now, update your package.json scripts to incorporate Playwright:Imagine you have two Next.js pages set up as shown:It's time to ensure your navigation operates flawlessly. Here's how to craft a test for it:Note: Use page.goto('/') and have "baseURL": "http://ray.run" set in the playwright.config.ts file for concise code.Remember, Playwright tests the actual Next.js app, so the server should be up and running. It is also a good idea to test against production build to mimic real-world behavior.Start your Next.js server:Then in another terminal, run your Playwright tests:With Playwright's webServer feature, you can let it handle starting the development server and ensuring it's ready for action.Just add this configration to your playwright.config.ts file:Now you can run your tests without having to start the development server manually:When running on CI, Playwright defaults to headless mode. To have all dependencies in place, execute:There is not a lot of documentation on this yet, but Vercel team is working on an experimental test mode for Playwright. This mode will allow you to intercept requests and mock responses. This is useful for testing API routes and other server-side code.Suppose you have an API route at /api/hello:This route is called using getServerSideProps:Now you want to write a test that verifies that the page renders the name returned by the API.The latter asserts that the page renders the name returned by the API. However, using the experimental test proxy, you can intercept the request to /api/hello and mock the response.First, you need to install msw to mock responses:Then you need to change your import to next/experimental/testmode/playwright/msw:Now you can mock the response:You can also use the experimental test mode to test the Next.js app/ router.Define a route:Fetch the data in your page:Now you can test the page:It appears that when you are running tests in the experimental test mode, you may get the following error:This happens when you try to access the web server directly, outside of the test. As far as I can tell, there is no way to access the Next.js web server directly when running in the experimental test mode. You can only access it by running a Playwright test.In closing, integrating Playwright into your Next.js workflow ensures a robust, tested, and reliable application. If this is your first time using Playwright, you should familiarize with Trace viewer next as it will help you debug your tests. Now, go ahead and craft tests that leave no stone unturned. Happy testing!Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Leandro Nuñez - Aug 15 Medea - Jul 25 pnzrr - Aug 16 Ayotunde Ogele - Aug 15 Once suspended, lucgagan will not be able to comment or publish posts until their suspension is removed. Once unsuspended, lucgagan will be able to comment and publish posts again. Once unpublished, all posts by lucgagan will become hidden and only accessible to themselves. If lucgagan is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Luc Gagan. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag lucgagan: lucgagan consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging lucgagan will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.