Playwright with JavaScript: The Complete Guide for Modern Test Automation

Introduction

Playwright with JavaScript is the fastest way to start writing modern, reliable browser automation. JavaScript is the language every web developer already knows, and Playwright gives it a first-class testing engine that runs across Chromium, Firefox, and WebKit with a single API. Together, they form a beginner-friendly yet enterprise-ready stack that powers thousands of production test suites in 2026.

This complete guide walks you through everything you need to use Playwright effectively with plain JavaScript — no TypeScript required. You will learn why JavaScript is a perfectly valid choice, how to set up a project from scratch, how to structure your codebase, how to write your first tests, how to build page objects and fixtures, how to configure Playwright, how to debug like a pro, and how mastering this stack can boost your career and salary. Whether you are a QA engineer moving into automation or a developer expanding into testing, this article gives you a solid, practical foundation.

Why JavaScript for Playwright

Playwright is written in TypeScript, but it fully supports JavaScript out of the box. Every API, every fixture, every reporter, every configuration option works exactly the same whether you write .js or .ts files. For teams that prefer JavaScript — because their app is JavaScript, their developers write JavaScript, or they simply want a lower learning curve — Playwright removes all friction.

JavaScript brings genuine advantages to test automation. There is no build step to configure, no tsconfig.json to maintain, and no compile errors to fix before running a test. New team members can contribute on day one. Node.js runs your files directly, and Playwright's own runner takes care of everything else. For small teams, prototypes, freelance projects, and QA engineers taking their first steps in automation, plain JavaScript is often the pragmatic best choice.

• Zero build step: write a .js file and run it — no transpilation needed.
• Lower learning curve: familiar syntax for anyone with web development background.
• Full API support: every Playwright feature works identically in JavaScript and TypeScript.
• Great IDE experience: VS Code still gives autocomplete via JSDoc types shipped with Playwright.
• Rich npm ecosystem: use any Node.js library — Faker, dotenv, Allure, Winston — without extra typing work.
• Fast onboarding: junior engineers become productive in hours, not days.

How Playwright Runs JavaScript

When you install @playwright/test, you get a full-featured test runner that speaks JavaScript natively. Your tests live in .js files, and Playwright's runner (built on Node.js) discovers them, applies your configuration, spins up browsers, and executes tests in parallel workers. There is no separate compiler — Node.js runs your code directly, and Playwright orchestrates the browsers over its internal WebSocket-based protocol.

Even without TypeScript, you still get excellent tooling. Playwright ships JSDoc-style type information that VS Code uses to power autocomplete, parameter hints, and inline documentation. Hover over page.getByRole and you will see the exact options it accepts. This gives you a large portion of the productivity benefits of TypeScript with none of the setup cost.

Setting Up a Playwright JavaScript Project

Creating a Playwright project with JavaScript takes less than a minute. The official installer scaffolds everything for you and asks a few questions about your preferences.

# Create a new project folder
mkdir playwright-js-demo && cd playwright-js-demo

# Initialise npm and install Playwright
npm init -y
npm init playwright@latest

# When prompted, choose JavaScript (not TypeScript)
# Accept the defaults for tests folder, GitHub Actions, and browsers

The installer creates a working project with a tests folder, a playwright.config.js, an example spec, and downloads Chromium, Firefox, and WebKit. Run npx playwright test and the example test executes in all three browsers in parallel. You now have a production-grade JavaScript test setup ready to grow.

Recommended Project Structure

A clean folder structure keeps your test suite maintainable as it grows. Even without TypeScript, applying the same architectural discipline pays huge dividends.

playwright-js-demo/
├── tests/
│   ├── login.spec.js
│   └── checkout.spec.js
├── src/
│   ├── pages/
│   │   ├── LoginPage.js
│   │   └── CheckoutPage.js
│   ├── fixtures/
│   │   └── index.js
│   └── utils/
│       ├── testData.js
│       └── apiHelpers.js
├── playwright.config.js
├── package.json
└── .env

Writing Your First Test

A Playwright test in JavaScript is short, readable, and easy to reason about. The test function receives a page fixture, and every action is asynchronous — you await each step so Playwright can wait for the app to be ready.

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

