Projects and Devices

🎭 Playwright Projects & Devices: Your Testing Orchestra

Analogy: Think of Playwright like a TV remote control for your app. Just like one remote can control many TVs (big ones, small ones, smart ones), Playwright’s configuration lets you test your app on many different “screens” at once!

🎬 The Story Begins

Imagine you’re a chef who wants to make sure your food tastes good to EVERYONE — kids, adults, people who like spicy food, people who don’t. You wouldn’t just taste it yourself and say “done!”

That’s what testing is like! Your website needs to work for:

• 👴 People using old computers
• 📱 People on tiny phones
• 🖥️ People on big monitors
• 🌍 People from different countries

Playwright’s Projects and Devices configuration is your magic recipe book that tests your app everywhere, all at once!

📚 What We’ll Learn

graph TD
    A["🎯 Projects Configuration"] --> B["🌐 Multi-Browser Testing"]
    B --> C["📱 Mobile Viewport"]
    C --> D["👆 Touch Events"]
    D --> E["🔍 Device Scale Factor"]
    E --> F["🕵️ User Agent"]
    F --> G["📐 Viewport Configuration"]

1️⃣ Projects Configuration

What is it?

Think of projects like different “outfits” for your tests. The SAME test can wear different outfits to check different situations!

Simple Example

// playwright.config.js
export default {
  projects: [
    { name: 'Chrome' },
    { name: 'Firefox' },
    { name: 'Safari' }
  ]
}

What happens? Your test runs THREE times — once in Chrome, once in Firefox, once in Safari. Like trying the same dish with three different spoons!

Real Life Use

2️⃣ Multi-Browser Testing

The Problem It Solves

Your app looks PERFECT in Chrome. But wait… your friend opens it in Safari and… 💥 broken!

How Playwright Helps

export default {
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' }
    },
    {
      name: 'firefox',
      use: { browserName: 'firefox' }
    },
    {
      name: 'webkit',
      use: { browserName: 'webkit' }
    }
  ]
}

The Magic

Run npx playwright test and Playwright tests ALL browsers automatically!

graph TD
    A["Your Test"] --> B["Chromium"]
    A --> C["Firefox"]
    A --> D["WebKit/Safari"]
    B --> E["✅ Pass?"]
    C --> F["✅ Pass?"]
    D --> G["✅ Pass?"]

3️⃣ Mobile Viewport Emulation

What’s a Viewport?

The viewport is the “window” through which you see a website. On a phone, it’s small. On a desktop, it’s big!

The Remote Control Analogy

Imagine you have a magic window that can shrink or grow. That’s what viewport emulation does — it makes your browser PRETEND to be a phone screen!

Example

{
  name: 'Mobile Chrome',
  use: {
    viewport: {
      width: 375,
      height: 667
    }
  }
}

375 x 667 = iPhone SE screen size!

Quick Reference

4️⃣ Touch Event Emulation

Desktop vs Mobile

• Desktop: You click with a mouse 🖱️
• Mobile: You tap with your finger 👆

These are DIFFERENT! Some websites have special things that only work with touch.

How to Enable Touch

{
  name: 'Mobile Touch',
  use: {
    hasTouch: true,
    viewport: { width: 375, height: 667 }
  }
}

hasTouch: true tells Playwright: “Pretend you have fingers, not a mouse!”

What Changes?

5️⃣ Device Scale Factor

The Magnifying Glass Problem

Ever notice how images look BLURRY on some phones but CRISP on others?

That’s because of the device scale factor (also called DPR - Device Pixel Ratio).

Simple Explanation

• Scale 1: 1 CSS pixel = 1 real pixel
• Scale 2: 1 CSS pixel = 4 real pixels (2x2)
• Scale 3: 1 CSS pixel = 9 real pixels (3x3)

Example

{
  name: 'Retina Display',
  use: {
    deviceScaleFactor: 2
  }
}

graph LR
    A["Scale 1"] --> B["Normal Screen"]
    C["Scale 2"] --> D["Retina/HD Screen"]
    E["Scale 3"] --> F["Super HD Phone"]

6️⃣ User Agent Configuration

What is a User Agent?

When you visit a website, your browser says “Hello! I am Chrome on Windows!”

That message is called the User Agent. It’s like showing your ID card at a door.

Why Change It?

Some websites show DIFFERENT content based on who’s visiting:

• Phone users might see a simpler menu
• Desktop users might see more features

Example

{
  name: 'iPhone Safari',
  use: {
    userAgent: 'Mozilla/5.0 (iPhone; ' +
      'CPU iPhone OS 14_0) ' +
      'AppleWebKit/605.1.15 ' +
      'Mobile/15A372 Safari/604.1'
  }
}

Now the website THINKS you’re using an iPhone!

7️⃣ Viewport Configuration (Deep Dive)

Beyond Width and Height

Viewport isn’t just about size. It’s about the WHOLE experience!

Full Configuration Example

{
  name: 'Complete Mobile Setup',
  use: {
    viewport: {
      width: 390,
      height: 844
    },
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true,
    userAgent: '...(iPhone string)...'
  }
}

The isMobile Flag

isMobile: true

This tells websites: “I’m a mobile device!” Some sites check this to decide what to show you.

🎯 Putting It All Together

The Ultimate Configuration

// playwright.config.js
import { devices } from '@playwright/test';

export default {
  projects: [
    // Desktop Browsers
    {
      name: 'Desktop Chrome',
      use: {
        ...devices['Desktop Chrome']
      }
    },
    {
      name: 'Desktop Firefox',
      use: {
        ...devices['Desktop Firefox']
      }
    },

    // Mobile Devices
    {
      name: 'iPhone 12',
      use: {
        ...devices['iPhone 12']
      }
    },
    {
      name: 'Pixel 5',
      use: {
        ...devices['Pixel 5']
      }
    }
  ]
}

What devices Gives You

Playwright has BUILT-IN device configurations! No need to remember all those numbers!

devices['iPhone 12']
// Automatically includes:
// - viewport: { width: 390, height: 844 }
// - deviceScaleFactor: 3
// - isMobile: true
// - hasTouch: true
// - userAgent: (correct iPhone string)

🌟 The Grand Finale

graph TD
    A["playwright.config.js"] --> B["Projects Array"]
    B --> C["Project 1: Desktop Chrome"]
    B --> D["Project 2: iPhone 12"]
    B --> E["Project 3: Pixel 5"]
    C --> F["Tests Run in Chrome"]
    D --> G["Tests Run as iPhone"]
    E --> H["Tests Run as Android"]
    F --> I["All Results Combined!"]
    G --> I
    H --> I

💡 Remember This!

🚀 You Did It!

You now understand how to:

• ✅ Create projects for different test scenarios
• ✅ Test across Chrome, Firefox, and Safari
• ✅ Emulate mobile screens
• ✅ Enable touch interactions
• ✅ Handle high-resolution displays
• ✅ Pretend to be any device with User Agent
• ✅ Configure viewports like a pro

Your tests are now ready to conquer EVERY device! 🎉