Skip to main content
CSS Selectors with Playwright - Full Guide

🎯 CSS Selectors in Playwright JavaScript

✅ 1. Tag, ID, and Class Selectors

Explanation: The most basic and common CSS selectors.

  • tag – selects all elements of that tag
  • .class – selects by class
  • #id – selects uniquely by ID
// Tag
await page.click('button');
await page.locator('input').first().fill('Sample');
await page.locator('h1').textContent();

// Class
await page.click('.login-btn');
await page.locator('.nav-item').nth(1).click();
await page.locator('.error-message').isVisible();

// ID
await page.fill('#username', 'JohnDoe');
await page.fill('#password', 'secret');
await page.click('#submitBtn');

✅ 2. Attribute Selectors

Explanation: Use HTML attributes to target elements.

  • [attr=value] - Exact match
  • [attr^=value] - Starts with
  • [attr$=value] - Ends with
  • [attr*=value] - Contains
// Exact match
await page.click('input[type="submit"]');
await page.fill('input[name="email"]', 'test@example.com');
await page.locator('img[alt="logo"]').screenshot({ path: 'logo.png' });

// Starts with
await page.click('a[href^="/products"]');
await page.locator('img[src^="https://cdn."]').first().screenshot();
await page.locator('input[name^="user_"]').nth(1).fill('value');

// Ends with
await page.locator('img[src$=".jpg"]').first().screenshot();
await page.locator('a[href$=".pdf"]').click();
await page.locator('input[name$="_confirm"]').fill('yes');

// Contains
await page.click('[data-test*="submit"]');
await page.locator('[class*="container"]').count();
await page.locator('[id*="main-section"]').isVisible();

✅ 3. Combinators (Hierarchy)

Explanation: Define relationships between elements.

// Descendant
await page.click('form button');
await page.fill('div input', 'Hello');
await page.locator('section h2').nth(1).textContent();

// Direct child
await page.click('ul > li');
await page.locator('div.container > p').nth(0).isVisible();
await page.fill('form > input[type="text"]', 'Name');

// Adjacent sibling
await page.locator('label + input').fill('data');
await page.locator('h1 + p').isVisible();
await page.click('.error + .tooltip');

// General sibling
await page.locator('h2 ~ p').nth(0).textContent();
await page.locator('.heading ~ .note').count();
await page.locator('#title ~ input').nth(1).fill('More info');

✅ 4. Pseudo-Classes

Explanation: Select elements by state or position.

// First and last
await page.locator('li:first-child').click();
await page.locator('tr:last-child td').nth(0).textContent();
await page.locator('ul li:first-child').isVisible();

// nth-child
await page.locator('table tr:nth-child(2) td').nth(1).textContent();
await page.locator('div.card:nth-child(3)').click();
await page.locator('ul li:nth-child(4)').textContent();

// :not
await page.locator('input:not([type="submit"])').first().fill('Text');
await page.locator('button:not(.disabled)').nth(0).click();
await page.locator('a:not([href="#"])').nth(1).click();

✅ 5. Combining Selectors

// Tag + class + attribute
await page.fill('input.login-field[type="text"]', 'username');

// Form structure
await page.click('form#loginForm > div > button.submit-btn');

// Multiple match options
await page.click('button.submit, input[type="submit"]');

// Chained class with child
await page.locator('div.card .card-header > h3').textContent();

// Table row and cell
await page.locator('table.data-table > tbody > tr:nth-child(2) > td:nth-child(3)').textContent();

✅ 6. Playwright-Specific Tips

await page.getByRole('button', { name: 'Submit' });
await page.getByText('Login');
await page.getByPlaceholder('Enter your name');

✅ 7. HTML View Tips

Steps:

  1. Right-click → Inspect Element
  2. Look at tag, class, id, attributes
  3. Build your selector from outer to inner

✅ 8. Recommended Practice

Use data-testid or data-test attributes:

// HTML
<button data-test="submit-btn">Submit</button>

// Playwright
await page.click('[data-test="submit-btn"]');

Comments

Post a Comment

Popular posts from this blog

Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript)

🎥 Setup Browser, Context, Page & Run Config Test Scripts with package.json & playwright.config.js Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript) 1. Install Playwright You can install Playwright using the following command: npm init playwright@latest 2. Create a Basic Test Script Understand the core Playwright architecture: Element Description browser Controls the browser instance (like Chrome, Firefox, etc.) context Acts like a separate browser profile (cookies, localStorage are isolated) page A single browser tab where interaction happens 3. Run the Test npx playwright test example.spec.js Ways to Run TypeScript Tests Way Command Notes 🟢 Via npx npx playwright test Uses built-in TypeScript support 🟢 With s...
Post a Comment
Read more

Playwright Test Structure in Details -Session-02

🎥 Playwright: test.only, Hooks & Grouping with test.describe Explained Let’s go step-by-step , showing how to build from a single test , to using beforeEach / afterEach , and then organizing things with test.describe . ✅ Step 1: Basic Single Test with test.only import { test, expect } from '@playwright/test' ; test. only ( '🚀 Basic test - check title' , async ({ page }) => { await page. goto ( 'https://example.com' ); await expect (page). toHaveTitle ( /Example Domain/ ); }); test.only ensures only this test runs — great for debugging. ✅ Step 2: Add beforeEach and afterEach import { test, expect } from '@playwright/test' ; test. beforeEach ( async ({ page }) => { console . log ( '🔄 Setting up before each test' ); await page. goto ( 'https://example.com' ); }); test. afterEach ( async ({ page }, testInfo) => { console . log ( `📦 Finished test: ${testInfo.title} `); }); test. only ( ...
Post a Comment
Read more

Playwright Locators in JavaScript (Complete Guide)

🎯 Playwright Locators in JavaScript (Complete Guide) This guide explains each Playwright locator with: ✅ What it is 🕐 When to use ⚙️ How to use it 🎯 Benefits 🧪 Code Examples 🔹 1. Locator by ID ✅ What: Selects an element with a unique id . 🕐 When: Element has a unique id . ⚙️ How: page.locator('#username') 🎯 Benefit: Fast and reliable. <input id="username" /> await page.locator('#username').fill('John'); 🔹 2. Locator by Class ✅ What: Selects by class . 🕐 When: Repeated or styled elements. ⚙️ How: page.locator('.password') 🎯 Benefit: Useful for shared styling. <input class="password" /> await page.locator('.password').fill('12345'); 🔹 3. Locator by Text ✅ What: Matches visible element text. 🕐 When: For buttons, links, etc. ⚙️ How: page.getByText('Login') 🎯 Benefit: Human-readable. <button>Login...
Post a Comment
Read more