⏰ Advanced Playwright Tools

"Timeouts, Codegen, Inspectors & Locators - Mastering Core Automation Features"

Duration: 1.5 Hours | Theme: Advanced Playwright Features

🕒 Session Flow

🎭 Story Warm-up (5 min)

👉 "As testers, when we wait for a page to load, we count seconds in our head. Playwright also needs patience — it has built-in timeouts. Similarly, just like we record steps in test case docs, Playwright can record your actions automatically. And to interact with elements, we need their addresses (locators)."

1. ⏰ Timeouts (15 min)

🕐 Timeout Analogy

"Like telling a junior tester → wait max 20 sec for the login button. If not visible, fail the test."

// Global timeout example test('timeout demo', async ({ page }) => { test.setTimeout(20000); // 20 seconds for whole test await page.goto('https://demo.opencart.com/'); await expect(page.locator('#login')).toBeVisible(); });
// Expect timeout await expect(page.locator('#login')).toBeVisible({ timeout: 5000 }); await page.locator('#input-email').fill('test@example.com', { timeout: 3000 });

💡 Timeout Types

  • Global Timeout: Set for entire test
  • Action Timeout: Set for specific actions
  • Navigation Timeout: Set for page loads

💡 Interactive Q:

"Why not always set very high timeout (like 60 sec)?"

Answer: Because tests become slow, fail late

2. 🎬 Codegen (10 min)

npx playwright codegen https://demo.opencart.com/

📝 Codegen Story

"Like recording test steps in Excel, but here it generates code for you."

💡 What Codegen Does:

  • Opens browser automatically
  • Records your clicks and typing
  • Generates Playwright code in real-time
  • Creates a test file with your actions

🎯 Mini Task: Try Codegen

  1. Run the codegen command
  2. Navigate to OpenCart login page
  3. Enter email and password
  4. Click login button
  5. Copy the generated code

3. 🔍 Playwright Inspector (10 min)

PWDEBUG=1 npx playwright test

🔍 Inspector Analogy

"Like breakpoints in manual testing: you stop, check the screen, and continue."

💡 Inspector Features:

  • Debug step by step
  • Pause test execution
  • Inspect elements
  • View test state
  • Resume execution

🎯 Mini Task: Debug with Inspector

  1. Run a test with PWDEBUG=1
  2. Watch the inspector open
  3. Step through the test
  4. Pause at different points
  5. Inspect page elements

4. 🎯 Locators Deep Dive (30 min)

🎯 Why Locators are Critical

Without correct element address → test fails

📋 Locator Types Comparison

Locator Type Example Recommendation
CSS #input-email ✅ Recommended
XPath //input[@id='input-email'] ⚠️ Not recommended
Text-based text=Login ✅ Good for buttons
Role-based getByRole('button') ✅ Modern approach

📋 Locator Rules

// 1. If ID present (Best practice) await page.locator('#input-email').fill('test@example.com'); // 2. If Class present await page.locator('.form-control').first().fill('test@example.com'); // 3. By Any Attribute await page.locator('input[name="email"]').fill('test@example.com'); // 4. Parent → Child Traversal await page.locator('form#login-form >> input[type="password"]').fill('Password123'); // 5. By Text await page.locator('text=Login').click();

💡 OpenCart Login Page Examples

5. 🛠️ Locator Methods (10 min)

// .fill() → recommended (replaces old .type()) await page.locator('#input-password').fill('Password123'); // .click() for buttons and links await page.locator('input[type=submit]').click(); // .first() for multiple elements await page.locator('.form-control').first().fill('email'); // .nth(index) for specific element await page.locator('.product-item').nth(2).click(); // .getByRole() - newer recommended method await page.getByRole('button', { name: 'Login' }).click(); // .getByText() - text-based selection await page.getByText('Login').click();

💡 Important Note:

.type() is deprecated. Use .fill() instead!

💡 Method Comparison

Method Use Case Example
.fill() Input fields await page.locator('#email').fill('test@example.com')
.click() Buttons, links await page.locator('button').click()
.first() Multiple elements await page.locator('.item').first().click()
.getByRole() Accessible elements await page.getByRole('button').click()

6. 🧪 Demo Test – Login with Proper Locators (15 min)

🎯 Complete Login Test Example

import { test, expect } from '@playwright/test'; test('Login with locators', async ({ page }) => { // Navigate to login page await page.goto('https://demo.opencart.com/index.php?route=account/login'); // Fill email using ID locator (best practice) await page.locator('#input-email').fill('test@example.com'); // Fill password using ID locator await page.locator('#input-password').fill('password123'); // Click submit using attribute locator await page.locator('input[type=submit]').click(); // Verify successful login await expect(page).toHaveURL(/route=account/); });

🎯 Practice Exercise

  1. Create a new test file
  2. Write login test using proper locators
  3. Add timeout configurations
  4. Run with inspector for debugging
  5. Verify the test passes

🎯 Learning Outcomes