🤖 Day 7 - Playwright Basics & First Test

"From Manual Testing to Automation - Your First Robot QA"

Theme: Automation Kickoff

🕒 Session Flow

🎭 Warm-up Story (5 min)

👉 "Imagine testing OpenCart manually: you open Chrome, type the URL, enter login, verify. Now, Playwright is just a robot doing the same for us — faster, repeatable, and across multiple browsers."

1. ⚙️ Installation & Setup (10 min)

npm init playwright@latest

🔧 Layman's Explanation

  • npm = tool that brings us Playwright
  • This creates folders like tests/, config/

Analogy: "Like installing WhatsApp before chatting. Playwright is our test messenger."

💡 What happens during installation?

  • Downloads Playwright and browser binaries
  • Creates project structure
  • Sets up configuration files
  • Installs sample tests

2. 📁 File Structure (10 min)

tests/ → test cases playwright.config.js → settings (like environment sheet) node_modules/ → downloaded tools package.json → project configuration

🏗️ Structure Analogy

"Think of tests/ as your Test Case folder, and config as your Test Plan."

📋 File Structure Breakdown

Folder/File Purpose QA Analogy
tests/ Contains all test files Test Case Repository
playwright.config.js Project configuration Test Environment Sheet
node_modules/ Dependencies and tools Toolbox
package.json Project metadata Project Documentation

3. 🧪 First Test with Import (20 min)

📦 Import Explanation

"Like borrowing a tool from a toolbox instead of re-making it every time."

import { test, expect } from '@playwright/test'; test('Open OpenCart', async ({ page }) => { await page.goto('https://demo.opencart.com/'); await expect(page).toHaveTitle(/Your Store/); });
npx playwright test

💡 Test Breakdown

  • import - Get tools from Playwright
  • test() - Define a test case
  • page - Browser page object
  • goto() - Navigate to URL
  • expect() - Assertion/verification

💡 Interactive Q:

"If I don't import test, expect, what will happen?"

Answer: Error: not defined

4. 🌐 Browser, Context, Page (25 min)

🔍 Manual Analogy

  • Browser → Chrome itself (big program)
  • Context → like Incognito window
  • Page → tab inside that window
const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const context = await browser.newContext(); const page = await context.newPage(); await page.goto('https://demo.opencart.com/'); console.log(await page.title()); await browser.close(); })();

🛒 Why Context? Story Example

"Imagine you're testing OpenCart checkout. One context = one customer. If you want 5 customers buying at once, you need 5 contexts."

🎯 Browser Hierarchy Demo

💡 Why not directly Page?

  • Because a Page belongs to a Context
  • Context helps run multiple users in parallel
  • Each context is isolated (like separate browser sessions)

5. ⏳ async/await (10 min)

🔄 Async/Await Explanation

  • JS runs line by line, but browser actions take time
  • await = wait until step finishes

Analogy: "Like standing in a queue. You can't pay before scanning groceries."

await page.goto('https://demo.opencart.com/'); await page.fill('#search', 'Laptop'); await page.click('button[type=submit]');

💡 Without await - What happens?

If you don't use await, the test will try to execute all steps at once, causing failures.

6. 👁️ Headless vs Headed (10 min)

const browser = await chromium.launch({ headless: false });

🔄 Headless vs Headed Comparison

Mode UI Visible Speed Use Case
Headless No UI Faster CI/CD, Production
Headed You can see steps Slower Debugging, Development

🤖 Analogy

"Headless = robot working at night unseen. Headed = robot working in front of you."

💡 When to use which?

  • Headless: CI/CD pipelines, automated runs
  • Headed: Debugging, development, demo

🎯 Day 6 Learning Outcomes

📅 Day 7 Preview – Selectors & First Login Test

Duration: 1.5 hrs

🕒 What's Coming Next:

// Day 7 Preview - Login Test test('Login test', async ({ page }) => { await page.goto('https://demo.opencart.com/index.php?route=account/login'); await page.fill('#input-email', 'test@example.com'); await page.fill('#input-password', 'password123'); await page.click('input[type=submit]'); await expect(page).toHaveURL(/route=account/); });