Introduction: What Is a Playwright Hello World Test?
A Playwright Hello World test is a small first automation test that helps beginners understand how Playwright opens a browser, navigates to a webpage, validates something, and reports the result.
If you are completely new to Playwright, this is the ideal starting point before moving into larger automation frameworks.
A typical playwright hello world test contains four basic activities:
- Start a Playwright test.
- Open a webpage.
- Perform a simple validation.
- Report whether the test passed or failed.
For example:
import { test, expect } from ‘@playwright/test’;
test(‘Playwright Hello World test’, async ({ page }) => {
await page.goto(‘https://example.com’);
await expect(page).toHaveTitle(/Example Domain/);
console.log(‘Hello World from Playwright!’);
});
This simple script introduces several important Playwright concepts: the test runner, TypeScript, the page fixture, navigation, assertions, and asynchronous commands.
For QA Automation Engineers and SDETs, learning this Playwright first test example gives you the foundation for more advanced topics such as locators, Page Object Model, fixtures, API testing, authentication, parallel execution, and CI/CD.
What You Need Before Writing Your First Playwright Test
Before creating a playwright hello world test for beginners, install the following:
| Requirement | Purpose |
| Node.js | Runs the Playwright project |
| npm | Installs Playwright packages |
| VS Code or another IDE | Writes TypeScript tests |
| Basic JavaScript/TypeScript | Helps understand test syntax |
| Terminal | Runs Playwright commands |
You do not need previous Selenium experience.
If you know basic programming concepts such as variables, functions, and async/await, you can start learning Playwright.
Installing Playwright and Creating a Project
Step 1: Check Node.js
Open a terminal:
node –version
npm –version
If both commands return version numbers, Node.js and npm are available.
Step 2: Create a Playwright Project
Create a new folder:
mkdir playwright-hello-world
cd playwright-hello-world
Initialize Playwright:
npm init playwright@latest
During setup, select:
TypeScript
tests
The exact prompts can vary between Playwright versions.
You can also install the required browsers afterward:
Step 3: Verify Installation
Run:
npx playwright test
If the generated example tests execute successfully, your Playwright environment is ready.
Understanding the Playwright Project Structure
A newly created project generally looks similar to:
playwright-hello-world/
│
├── tests/
│ └── example.spec.ts
│
├── playwright.config.ts
├── package.json
├── package-lock.json
└── tsconfig.json
tests/
This directory contains your automated test files.
.spec.ts
A file such as:
hello-world.spec.ts
contains TypeScript Playwright tests.
playwright.config.ts
This file controls test configuration such as browsers, base URL, retries, screenshots, tracing, and reporters.
package.json
Contains project dependencies and npm scripts.
For beginners, the most important files are the test file and playwright.config.ts.
Creating the Playwright Hello World Test File
Create:
tests/hello-world.spec.ts
Add this code:
import { test, expect } from ‘@playwright/test’;
test(‘Playwright Hello World test’, async ({ page }) => {
await page.goto(‘https://example.com’);
await expect(page).toHaveTitle(/Example Domain/);
console.log(‘Hello World from Playwright!’);
});
This is a complete runnable Playwright Hello World TypeScript example.
You can copy it directly into a Playwright project.
The Simplest Playwright Hello World Test
Here is the complete example again:
import { test, expect } from ‘@playwright/test’;
test(‘Playwright Hello World test’, async ({ page }) => {
await page.goto(‘https://example.com’);
await expect(page).toHaveTitle(/Example Domain/);
console.log(‘Hello World from Playwright!’);
});
Now let’s understand every line.
Playwright Hello World Test: Line-by-Line Explanation
1. Import test and expect
import { test, expect } from ‘@playwright/test’;
test creates and defines a test.
expect performs assertions.
You can think of them as:
test → Defines what you want to test
expect → Checks whether the expected result occurred
2. Create the Test
test(‘Playwright Hello World test’, async ({ page }) => {
The first argument is the test name.
The second argument is an asynchronous function containing the test steps.
The page object is a Playwright fixture representing the browser page used by the test.
3. Navigate to a Website
await page.goto(‘https://example.com’);
page.goto() navigates the current page to the specified URL.
The await keyword tells JavaScript to wait for the navigation operation.
4. Validate the Page Title
await expect(page).toHaveTitle(/Example Domain/);
This is an assertion.
It checks whether the webpage title matches Example Domain.
If it matches, the assertion passes.
If it does not match, the test fails.
This is important because automation testing is not simply about opening a browser. A useful test must verify expected behavior.
5. Print Hello World
console.log(‘Hello World from Playwright!’);
This writes a message to the terminal output.
It demonstrates that your test executed the expected code.
Hello World Test vs Test Case vs Locator vs Assertion
Beginners often confuse these terms.
| Concept | Meaning | Example |
| Test | Complete automated scenario | Login test |
| Test case | Requirement/scenario being verified | Verify valid login |
| Browser | Browser application | Chromium |
| Context | Isolated browser environment | New browser session |
| Page | Browser tab | Login page |
| Locator | Identifies an element | getByRole() |
| Action | Interaction | click() |
| Assertion | Validates expected result | expect() |
A Playwright Hello World test normally starts with navigation and an assertion. As you learn more, you add locators and actions.
Running the Playwright Hello World Test
Run all tests:
npx playwright test
Run only your Hello World file:
npx playwright test tests/hello-world.spec.ts
A successful test should produce output indicating that the test passed.
The console message:
Hello World from Playwright!
should also appear in the test output.
Running Playwright in Headed Mode
By default, Playwright tests normally run in headless mode.
That means the browser runs without showing a visible browser window.
For beginners, headed mode can make the test easier to understand.
Run:
npx playwright test tests/hello-world.spec.ts –headed
You should see the browser open while the test runs.
This is particularly useful when learning navigation, locators, forms, and browser interactions.
Running the Hello World Test Across Browsers
Playwright supports Chromium, Firefox, and WebKit.
You can configure multiple browser projects:
import { defineConfig, devices } from ‘@playwright/test’;
export default defineConfig({
projects: [
{
name: ‘chromium’,
use: { …devices[‘Desktop Chrome’] }
},
{
name: ‘firefox’,
use: { …devices[‘Desktop Firefox’] }
},
{
name: ‘webkit’,
use: { …devices[‘Desktop Safari’] }
}
]
});
Then run:
npx playwright test
Run only Chromium:
npx playwright test –project=chromium
Run Firefox:
npx playwright test –project=firefox
Run WebKit:
npx playwright test –project=webkit
Cross-browser testing is valuable for QA engineers because an application can behave correctly in one browser while exposing compatibility problems in another.
Adding Locators to the Hello World Test
The first test does not interact with an element.
A useful next step is to introduce a locator.
For example:
import { test, expect } from ‘@playwright/test’;
test(‘verify Example Domain heading’, async ({ page }) => {
await page.goto(‘https://example.com’);
const heading = page.getByRole(‘heading’, {
name: ‘Example Domain’
});
await expect(heading).toBeVisible();
});
Here:
page.getByRole(‘heading’, { name: ‘Example Domain’ })
locates the heading.
Then:
await expect(heading).toBeVisible();
checks whether it is visible.
This is a natural progression from a simple Playwright test to real UI automation.
Adding an Action to the First Test
A real application usually requires interaction.
For example:
await page.getByRole(‘button’, { name: ‘Login’ }).click();
You can also enter data:
await page.getByLabel(‘Username’).fill(‘testuser’);
await page.getByLabel(‘Password’).fill(‘Password123’);
A realistic test therefore follows:
Navigate → Locate → Act → Assert
This is one of the most important patterns to understand when learning Playwright automation testing.
Turning Hello World Into a Real QA Test
Suppose your application has a login page.
You could start with:
import { test, expect } from ‘@playwright/test’;
test(‘verify successful login’, async ({ page }) => {
await page.goto(‘https://your-application.example/login’);
await page.getByLabel(‘Username’).fill(‘testuser’);
await page.getByLabel(‘Password’).fill(‘Password123’);
await page.getByRole(‘button’, { name: ‘Login’ }).click();
await expect(page).toHaveURL(/dashboard/);
await expect(
page.getByRole(‘heading’, { name: ‘Dashboard’ })
).toBeVisible();
});
The URL above is only an example. Replace it with your application’s test environment.
This is how a beginner can gradually transform a Playwright first test into a real QA automation scenario.
Debugging the Playwright Hello World Test
When a test fails, Playwright provides several debugging options.
Playwright Inspector
Run:
npx playwright test tests/hello-world.spec.ts –debug
This launches Playwright’s debugging tools.
You can inspect locators, step through actions, and observe test execution.
UI Mode
Run:
npx playwright test –ui
UI Mode is useful for visually exploring tests and debugging failures.
Using Trace Viewer
Tracing is one of the most useful Playwright debugging capabilities.
Configure:
import { defineConfig } from ‘@playwright/test’;
export default defineConfig({
use: {
trace: ‘on-first-retry’
}
});
When a test fails and is retried, Playwright can capture a trace.
This provides useful information about:
- Actions
- Navigation
- DOM snapshots
- Network activity
- Screenshots
- Timing
For QA engineers, trace data is especially valuable when a test passes locally but fails in CI.
Adding Screenshots to the First Test
You can capture a screenshot:
await page.screenshot({
path: ‘screenshots/hello-world.png’
});
import { test, expect } from ‘@playwright/test’;
test(‘Hello World with screenshot’, async ({ page }) => {
await page.goto(‘https://example.com’);
await expect(page).toHaveTitle(/Example Domain/);
await page.screenshot({
path: ‘screenshots/example-domain.png’,
fullPage: true
});
});
Screenshots can provide visual evidence when debugging automation failures.
HTML Reporting
Playwright includes an HTML reporter.
Run:
npx playwright test
Then open the report:
npx playwright show-report
The report provides information about:
- Passed tests
- Failed tests
- Test duration
- Errors
- Steps
- Attachments
For professional QA automation, reporting is an important skill beyond simply writing tests.
Converting Hello World Into a Reusable Structure
As your test suite grows, avoid putting everything into one file.
A basic structure might be:
tests/
├── login.spec.ts
├── product.spec.ts
└── checkout.spec.ts
pages/
├── LoginPage.ts
├── ProductPage.ts
└── CheckoutPage.ts
utils/
└── test-data.ts
playwright.config.ts
For example:
export class LoginPage {
constructor(private page: Page) {}
async login(username: string, password: string) {
await this.page.getByLabel(‘Username’).fill(username);
await this.page.getByLabel(‘Password’).fill(password);
await this.page.getByRole(‘button’, { name: ‘Login’ }).click();
}
}
This introduces the Page Object Model, which is useful for maintainable enterprise automation frameworks.
Basic CI/CD Execution With GitHub Actions
Once your first test works locally, run it automatically in CI.
A basic GitHub Actions workflow can look like:
name: Playwright Tests
on:
push:
pull_request:
jobs:
test:
runs-on: ubuntu-latest
steps:
– name: Checkout code
uses: actions/checkout@v4
– name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
– name: Install dependencies
run: npm ci
– name: Install Playwright browsers
run: npx playwright install –with-deps
– name: Run Playwright tests
run: npx playwright test
This demonstrates an important career progression:
First Test
↓
Test Suite
↓
↓
Reporting
↓
CI/CD
For SDETs and QA Automation Engineers, knowing how to run tests in CI is often more valuable than knowing individual commands alone.
Common Playwright Hello World Errors and Solutions
Error 1: npx playwright is not recognized
Check whether dependencies were installed:
npm install
Then try:
npx playwright test
Error 2: Browser executable is missing
Install Playwright browsers:
npx playwright install
For Linux CI environments:
npx playwright install –with-deps
Error 3: Test file is not detected
Make sure the file follows a recognizable test naming convention such as:
hello-world.spec.ts
Also verify the configured testDir.
Error 4: Assertion fails
For:
await expect(page).toHaveTitle(/Example Domain/);
check the actual page title.
You can temporarily inspect it:
console.log(await page.title());
Error 5: Website is unavailable
If page.goto() fails, verify:
- URL
- Internet connectivity
- Application availability
- VPN requirements
- Firewall rules
- Test environment status
Playwright Beginner Best Practices
When writing your first few tests, follow these guidelines.
1. Start small
Do not immediately build a large framework.
First learn:
goto()
locator
click()
fill()
expect()
2. Use reliable locators
Prefer:
page.getByRole(‘button’, { name: ‘Login’ })
over unnecessarily fragile selectors.
3. Use assertions
A test that only opens a webpage is not very useful.
Add meaningful validation:
await expect(page).toHaveTitle(/Dashboard/);
4. Avoid unnecessary hard waits
Do not rely on:
await page.waitForTimeout(5000);
Prefer locators and web-first assertions that synchronize with application state.
5. Learn TypeScript
You do not need advanced TypeScript initially, but understanding interfaces, classes, types, imports, and async/await will help you build professional frameworks.
6. Practice real scenarios
After the Hello World test, automate:
- Login
- Search
- Registration
- Product selection
- Shopping cart
- Checkout
- Logout
This builds practical QA experience.
Playwright Interview Questions and Answers
1. What is a Playwright Hello World test?
It is a simple first Playwright test that demonstrates basic browser automation, usually by opening a webpage and validating an expected result.
2. How do I write a Playwright Hello World test?
Use the Playwright Test runner:
import { test, expect } from ‘@playwright/test’;
test(‘Hello World’, async ({ page }) => {
await page.goto(‘https://example.com’);
await expect(page).toHaveTitle(/Example Domain/);
});
3. What is the page fixture?
page represents a browser tab and provides APIs for navigation, element interaction, screenshots, and other browser operations.
4. What is the purpose of expect()?
expect() validates whether the application produces the expected result.
5. Is Playwright only for Chromium?
No. Playwright supports Chromium, Firefox, and WebKit.
6. How do you run a Playwright test?
npx playwright test
7. How do you debug a Playwright test?
Use:
npx playwright test –debug
or:
npx playwright test –ui
8. How do you generate a Playwright report?
Run:
npx playwright show-report
after executing the tests.
Playwright Learning Roadmap After Your First Test
Once your playwright hello world test tutorial is complete, continue in this order:
Beginner Level
- Playwright Basics
- Playwright for Beginners
- Playwright Installation Guide
- Playwright Getting Started Guide
- Playwright First Test Script
- Playwright Simple Example
- Playwright Basic Commands
Locator and Interaction Level
- Playwright Locators
- Playwright Auto Waiting
- Playwright TypeScript Tutorial
- Forms and Dropdowns
- Alerts and Frames
- Multiple Pages and Popups
Framework Level
- Playwright Page Object Model
- Playwright Fixtures Tutorial
- Data-Driven Testing
- Authentication
- Test Data Management
Advanced Level
- Playwright API Testing
- Playwright Reporting Tutorial
- Playwright Parallel Execution Tutorial
- Playwright CI/CD Tutorial
- Playwright GitHub Actions Tutorial
- Playwright Docker Tutorial
- Playwright Troubleshooting
Career Level
- Playwright Interview Questions
- Framework Design
- CI/CD Integration
- Cross-browser Testing
- Test Architecture
- API + UI Automation
For Selenium beginners, this roadmap provides a practical transition from traditional WebDriver automation to modern Playwright automation testing.
FAQs About Playwright Hello World Test
What is a Playwright Hello World test?
A Playwright Hello World test is a beginner-level automated test that opens a webpage and validates a simple expected result using Playwright.
How do I write a Playwright Hello World test?
Create a Playwright TypeScript project, import test and expect, use the page fixture, navigate with page.goto(), and validate the page with an assertion.
What is the simplest Playwright test?
The simplest useful test is:
import { test, expect } from ‘@playwright/test’;
test(‘Hello World’, async ({ page }) => {
await page.goto(‘https://example.com’);
await expect(page).toHaveTitle(/Example Domain/);
});
Can beginners learn Playwright with TypeScript?
Yes. Beginners can learn Playwright with basic TypeScript and gradually learn more TypeScript concepts while building automation tests.
How do I run my first Playwright test?
Use:
npx playwright test
For a visible browser:
npx playwright test –headed
Can I use a real application instead of Example Domain?
Yes. Replace the example URL with the URL of your application’s test environment and add application-specific locators, actions, and assertions.
Is a Hello World test enough for a QA automation project?
No. It is a starting point. A professional project should eventually include multiple scenarios, reusable components, test data, assertions, reporting, debugging, cross-browser execution, and CI/CD integration.