Understand browser, context, and page in Playwright

🎯 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"]');