5. Your First Playwright Test

What you are about to do. Create a Playwright project, run the two example tests it comes with, and read the report. Do this lesson with your terminal open. Every command here was run on Windows against Playwright 1.64. You need Node set up first; the Set up your machine lesson in the Welcome module, before chapter 1, covers that.

1. Create the project. In your terminal, make a new folder, move into it, and run the Playwright installer:

mkdir my-first-tests
cd my-first-tests
npm init playwright@latest

It asks four questions. Use the arrow keys and Enter:

• TypeScript or JavaScript? Choose JavaScript. That is the language this course teaches. Many teams use TypeScript, which is JavaScript with type labels added, and you will meet it in Act III.
• Where to put your end-to-end tests? Press Enter to accept tests.
• Add a GitHub Actions workflow? Type n for now (the default is Yes, so don't just press Enter). That is for running tests on a server; chapter 17 covers it.
• Install Playwright browsers? Answer Y. This downloads Chromium, Firefox and WebKit (the engine behind Safari). It is a few hundred MB, so give it a few minutes.

2. Look at what it made. Open the folder in VS Code (code .):

• tests/example.spec.js holds two example tests. A spec file is a file of tests.
• playwright.config.js holds the settings: where tests live, which browsers to use, and what report to produce.
• package.json lists the project's libraries. @playwright/test is the one that matters.
• node_modules/ is the downloaded libraries. Never edit it.

3. Run the tests.

npx playwright test

The example tests open playwright.dev, so you need an internet connection. You will see 6 passed: two tests, each run in three browsers, because the config lists Chromium, Firefox and WebKit as separate projects. The browsers run headless, with no window, which is why you didn't see anything open. To run in one browser only, use npx playwright test --project=chromium.

4. Read the report. Run npx playwright show-report. A page opens in your browser listing every test, how long it took, and every step inside it. When a test fails, this is the first place you look. Playwright opens this report on its own after a failed run, and the terminal then seems to hang; it is waiting for you to press Ctrl+C in the terminal, which stops the report server.

5. Watch it work. Run npx playwright test --ui. UI mode opens a window where you can run one test at a time and step through each action with a screenshot of the page at that moment. If you only try one thing in this lesson, try this.

6. Read the test. The box below is tests/example.spec.js, exactly as generated. Read it line by line. test(...) names a test. page.goto opens a URL. page.getByRole('link', { name: 'Get started' }) finds the link the way a user would, by what it is and what it says. expect(...) is the check, the "expected result" column of your manual test case. Every word of it is explained over the next few chapters.

A word on codegen. npx playwright codegen https://playwright.dev opens a browser and writes test code as you click. It is a good way to see how actions turn into code. But a recorder writes down what you did, not what you meant to check, and that is the same trap AI-written tests fall into. Treat its output as a first draft you review, never as a finished test.

If something goes wrong:

• Executable doesn't exist means the browsers didn't download. Run npx playwright install.
• Only the Chromium tests pass means only Chromium was installed. Run npx playwright install to add the other two browsers.
• running scripts is disabled on this system in PowerShell: see the fix in Set up your machine, or use Command Prompt.
• Installs fail at the office: a corporate proxy is the usual cause. Try from home, or ask a developer for the npm proxy setting.