CoursePart 1 — JavaScript for PlaywrightLesson 1.18

Lesson 1.18Part 1 — JavaScript for Playwright

Mini Playwright Win ★

Automate a real Google search in ~10 lines. Your first working automation.

Lesson 1.18of 24

Finished!

Step 1

The idea

You've covered 17 lessons of JavaScript fundamentals. Variables, functions, loops, async/await, try/catch, destructuring — all of it.

Now you use all of it at once.

In this lesson you'll install Playwright, write your first real automation test, and watch a browser open automatically, go to Google, search for something, and verify the results — all in about 10 lines of code.

This is the moment everything clicks.

Step 2

See it run

Here's what you're building. Run through all three steps in order.

Step 1 — Create a project folder

Terminal

$ mkdir playwright-first-test
cd playwright-first-test

Step 2 — Install Playwright

Terminal

$ npm init playwright@latest

When prompted:

Output

Where to put your end-to-end tests? › tests
Add a GitHub Actions workflow? › false
Install Playwright browsers (can be done manually via 'npx playwright install')? › true

This installs Playwright and downloads the browsers. It takes 1–2 minutes. Let it finish.

Step 3 — Write your test

Delete everything in tests/example.spec.ts and replace it with this:

tests/google-search.spec.ts

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

test('Google search returns results', async ({ page }) => {
  // Navigate to Google
  await page.goto('https://www.google.com');

  // Find the search box and type
  await page.getByRole('combobox').fill('Playwright automation');

  // Press Enter to search
  await page.keyboard.press('Enter');

  // Wait for results and assert at least one heading is visible
  await expect(page.locator('h3').first()).toBeVisible();

  console.log('Search returned results ✓');
});

Step 4 — Run it

Terminal

$ npx playwright test

Output

Running 1 test using 1 worker

  ✓  1 [chromium] › tests/google-search.spec.ts:3 › Google search returns results (2.1s)

  1 passed (4.2s)

Want to see the browser as it runs? Add --headed:

Terminal

$ npx playwright test --headed

View a beautiful HTML report of the results:

Terminal

$ npx playwright show-report

Step 3

Now you try

Once the Google test passes, add a second test in the same file:

tests/google-search.spec.ts

test('page title contains Google', async ({ page }) => {
  await page.goto('https://www.google.com');
  await expect(page).toHaveTitle(/Google/);
});

Run npx playwright test again. Both tests should pass.

🎉Win!

If you see 2 passed — congratulations. You are no longer a beginner. You've written and run real end-to-end automation that opened a real browser and verified real behaviour. That's the job of a QA automation engineer.

Step 4

Why a tester cares

Let's read your test line by line with what you now know:

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

Destructuring import (Lesson 1.17) — pull out just test and expect from the Playwright package.

test('...', async ({ page }) => {

Arrow function (1.11) + async (1.15) + destructuring { page } (1.17) — the full pattern.

await page.goto('...');

await (1.15) + a method that returns a Promise (1.14). Waits for navigation to complete.

await page.getByRole('combobox').fill('...');

Finds the search box by its ARIA role (accessibility), then fills it. await ensures it's done before moving on.

await page.keyboard.press('Enter');

Simulates a keyboard press. await waits for the navigation triggered by Enter to complete.

await expect(page.locator('h3').first()).toBeVisible();

Comparison (1.6) — asserts a result heading is visible. If it's not, this line throws and the test FAILS.

Every line maps to something you learned. None of it is magic.

Recap

3 key points

1npm init playwright@latest installs Playwright and its browsers in one command.
2npx playwright test runs all .spec.ts files. --headed shows the browser window.
3Every concept from Part 1 is in your test: imports, async/await, destructuring, assertions.

Object destructuring