test('user can log in with valid credentials', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.getByLabel('Email').fill('user@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();

  await expect(page).toHaveURL(/dashboard/);
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

Async/Await in Playwright

Every Playwright action is asynchronous because browser automation is inherently asynchronous — clicks, navigation, and network calls take time. JavaScript's async/await syntax makes this natural to write. You mark your test function async, then await each Playwright call as if it were synchronous. Playwright's auto-waiting takes care of stability behind the scenes, so you rarely need explicit waits.

The most common mistake beginners make is forgetting await. Without it, the promise is created but never awaited, the browser races ahead, and tests fail in confusing ways. A simple rule solves this: every Playwright call — every page action, every expect — must be preceded by await. Modern ESLint rules (eslint-plugin-playwright) will flag missing awaits automatically.

Page Objects in JavaScript

The Page Object Model works beautifully in plain JavaScript. You define a class for each page, initialise locators in the constructor, and expose readable methods for user actions. Consumers get clean, high-level test steps.

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

class LoginPage {
  constructor(page) {
    this.page = page;
    this.emailInput = page.getByLabel('Email');
    this.passwordInput = page.getByLabel('Password');
    this.submitButton = page.getByRole('button', { name: 'Sign in' });
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(email, password) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
    await expect(this.page).toHaveURL(/dashboard/);
  }
}

module.exports = { LoginPage };

Fixtures in JavaScript

Playwright fixtures are just as powerful in JavaScript as they are in TypeScript. You extend the base test with your own fixtures — such as a ready-to-use page object or an authenticated session — and every test that imports your custom test gets them automatically.

const base = require('@playwright/test');
const { LoginPage } = require('../pages/LoginPage');

exports.test = base.test.extend({
  loginPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await use(loginPage);
  },
});

exports.expect = base.expect;

Now every test that imports test from this file receives a ready-to-use loginPage fixture. This pattern keeps tests short, expressive, and free of setup boilerplate — the foundation of any framework that needs to scale from ten tests to ten thousand.

playwright.config.js Explained

Your Playwright configuration is a plain JavaScript file that exports a config object. Every option — projects, reporters, retries, timeouts, base URL — is available exactly as in the TypeScript version.

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

module.exports = defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  reporter: [['html'], ['list']],
  use: {
    baseURL: process.env.BASE_URL || 'https://example.com',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

Debugging JavaScript Tests

Debugging Playwright tests in JavaScript is exceptionally productive — arguably even easier than TypeScript because there are no source maps involved. The line in your file is the line the debugger stops on.

• npx playwright test --debug opens the Playwright Inspector with your test paused at the first line.
• The Playwright VS Code extension lets you set breakpoints in .js files and step through actions visually.
• npx playwright test --ui launches UI Mode with time-travel debugging — see every action, DOM snapshot, and network call.
• npx playwright show-trace trace.zip opens the Trace Viewer for a failed test — the fastest way to diagnose flakiness.
• await page.pause() drops you into an interactive Inspector at any point in your test.

Best Practices for Playwright JavaScript Projects

• Always await every Playwright call — install eslint-plugin-playwright to catch missing awaits automatically.
• Use user-facing locators (getByRole, getByLabel, getByText) instead of CSS or XPath selectors.
• Never use hard-coded sleeps like page.waitForTimeout — rely on Playwright's auto-waiting and web-first assertions.
• Organise tests with the Page Object Model to keep specs short and readable.
• Extend the base test with fixtures for reusable setup — do not use module-scoped variables.
• Store secrets in .env and load them with dotenv; never commit real credentials.
• Use JSDoc comments for shared utilities to unlock VS Code autocomplete without adopting TypeScript.
• Enable trace: 'on-first-retry' and reporter: 'html' — they turn CI failures into 30-second investigations.
• Run tests fully parallel with retries: 2 in CI to balance speed with resilience against flake.

Career and Salary Benefits of Playwright + JavaScript

Playwright with JavaScript is one of the most in-demand skill combinations in QA and SDET hiring right now. Companies are actively migrating from Selenium and Cypress to Playwright, and JavaScript expertise gives you access to the widest possible range of teams — including startups, agencies, and any company whose web stack is already JavaScript.

• United States: mid to senior Playwright + JavaScript SDETs typically earn USD 110,000 to 170,000, with staff roles at top companies reaching USD 200,000+.
• United Kingdom: GBP 55,000 to 95,000 for senior automation engineers, with contract day rates of GBP 400 to 700.
• Europe (Germany, Netherlands, Nordics): EUR 60,000 to 100,000 for senior roles, higher in fintech and SaaS.
• India: INR 14 to 38 LPA for senior SDETs, with product companies and remote-first employers at the top of the range.
• Remote global roles: USD 80,000 to 140,000 for engineers with a real Playwright + JavaScript framework on GitHub.

Beyond salary, JavaScript automation skills transfer directly into full-stack roles, DevOps, and platform engineering. Every modern web team uses JavaScript somewhere, so the language investment compounds across your entire career. Playwright then multiplies that value by giving you a modern, reliable engine that companies genuinely need.

Summary

Playwright with JavaScript is the fastest, most approachable way to build modern browser automation. You get every feature of Playwright — cross-browser support, parallel execution, auto-waiting, tracing, HTML reports — with zero build step and a language every web developer already knows. It is the pragmatic choice for teams that value shipping speed, easy onboarding, and a wide talent pool.

Start with the setup steps in this guide, adopt the recommended folder structure, and build one page object and one fixture. From there, add a GitHub Actions pipeline, wire up the HTML report, and grow your suite one test at a time. Every hour you invest in Playwright with JavaScript pays back in fewer bugs, faster releases, and stronger career opportunities — this is a stack that will keep working for you throughout the rest of the decade.