Setting Up Your First Playwright Project

April 27, 2025

Setting Up Your First Playwright Project

If you're new to Playwright, you’re about to discover one of the most powerful automation tools for web testing!

Playwright is fast, reliable, and supports modern browsers like Chromium, Firefox, and WebKit — all with a single API.

In this guide, we'll walk through setting up your very first Playwright project step-by-step.

What is Playwright?

Playwright is an open-source framework developed by Microsoft for end-to-end testing and browser automation.

It can automate browsers, simulate user interactions, and perform fast, stable testing across multiple platforms.

Why Choose Playwright?

Supports multiple browsers

Handles modern web apps (single-page apps, dynamic content, etc.)

Built-in support for multiple languages like JavaScript/TypeScript, Python, Java, and .NET

Step 1: Install Node.js

Playwright’s primary language is JavaScript/TypeScript, so you’ll need Node.js installed.

👉 Download and install Node.js from https://nodejs.org/

To check if Node.js is installed, run:

bash

Copy

Edit

node -v

npm -v

Step 2: Create a New Project Folder

Choose a location and create a new folder for your project.

bash

Copy

Edit

mkdir playwright-first-project

cd playwright-first-project

Step 3: Initialize the Project

Initialize a new Node.js project:

bash

Copy

Edit

npm init -y

This command creates a basic package.json file.

Step 4: Install Playwright

Now, install Playwright:

bash

Copy

Edit

npm install --save-dev @playwright/test

To also install browsers (Chromium, Firefox, WebKit), run:

bash

Copy

Edit

npx playwright install

Step 5: Create Your First Test

Create a new file for your first test, for example:

bash

Copy

Edit

touch example.spec.js

Now open example.spec.js and add this code:

javascript

Copy

Edit

const { test, expect } = require('@playwright/test');

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

// Navigate to a page

await page.goto('https://example.com');

// Check the page title

await expect(page).toHaveTitle(/Example Domain/);

});

Step 6: Run Your Test

Run your Playwright test using:

bash

Copy

Edit

npx playwright test

✅ You should see the browser launch, visit the page, and verify the title!

Step 7: (Optional) Explore Playwright Test Generator

If you want to record your actions and auto-generate code, Playwright has an amazing tool:

bash

Copy

Edit

npx playwright codegen https://example.com

This will open a browser. As you interact with the page, Playwright generates the script for you!

Basic Project Structure After Setup

Your project folder should now look like this:

pgsql

Copy

Edit

playwright-first-project/

├── node_modules/

├── example.spec.js

├── package.json

└── package-lock.json

Bonus Tips to Level Up:

Add a playwright.config.js file to customize your testing setup.

Run tests in headless mode (no browser UI) for faster execution.

Use parallel testing and reporters built into Playwright.

Final Thoughts

Setting up Playwright is quick and easy, and it opens the door to powerful browser automation.

Once your first project is ready, you can start writing more complex tests — interacting with forms, handling alerts, taking screenshots, testing APIs, and much more!

🚀 Next step: Try creating tests for login pages, search boxes, or even e-commerce flows!

Learn Playwright Course in Hyderabad

What Is Playwright and Why Should You Use It for Modern End-to-End testing?

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions

Search This Blog

IHUB Talent