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', 'user@example.com');
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!
Happy testing! 🎉
Comments
Post a Comment