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.