How do I create my first Playwright test using TypeScript?

the installation by opening your terminal or command prompt and running:

node --version

You should also have a code editor such as Visual Studio Code.

Step 1: Create a New Project

Create a new folder for your Playwright project.

mkdir playwright-typescript-demo
cd playwright-typescript-demo

Then initialize a Node.js project:

npm init -y

This creates a package.json file for your project.

Step 2: Install Playwright

Now install the Playwright testing framework:

npm init playwright@latest

During installation, Playwright will ask a few questions, including whether you want to use TypeScript.

Select TypeScript.

You will also be asked where you want to store your tests and whether you want to add a GitHub Actions workflow.

After the installation, Playwright creates the basic project structure for you.

A typical project may look like this:

playwright-typescript-demo/
│
├── tests/
│   └── example.spec.ts
│
├── playwright.config.ts
├── package.json
└── package-lock.json

The .ts extension indicates that the file contains TypeScript code.

Step 3: Create Your First Test

Let’s create a simple test that opens a website and checks its title.

Create a file called:

tests/first-test.spec.ts

Add the following code:

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

test('verify webpage title', async ({ page }) => {
  await page.goto('https://example.com');

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

This small script already demonstrates the basic structure of a Playwright test.

Understanding the Code

Let’s break it down.

Import Playwright

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

The test function is used to define a test case, while expect is used to perform assertions.

Create a Test

test('verify webpage title', async ({ page }) => {

Here we create a test named verify webpage title.

The page object represents a browser page. Playwright provides it automatically through the test fixture.

Open a Website

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

The goto() method navigates the browser to the specified URL.

The await keyword is important because browser operations are asynchronous.

Verify the Title

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

This checks whether the page title matches the expected value.

If the title is correct, the test passes. If it doesn’t match, Playwright reports the test as failed.

Step 4: Run Your Test

Once your test is ready, open the terminal and run:

npx playwright test

Playwright will execute the test using the configured browsers.

You should see a result indicating whether the test passed or failed.

How Can I Run the Test in Headed Mode?

When you run Playwright normally, the browser may run without displaying the browser window.

For beginners, it can be useful to actually watch the browser.

Use:

npx playwright test --headed

Now you can see the browser open and perform the actions defined in your test.

How Can I Run a Specific Test?

If your project contains multiple tests, you can execute a particular test file:

npx playwright test tests/first-test.spec.ts

You can also run tests using the Playwright UI mode:

npx playwright test --ui

UI mode is particularly useful while learning because it makes it easier to inspect and run individual tests.

Creating a More Realistic Test

After understanding the basic example, you can try interacting with elements on a webpage.

For example:

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

test('search for a product', async ({ page }) => {
  await page.goto('https://example.com');

  await page.getByRole('textbox').fill('Playwright');

  await page.getByRole('button', { name: 'Search' }).click();

  await expect(page).toHaveURL(/search/);
});

The exact selectors will depend on the website you are testing, but the basic pattern remains the same:

Open page → Locate element → Perform action → Verify result

This is the foundation of end-to-end automation testing.

Why Are Playwright Locators Important?

One of the biggest advantages of Playwright is its locator system.

Instead of relying heavily on complicated XPath expressions, Playwright encourages testers to use user-facing locators such as:

page.getByRole()

page.getByText()

page.getByLabel()

page.getByPlaceholder()

These locators can make test scripts easier to understand and maintain.

For example:

await page.getByRole('button', { name: 'Login' }).click();

This is generally easier to understand than a long XPath expression.

What Makes Playwright Different for Beginners?

A common problem with traditional automation scripts is timing. A page may take some time to load, or an element may not immediately become available.

Playwright has built-in auto-waiting for many actions and assertions. This means you don’t always need to add manual delays such as:

await page.waitForTimeout(5000);

Beginners should avoid unnecessary hard-coded waits because they can make tests slower and less reliable.

Instead, use Playwright’s built-in waiting mechanisms and assertions.

How Do You Debug a Playwright Test?

When a test fails, don’t immediately assume that the automation framework is the problem.

Look at the error message and identify which step failed.

You can also use:

npx playwright test --debug

Playwright’s trace functionality is another powerful debugging feature. A trace can help you understand what happened during a failed test, including actions, screenshots, network activity, and other useful information.

What Should Beginners Learn After Their First Test?

Once you successfully create and execute your first Playwright test, don’t stop there.

A practical learning path would be:

TypeScript fundamentals
Playwright installation and configuration
Locators
Assertions
Browser and page interactions
Handling forms
Dropdowns, pop-ups, and tabs
File upload and download
Screenshots and videos
Page Object Model
Fixtures
API testing
Authentication
Parallel testing
Cross-browser testing
Test reporting
Git and GitHub
CI/CD integration
Real-time automation projects

Learning these concepts progressively will help you move from writing simple scripts to developing a maintainable automation framework.

Final Thoughts

Creating your first Playwright test with TypeScript is much easier than it may initially seem. The basic process is straightforward: install Playwright, create a test file, navigate to a webpage, perform an action, and verify the expected result.

The real learning starts after your first successful test. As you work with real applications, you’ll encounter dynamic elements, authentication, APIs, multiple pages, test data, browser configurations, and CI/CD pipelines.

That is where practical, project-based learning becomes especially valuable.

If your goal is to become a Playwright automation tester, focus on writing tests regularly and gradually build a complete automation framework rather than simply memorizing commands. Working on real-world projects can help you understand how Playwright is actually used in professional testing environments.

Start with one simple test today. Then improve it step by step. That’s one of the best ways to learn Playwright with TypeScript.