E2E testing with Playwright in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to launch a browser in Playwright.

Svelte

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

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

Aopen

Blaunch

Cstart

Dinit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' or 'open' instead of 'launch' causes errors.

The launch() method starts a new browser instance in Playwright.

2fill in blank

medium

Complete the code to create a new page in the browser.

Svelte

const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.[1]();

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

AmakePage

BcreatePage

CnewPage

DopenPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createPage' or 'openPage' are not valid Playwright methods.

The newPage() method creates a new tab or page in the browser context.

3fill in blank

hard

Fix the error in the code to navigate to a URL.

Svelte

await page.[1]('https://example.com');

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

Avisit

BgoTo

Cnavigate

Dgoto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'goTo' or 'navigate' causes runtime errors.

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

4fill in blank

hard

Fill both blanks to wait for an element and click it.

Svelte

await page.[1]('button#submit');
await page.[2]('button#submit');

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

AwaitForSelector

Bclick

CwaitForLoadState

Dpress

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'waitForLoadState' instead of 'waitForSelector' waits for page load, not element.

First, waitForSelector() waits for the button to appear, then click() clicks it.

5fill in blank

hard

Fill all three blanks to assert the page title contains expected text.

Svelte

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

test('page title test', async ({ page }) => {
  await page.goto('https://example.com');
  const title = await page.[1]();
  [2](title).[3]('Example Domain');
});

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

Atitle

Bexpect

CtoContain

DgetTitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getTitle' instead of 'title' causes errors.

Using 'toBe' instead of 'toContain' checks exact match, not substring.

Use title() to get the page title, then expect(title).toContain() to check the text.