E2E testing with Playwright in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to launch a browser in Playwright.

NextJS

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.[1]();
  await browser.close();
})();

Drag options to blanks, or click blank then click option'

Ainit

Bstart

Copen

Dlaunch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' or 'open' which are not Playwright methods.

Trying to use 'init' which does not exist.

The launch method starts a new browser instance in Playwright.

2fill in blank

medium

Complete the code to navigate to the homepage URL in Playwright.

NextJS

const page = await browser.newPage();
await page.[1]('http://localhost:3000');

Drag options to blanks, or click blank then click option'

Agoto

BgoTo

Cnavigate

Dopen

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'goTo' with uppercase T which causes errors.

Using 'navigate' or 'open' which are not Playwright methods.

The correct method to navigate to a URL in Playwright is goto (all lowercase).

3fill in blank

hard

Fix the error in the assertion to check the page title.

NextJS

const title = await page.title();
expect(title).[1]('My Next.js App');

Drag options to blanks, or click blank then click option'

AtoBe

Bequal

Cequals

Dbe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'equal' or 'equals' which are not valid Jest matcher methods.

Using 'be' which is incomplete.

Playwright uses Jest-like assertions where toBe checks exact equality.

4fill in blank

hard

Fill both blanks to select a button by its role and click it.

NextJS

await page.getBy[1]('button', { name: '[2]' }).click();

Drag options to blanks, or click blank then click option'

ARole

BText

CLabel

DSelector

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getByText' which is a different method.

Using 'getByLabel' which is for form labels.

Use getByRole to select elements by role, and name matches the button text.

5fill in blank

hard

Fill all three blanks to write a test that launches browser, opens page, and checks title.

NextJS

test('homepage has correct title', async () => {
  const browser = await [1].launch();
  const page = await browser.[2]();
  await page.goto('http://localhost:3000');
  const title = await page.title();
  expect(title).[3]('Welcome to Next.js!');
  await browser.close();
});

Drag options to blanks, or click blank then click option'

Achromium

BnewPage

CtoBe

Dfirefox

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'firefox' without importing it.

Using 'page.launch()' which is invalid.

Using 'equal' instead of 'toBe' for assertion.

This test uses chromium.launch() to start the browser, newPage() to open a tab, and toBe to assert the title.

Practice

1. What is the main purpose of E2E testing in a Next.js application using Playwright?

easy

A. To check only the backend API responses

B. To verify CSS styles and layout only

C. To test individual React components in isolation

D. To test the entire user experience from start to finish

Solution

1. Step 1: Understand E2E testing scope

   E2E (end-to-end) testing simulates real user actions across the whole app, not just parts.

2. Step 2: Identify Playwright's role

   Playwright automates browser actions to test full user flows, like clicking and filling forms.

3. Final Answer:

   To test the entire user experience from start to finish -> Option D

4. Quick Check:

   E2E testing = full user experience [OK]

Hint: E2E tests cover full user flows, not just parts [OK]

Common Mistakes:

• Confusing E2E with unit or integration tests
• Thinking E2E tests only check backend APIs
• Assuming E2E tests verify only UI styles

2. Which of the following is the correct syntax to launch a browser and open a new page in Playwright for Next.js E2E testing?

easy

A. const browser = await chromium.launch(); const page = await browser.newPage();

B. const browser = await chromium.launch(); const page = browser.newPage();

C. const browser = playwright.launchChromium(); const page = browser.newPage();

D. const browser = await playwright.chromium.launch(); const page = await browser.newPage();

Solution

1. Step 1: Recall Playwright import and usage

   Playwright's browser types like chromium are imported directly, so you use chromium.launch().

2. Step 2: Check async usage and method names

   launch() and newPage() are async and must be awaited; syntax must match Playwright docs.

3. Final Answer:

   const browser = await chromium.launch(); const page = await browser.newPage(); -> Option A

4. Quick Check:

   Use 'await chromium.launch()' and 'await browser.newPage()' [OK]

Hint: Use 'await chromium.launch()' and 'await browser.newPage()' [OK]

Common Mistakes:

• Using 'playwright.chromium.launch()' instead of 'chromium.launch()'
• Missing 'await' keyword for async calls
• Calling 'newPage()' directly on Playwright instead of browser

3. Given this Playwright test snippet for a Next.js app:

await page.goto('http://localhost:3000');
await page.click('button#submit');
const text = await page.textContent('div.result');
console.log(text);

What will be logged if the button triggers showing 'Success' inside div.result?

medium

A. Error: selector not found

B. undefined

C. 'Success'

D. '' (empty string)

Solution

1. Step 1: Understand the test flow

   The test navigates to the page, clicks the submit button, then reads text from 'div.result'.

2. Step 2: Analyze expected page behavior

   Clicking the button triggers showing 'Success' inside 'div.result', so textContent returns 'Success'.

3. Final Answer:

   'Success' -> Option C

4. Quick Check:

   textContent('div.result') = 'Success' after click [OK]

Hint: Click triggers text update; textContent reads updated text [OK]

Common Mistakes:

• Assuming textContent returns undefined if element exists
• Expecting error without checking if selector exists
• Thinking textContent returns empty string if no text

4. You wrote this Playwright test for a Next.js app:

await page.goto('http://localhost:3000');
await page.click('button.submit');
await expect(page.locator('div.result')).toHaveText('Success');

But the test fails with timeout error. What is the most likely cause?

medium

A. The page.goto URL is incorrect

B. The selector 'button.submit' does not match any element

C. The assertion syntax is invalid

D. The test forgot to import 'expect' from Playwright

Solution

1. Step 1: Analyze failure reason

   Timeout usually means the expected text never appeared in 'div.result'.

2. Step 2: Check selector correctness

   If 'button.submit' selector is wrong (e.g., class is 'submit-btn'), click never happens, so text never changes.

3. Final Answer:

   The selector 'button.submit' does not match any element -> Option B

4. Quick Check:

   Wrong selector = no click = assertion timeout [OK]

Hint: Check selectors carefully; wrong selector blocks actions [OK]

Common Mistakes:

• Assuming assertion syntax is wrong without checking selectors
• Ignoring that click may fail silently if selector is wrong
• Not verifying page URL correctness

5. You want to write a Playwright test for a Next.js app that fills a login form and verifies the welcome message. Which sequence of steps is correct?

hard

A. Go to login page, fill username and password, click submit, wait for welcome message, assert text

B. Click submit button, fill username and password, go to login page, assert welcome message

C. Fill username and password, assert welcome message, click submit, go to login page

D. Assert welcome message, go to login page, fill username and password, click submit

Solution

1. Step 1: Understand logical user flow

   User must first visit login page, then fill form fields, then submit.

2. Step 2: Verify post-submit behavior

   After submitting, wait for welcome message to appear, then assert its text.

3. Final Answer:

   Go to login page, fill username and password, click submit, wait for welcome message, assert text -> Option A

4. Quick Check:

   Follow user steps in order: visit, fill, submit, check [OK]

Hint: Follow real user steps: open page, fill, submit, then check [OK]

Common Mistakes:

• Trying to assert before submitting the form
• Clicking submit before filling fields
• Checking messages before navigating to page