E2E testing with Playwright in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is E2E testing?

E2E (End-to-End) testing checks if the whole app works as expected from the user's point of view. It tests all parts together, like clicking buttons and loading pages.

beginner

What is Playwright used for in testing?

Playwright is a tool that automates browsers to run E2E tests. It can open pages, click buttons, fill forms, and check results automatically.

intermediate

How do you start a Playwright test in Next.js?

You write a test file using Playwright's test functions. You open the page with `page.goto()`, interact with elements, and use assertions to check results.

intermediate

Why use selectors like `data-testid` in Playwright tests?

Selectors like `data-testid` are stable and do not change often. They help tests find elements reliably without breaking when UI changes.

beginner

What does a passing Playwright test report show?

It shows which tests ran and passed. If all tests pass, it means the app works as expected for those scenarios.

What does E2E testing primarily verify?

A The entire app works from user actions

B Only the backend logic

C Individual functions in code

D The app's database schema

E2E testing checks the whole app flow as a user would experience it.

Which Playwright method opens a web page in a test?

A page.goto()

B page.open()

C browser.launch()

D test.start()

Use page.goto() to navigate to a URL in Playwright tests.

Why prefer `data-testid` selectors in tests?

A They are visible to users

B They change often with UI updates

C They are faster to type

D They are stable and do not affect UI

`data-testid` attributes are stable and do not affect the user interface.

What does a failed assertion in Playwright indicate?

A The test passed successfully

B The test file is missing

C The app did not behave as expected

D The browser crashed

A failed assertion means the app did not meet the expected condition.

Which command runs Playwright tests in a Next.js project?

A next dev

B npm run test:e2e

C npm start

D playwright open

Usually, `npm run test:e2e` runs Playwright tests if configured in package.json.

Explain how to write a simple E2E test with Playwright for a Next.js app.

Think about the steps a user takes and how to automate them.

Describe why stable selectors are important in E2E testing and how to implement them.

Consider what happens if UI changes but tests still need to work.