E2E testing with Playwright in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result of this Playwright snippet?

Consider this Playwright test code for a Next.js app. What will be the test result?

NextJS

import { test, expect } from '@playwright/test';

test('homepage has correct title', async ({ page }) => {
  await page.goto('http://localhost:3000');
  const title = await page.title();
  expect(title).toBe('My Next.js App');
});

A Test passes if the page title is exactly 'My Next.js App'

B Test fails because page.title() is not a function

C Test passes regardless of the page title content

D Test throws a runtime error due to missing await on page.goto

💡 Hint

Check the Playwright API for getting the page title and the use of await.

The page.title() method returns the page title as a string. The test expects it to be exactly 'My Next.js App'. If it matches, the test passes. The await is correctly used on page.goto and page.title().

❓ locator

intermediate

Which locator correctly selects the submit button by role and accessible name?

You want to select a submit button with the accessible name 'Send' in a Playwright test. Which locator is correct?

A page.getByRole('button', { name: 'Send' })

B page.locator('button:has-text("Send")')

C page.locator('button[name="Send"]')

D page.getByText('Send')

💡 Hint

Use semantic roles and accessible names for best locator practice.

getByRole with role 'button' and name 'Send' is the best practice locator. Option A selects buttons containing text 'Send' but may match partial or nested text. Option A looks for an attribute 'name' which is not standard for buttons. Option A selects any element with text 'Send' which may be ambiguous.

❓ assertion

advanced

Which assertion correctly waits for a success message to appear?

You want to assert that a success message with text 'Saved successfully' appears after submitting a form. Which assertion is correct?

NextJS

await page.click('button[type=submit]');

A expect(await page.locator('text=Saved successfully').isVisible()).toBe(true);

B await expect(page.locator('text=Saved successfully')).toBeVisible();

C await expect(page.locator('text=Saved successfully')).toHaveText('Saved successfully');

D expect(page.locator('text=Saved successfully')).toBeVisible();

💡 Hint

Use Playwright's built-in waiting assertions to handle dynamic content.

Option B uses await expect(locator).toBeVisible() which waits for the element to appear and be visible. Option B awaits isVisible() but does not wait for the element to appear, risking flaky tests. Option B checks text but does not wait for visibility. Option B misses await and will not wait properly.

🔧 Debug

advanced

Why does this Playwright test intermittently fail with a timeout?

Review this test snippet and identify the cause of intermittent timeout failures.

NextJS

test('login test', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await page.fill('#username', 'user1');
  await page.fill('#password', 'pass1');
  await page.click('button[type=submit]');
  await expect(page.locator('#welcome')).toBeVisible({ timeout: 2000 });
});

A The test does not wait for navigation after clicking submit

B The selector '#welcome' is invalid and causes the timeout

C Missing await before page.click causes the test to fail

D The timeout of 2000ms is too short for the welcome element to appear after login

💡 Hint

Consider network delays and UI rendering time after login.

The 2000ms timeout for the welcome element to appear may be too short if the login process or page rendering takes longer. Increasing the timeout or waiting for navigation explicitly can fix this. The selector '#welcome' is valid, and awaits are correctly used.

❓ framework

expert

How to configure Playwright test to run only on Chromium with headless mode disabled?

You want to run Playwright tests only on Chromium browser and see the browser UI (headless mode off). Which configuration snippet in playwright.config.ts achieves this?

A

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: { browserName: 'chromium', headless: false }
});

B

export default {
  browsers: ['chromium'],
  headless: false
};

C

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], headless: false }
    }
  ]
});

D

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium', headless: true }
    }
  ]
});

💡 Hint

Check Playwright's project configuration and device presets.

Option C correctly defines a project named 'chromium' using the Desktop Chrome device preset and sets headless: false to show the browser UI. Option C is invalid syntax. Option C sets use globally but does not define projects, which may run on all browsers. Option C sets headless: true which disables UI.