Blog #26: Everything I Know About Playwright Syntax in One Post (So Far!)

Whether you're just starting your automation journey or transitioning from manual testing, Playwright is a powerful framework for modern end-to-end testing. In this blog, I’ll walk you through Playwright syntax in detail, including locators, assertions, waits, and more—all in one place.

✅ 1. Installation & Setup

npm init -y
npm install -D @playwright/test
npx playwright install

This sets up everything you need, including Chromium, Firefox, and WebKit.

🧪 2. Basic Test Structure

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

test('basic test', async ({ page }) => {
  await page.goto('https://www.google.com/');
  const title = await page.title();
  expect(title).toBe('Google');
});

• test() defines a test case.
• expect() is used for assertions.

🔍 3. All About Locators

🎯 Playwright-Specific Locators

page.getByText('Login');  // matches visible text
page.getByRole('button', { name: 'Submit' }); // ARIA role
page.getByLabel('Email'); // form label
page.getByPlaceholder('Enter your name'); 
page.getByTestId('login-button'); // using data-testid

🎨 CSS Selectors

page.locator('#username');            // ID
page.locator('.btn.primary');         // Class
page.locator('input[name="email"]');  // Attribute
page.locator('div > span');           // Child
page.locator('ul li:nth-child(2)');   // nth-child
page.locator('form:has(button)');
page.locator('li:has-text("Product")');

⏱️ 4. Waits in Playwright

Playwright auto-waits for actions and assertions, but sometimes you need manual waits.

🔄 Auto-Waiting

Playwright auto-waits for elements to be:

• Attached to the DOM
• Visible
• Stable

⏰ Manual Waits

await page.waitForSelector('#loading-done');
await page.waitForTimeout(3000);// hard wait (use sparingly)
await page.waitForLoadState('domcontentloaded');// 'load', 'networkidle'

📑 Wait for Navigation

await Promise.all([
  page.waitForNavigation(),
  page.click('a[href="/dashboard"]'),
]);

📌5. Page Actions

await page.click('text=Login');
await page.fill('#email', '[email protected]');
await page.press('#input', 'Enter');
await page.selectOption('select#dropdown', 'value1');
await page.check('#terms');
await page.uncheck('#terms');
await page.hover('button#menu');
await page.setInputFiles('input[type="file"]', 'image.png');

🧪 6. Assertions with expect()

✅ Text & Visibility

await expect(page.locator('h1')).toHaveText('Welcome');
await expect(page.locator('button')).toBeVisible();
await expect(page.locator('input')).toBeHidden();

✅ Attributes

await expect(page.locator('input')).toHaveAttribute('type', 'email');
await expect(page.locator('img')).toHaveAttribute('src', /logo/);

✅ State

await expect(page.locator('input')).toBeEnabled();
await expect(page.locator('input')).toBeEditable();
await expect(page.locator('input')).toBeChecked(); // for checkboxes/radios

✅ URL and Title

await expect(page).toHaveURL(/.*dashboard/);
await expect(page).toHaveTitle('Dashboard');

✅ Count

await expect(page.locator('li')).toHaveCount(5);

🧭 7. Navigation

await page.goto('https://google.com');
await page.goBack();
await page.goForward();
await page.reload();

🧱 8. Browser, Context, Page

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

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

🧼 9. Test Hooks

test.beforeEach(async ({ page }) => {
  await page.goto('https://example.com');
});

test.afterEach(async ({ page }) => {
  await page.close();
});

📹 10. Screenshots, Videos & Tracing

📸 Screenshot

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

📹 Config (playwright.config.js)

use: {
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
  trace: 'retain-on-failure',
}

🧪 11. Run Tests

npx playwright test
npx playwright test login.spec.js
npx playwright test --headed
npx playwright show-report

🔄 12. Parallel Testing with Projects

projects: [
  {
    name: 'chromium',
    use: { browserName: 'chromium' },
  },
  {
    name: 'firefox',
    use: { browserName: 'firefox' },
  },
],

🎯 Final Thoughts

When I started learning Playwright, the syntax felt overwhelming. But with consistent practice, breaking things down step by step, and writing small tests every day, it began to make sense. This blog is a reflection of everything I’ve explored so far—from basic actions to assertions, waits, and useful configurations.

If you’re also starting out, I hope this post becomes your go-to reference whenever you feel stuck or need a quick syntax refresher. Don’t worry about learning everything at once—just focus on one part at a time and keep experimenting.

Playwright is more than just a tool; it’s a great way to build confidence in automation. I’ll keep sharing as I learn more—and I’d love to hear what helped you or what you’re exploring next!