Playwright Commands in TypeScript: A Practical Guide

If you’re learning Playwright or your team is already using it for UI automation, understanding the right Playwright commands is more important than trying to learn everything the framework offers. Most real-world test suites don’t use every feature; they rely on a core set of commands used consistently and correctly. Instead of treating Playwright as a large API surface, successful teams focus on a predictable flow: navigate to a page, locate elements using stable strategies, perform actions, validate outcomes, and handle dynamic behavior like waits and downloads. When done right, this approach leads to automation testing that is easier to maintain, debug, and scale.

This guide is designed to be practical, not theoretical. Based on a real TypeScript implementation, it walks you through the most important Playwright commands, explains when to use them, and shows how they work together in real scenarios like form handling, file uploads, and paginated table validation. Unlike a cheatsheet, this article focuses on how commands are used together in actual test flows, helping QA engineers and developers build reliable automation faster.

How Playwright Commands Improve Test Stability

Modern UI testing goes beyond simple clicks; it focuses on validating complete workflows that closely replicate real user behavior.

Playwright commands improve test stability by:

• Using user-facing locators instead of fragile selectors
• Supporting auto-waiting before performing actions
• Providing retryable assertions
• Encouraging clean and reusable test design
• Handling dynamic UI behavior effectively

Key idea:

Reliable tests are not built with more code; they are built with the right commands used correctly.

Prerequisites for Using Playwright Commands

Before writing your first test, ensure your environment is ready.

Install Node.js

node -v
npm -v

Install Visual Studio Code

Recommended extensions:

• Playwright Test for VS Code
• TypeScript support

These tools improve debugging, execution, and productivity.

Playwright TypeScript Setup

Step 1: Create Project

mkdir MyPlaywrightProject
cd MyPlaywrightProject

Step 2: Initialize npm

npm init -y

Step 3: Install Playwright

npm init playwright@latest

Choose:

• TypeScript
• tests folder
• Install browsers

Standard Imports

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

import { BasePage } from './basepage';

import { testData } from './testData';

These form the backbone of your test structure.

Core Playwright Commands You Must Know

1. Navigation Command

page.goto()

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

• Opens the application
• Starts test execution
• Used in almost every test

2. Locator Commands (Most Important)

Locators define how Playwright finds elements.

getByRole() — Best Practice

page.getByRole('button', { name: 'Submit' });

Best for:

• Buttons
• Links
• Checkboxes
• Inputs

getByText()

page.getByText('Submit');
page.getByText(/Submit/i);

Best for visible UI text.

getByLabel()

page.getByLabel('Email Address');

Best for form inputs.

getByPlaceholder()

page.getByPlaceholder('Enter your name');

getByAltText()

page.getByAltText('logo image');

locator() — Advanced usage

page.locator('input[type="file"]').first();

Used for:

• CSS selectors
• XPath
• Complex chaining

Locator Filters

locator.filter({ hasText: 'Text' });
locator.filter({ has: childLocator });

Helpful Methods

• .first()
• .last()
• .all()

These help handle multiple matching elements.

3. Action Commands

click()

await locator.click();

Typing Text (sendKeys wrapper)

await base.sendKeys(locator, 'User');

scrollIntoView()

await base.scrollIntoView(locator);

File Upload

await locator.setInputFiles('file.pdf');

Screenshot

await locator.screenshot({ path: 'image.png' });

4. Assertion Commands

Assertions validate test results.

await expect(page).toHaveTitle(/Test/);
await expect(locator).toBeVisible();
await expect(locator).toBeChecked();

expect(value).toBe('User');
expect(count).toBeGreaterThan(0);

Beginner-Friendly Explanation

Think of Playwright commands like steps in a real-world task:

• Open website → goto()
• Find element → getByRole()
• Interact → click()
• Verify → expect()

This simple flow is the foundation of all automation tests.

Example: Pagination Table Automation

This example demonstrates how multiple Playwright commands work together.

Wait Strategies in Playwright

Common Commands

await page.waitForTimeout(1000);
await page.waitForEvent('download');

Best Practice

Avoid excessive hard waits. Prefer:

• Auto-waiting
• Assertions
• Event-based waits

Handling Downloads

const [download] = await Promise.all([
 page.waitForEvent('download'),
 page.click('#downloadButton')
]);

BasePage Pattern for Reusability

Benefits

• Reduces duplication
• Improves readability
• Standardizes actions

Example

base.click(locator);
base.sendKeys(locator, text);
base.scrollIntoView(locator);

Test Data Management

export const testData = {
 username: 'User',
 password: 'Pass123'
};

Benefits:

• No hardcoding
• Easy updates
• Cleaner tests

Key Benefits of Using Playwright Commands

Instead of relying on rigid scripts or complex frameworks, Playwright commands provide a flexible and reliable way to automate modern web applications. Here’s what makes them powerful:

• Improved Test Stability
  Commands like getByRole() and expect() reduce flaky tests by focusing on user-visible behavior.
• Built-in Auto-Waiting
  Playwright automatically waits for elements to be ready before performing actions, reducing the need for manual waits.
• Cleaner and Readable Tests
  Commands are intuitive and map closely to real user actions like clicking, typing, and verifying.
• Efficient Debugging
  Features like screenshot() and detailed error messages make it easier to identify issues quickly.
• Scalability with Reusable Patterns
  Using structures like BasePage and centralized test data allows teams to scale automation efficiently.

Conclusion

Mastering Playwright commands is key to building reliable and maintainable UI tests. By focusing on strong locators, clean actions, and effective assertions, you can reduce test failures and improve stability. Using built-in auto-waiting instead of hard waits ensures more consistent execution, while reusable patterns like BasePage and centralized test data make scaling easier. These practices help teams write cleaner, more efficient automation, making Playwright a powerful tool for modern testing.

From better locators to smarter waits, these Playwright commands can transform how your team approaches UI automation.

Upgrade Your Automation

Frequently Asked Questions