🎯 Playwright Content Assertions: The Detective’s Toolkit

Imagine you’re a detective checking if everything in a room is exactly where it should be. That’s what Content Assertions do in Playwright!

🌟 The Big Picture

When you test a website, you need to check if things look right. Did the button say “Submit”? Does the input box have the right value? Is the element styled correctly?

Content Assertions are your magnifying glass 🔍 — they help you inspect and verify what’s actually on the page.

🏠 Our Everyday Analogy: The Home Inspector

Think of yourself as a Home Inspector visiting a house:

• You check if the nameplate says the right name → toHaveText
• You check if the nameplate contains the family name → toContainText
• You check what’s written on the thermostat → toHaveValue
• You check if the door has a brass handle (attribute) → toHaveAttribute
• You check if the room is painted blue (class) → toHaveClass
• You check if the walls are exactly sky-blue (CSS) → toHaveCSS
• You count how many windows are there → toHaveCount

1️⃣ toHaveText — “Does it say EXACTLY this?”

What is it?

Checks if an element’s text matches exactly what you expect.

Real Life Example

You’re at a door. The nameplate should say “Smith Family” — not “The Smiths”, not “smith family”. Exactly “Smith Family”.

Code Example

// Check if button says exactly "Submit"
await expect(
  page.locator('button')
).toHaveText('Submit');

// Check multiple items at once
await expect(
  page.locator('li')
).toHaveText(['Apple', 'Banana', 'Cherry']);

💡 Pro Tip

• Whitespace matters! "Hello" ≠ " Hello "
• Use regex for flexible matching: .toHaveText(/Submit/i)

2️⃣ toContainText — “Does it INCLUDE this?”

What is it?

Checks if an element’s text contains the expected text somewhere inside.

Real Life Example

The welcome banner says “Welcome to the Smith Family Home”. You just want to verify it mentions “Smith” somewhere.

Code Example

// Check if heading contains "Welcome"
await expect(
  page.locator('h1')
).toContainText('Welcome');

// Case-insensitive check
await expect(
  page.locator('.message')
).toContainText('success', { ignoreCase: true });

When to Use?

• When you don’t care about the full text
• When text might have dynamic parts (dates, numbers)

graph TD
    A[Text: Welcome User123!] --> B{toHaveText}
    A --> C{toContainText}
    B -->|❌| D[Needs exact match]
    C -->|✅| E[Just needs 'Welcome']

3️⃣ toHaveValue — “What’s typed in the box?”

What is it?

Checks the value inside input fields, textareas, or select dropdowns.

Real Life Example

You filled out a form. The email field should show “john@email.com”. This verifies what’s actually typed in.

Code Example

// Check input field value
await expect(
  page.locator('#email')
).toHaveValue('john@email.com');

// Check textarea content
await expect(
  page.locator('textarea')
).toHaveValue('Hello World');

// Check dropdown selection
await expect(
  page.locator('select')
).toHaveValue('option2');

🎯 Key Point

This checks the value property, not the visible text label!

4️⃣ toHaveAttribute — “Does it have this feature?”

What is it?

Checks if an element has a specific HTML attribute with a specific value.

Real Life Example

Checking if a door has a brass handle (attribute = “handle”, value = “brass”).

Code Example

// Check if link goes to Google
await expect(
  page.locator('a')
).toHaveAttribute('href', 'https://google.com');

// Check if image has alt text
await expect(
  page.locator('img')
).toHaveAttribute('alt', 'Profile Picture');

// Check if button is disabled
await expect(
  page.locator('button')
).toHaveAttribute('disabled', '');

Common Attributes to Check

5️⃣ toHaveClass — “What category is it?”

What is it?

Checks if an element has a specific CSS class applied.

Real Life Example

Rooms are painted different colors. The living room should have the “painted-blue” class. You’re verifying the room category.

Code Example

// Check for single class
await expect(
  page.locator('button')
).toHaveClass('btn-primary');

// Check for one of multiple classes
await expect(
  page.locator('.alert')
).toHaveClass(/success/);

// Element can have many classes
// <div class="card active highlighted">
await expect(
  page.locator('.card')
).toHaveClass(/active/);

💡 Important

• An element can have many classes: class="btn btn-large active"
• You can check for any one of them using regex

6️⃣ toHaveCSS — “What’s the exact style?”

What is it?

Checks the computed CSS style of an element — the actual visual styling.

Real Life Example

Not just “is it blue?” but “is it exactly sky-blue (#87CEEB)?”

Code Example

// Check exact color
await expect(
  page.locator('.header')
).toHaveCSS('color', 'rgb(255, 0, 0)');

// Check font size
await expect(
  page.locator('h1')
).toHaveCSS('font-size', '24px');

// Check background
await expect(
  page.locator('.banner')
).toHaveCSS('background-color', 'rgb(0, 128, 0)');

🎨 CSS Values are Computed!

graph TD
    A[You write: red] --> B[Browser computes]
    B --> C[Becomes: rgb 255, 0, 0]
    D[You write: 2em] --> B
    B --> E[Becomes: 32px]

Tip: Colors become rgb(), sizes become px.

7️⃣ toHaveCount — “How many are there?”

What is it?

Counts the number of elements that match a selector.

Real Life Example

“There should be exactly 5 windows in this room.”

Code Example

// Check exact count
await expect(
  page.locator('li')
).toHaveCount(5);

// Check table has 10 rows
await expect(
  page.locator('table tr')
).toHaveCount(10);

// Check no error messages
await expect(
  page.locator('.error')
).toHaveCount(0);

🚀 Power Combo

// After adding 3 items to cart
await page.click('#add-to-cart');
await page.click('#add-to-cart');
await page.click('#add-to-cart');

// Verify cart has 3 items
await expect(
  page.locator('.cart-item')
).toHaveCount(3);

🗺️ Quick Decision Map

graph LR
    A[What do you want to check?] --> B{Text content?}
    B -->|Exact match| C[toHaveText]
    B -->|Partial match| D[toContainText]
    A --> E{Form input value?}
    E --> F[toHaveValue]
    A --> G{HTML attribute?}
    G --> H[toHaveAttribute]
    A --> I{CSS class?}
    I --> J[toHaveClass]
    A --> K{Visual style?}
    K --> L[toHaveCSS]
    A --> M{Number of elements?}
    M --> N[toHaveCount]

🎓 Summary: Your Assertion Toolkit

🌈 You Did It!

You now have 7 powerful tools in your testing toolkit:

1. toHaveText — The Exact Matcher 🎯
2. toContainText — The Partial Finder 🔍
3. toHaveValue — The Input Inspector 📝
4. toHaveAttribute — The Property Checker ✅
5. toHaveClass — The Category Verifier 🏷️
6. toHaveCSS — The Style Detective 🎨
7. toHaveCount — The Element Counter 🔢

Like a skilled detective, you can now verify anything on a webpage with confidence! 🕵️‍♂️

Remember: Good tests are like good detectives — they check everything important and catch problems before users do! 🚀