Lesson 17 of 17

Quiz · 20 min

Playwright on your own computer

From the practice browser to your computer

Everything you wrote in this course is real Playwright code. The locators, the actions, the assertions, the hooks, the page objects, the fixtures, and the routes work the same way on your own computer. This lesson shows you how to run them there.

What is different

The practice browser is a small simulation. It runs your test code against three sample apps, so a lesson can show you every step and check your work. A real Playwright project runs your tests in real browsers, against your own app. That brings more power, and a few more things to know.

Topic	The practice browser	A real project
Browsers	One simulated page	Chromium, Firefox, and WebKit
What you test	Three sample apps	Your own app, at an address
Language	JavaScript	JavaScript or TypeScript
Screenshots, video, traces	No	Yes
Several tabs, file upload, device emulation	No	Yes
Time for an assertion	2 seconds	5 seconds, and you can change it

Install

You need Node.js. The installation page of Playwright lists the versions that it supports. Make a folder for the project, and run this inside it:

npm init playwright@latest

The command asks four questions: JavaScript or TypeScript, the name of the folder for the tests, whether to add a GitHub Actions workflow, and whether to install the browsers. Then it writes a config file, an example test in the tests folder, and package.json. Run the example test to see that all is well:

npx playwright test

The config file

The file playwright.config.js holds the settings for all tests. A typical file looks like this:

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

Read the settings one by one.

testDir is the folder with the tests.
fullyParallel runs tests of the same file at the same time too. Tests must not depend on each other. Yours do not.
forbidOnly fails the run when a test.only is left in the code. On the CI server, the variable CI is set.
retries runs a failed test again. A test that fails and then passes is reported as flaky. Use retries on the CI server, and look at every flaky test.
reporter: 'html' writes a report that you can open in the browser.
use.baseURL is the address of your app, so that page.goto('/') works.
use.trace: 'on-first-retry' records a trace when a test is run again after a failure.
projects runs the tests in each browser.
webServer starts your app before the tests, and waits until the address answers.

Run the tests

Command	What it does
`npx playwright test`	Runs all tests, in headless browsers.
`npx playwright test tests/login.spec.js`	Runs one file.
`npx playwright test -g "sign in"`	Runs the tests with `sign in` in the title.
`npx playwright test --project=chromium`	Runs in one browser only.
`npx playwright test --headed`	Shows the browser window.
`npx playwright test --ui`	Opens UI mode, to watch, step back, and run again.
`npx playwright test --debug`	Opens the Playwright Inspector, to go step by step.
`npx playwright test --last-failed`	Runs only the tests that failed in the last run.

Read the report and the trace

After a run, the HTML report shows each test with its steps and its errors. It opens by itself when a test fails. To open it again, run:

npx playwright show-report

A trace is a recording of a test. For each step it keeps the page before and after, the network calls, and the console. You can click a step and look at the page as it was, with the developer tools. Open a trace file or a trace from the report with:

npx playwright show-trace trace.zip

Traces are the best tool to understand a test that failed on a server, where nobody watched.

Write tests faster with codegen

npx playwright codegen https://example.com

This opens a browser and a window with code. When you click in the browser, Playwright writes the steps. It chooses locators like the ones you learned, with roles and labels. Use it to get a first draft or to find a locator. Then rewrite the draft: give each test a name, and add assertions, because the recording does not know what must be true.

Run on a server

On a CI server, install the browsers and their system packages first:

npx playwright install --with-deps

Then run npx playwright test, and keep the report and the traces as files of the run, so that you can open them when a test fails. A later course in this path shows how to do this with GitHub Actions.

Check what you know

Nine questions follow. You need 70 percent to pass.

Question 1 of 9

Which command makes a new Playwright project?

npm run playwrightnpx playwright newnpm init playwright@latestnode playwright.js

Question 2 of 9

You want to watch the browser window while a test runs. Which option do you add to npx playwright test?

--headed--visible--window--watch

Question 3 of 9

A test fails on the CI server. You cannot make it fail on your computer. What gives you the most detail about the failed run?

A longer test timeout.More retries.A trace, with the setting trace: 'on-first-retry'.A fixed wait before each click.

Question 4 of 9

What does baseURL in the use part of the config do?

It starts the server of your app.It makes page.goto('/') open that address, so that a test needs only the path.It tells Playwright where the tests are.It sets the browser.

Question 5 of 9

Why do many teams set forbidOnly: !!process.env.CI?

To run the tests faster on the server.To turn off retries on the server.To make the report smaller.To fail the run when someone forgot a test.only in the code, so that the server does not skip most tests.

Question 6 of 9

What are the default time limits of Playwright Test, in a real project?

Thirty seconds for a test, and five seconds for an assertion.Five seconds for a test, and thirty seconds for an assertion.No limits.Two seconds for each.

Question 7 of 9

Which command runs only the tests that have sign in in their title?

npx playwright test --only "sign in"npx playwright test -g "sign in"npx playwright test sign innpx playwright filter "sign in"

Question 8 of 9

You run npx playwright codegen https://example.com, click through a page, and copy the code that it writes. What must you do before you trust it as a test?

Nothing. The code is a finished test.Read it, give the test a good name, and add assertions that state what must be true.Delete all locators.Run it one time on a different computer.

Question 9 of 9

Which of these can real Playwright do that the practice browser in these lessons cannot do? Pick all that apply.

Choose all answers that apply.

Take a screenshot of the page.Run a test in Firefox and WebKit as well as Chromium.Use getByRole and toHaveText.Open a second tab and work with a file upload.

Answer every question to check.