Blog # 11: Conquer Web Tables & Pagination with Playwright: A Step-by-Step Quest 🧙‍♂️

Web automation becomes magical when you tackle challenges step-by-step. Ready for a clearly structured adventure with focused levels? Let's go! 🚀  

🗺️ Quest Map  

1. Level 1: Validate Table Structure  

2. Level 2: Checkbox Wizardry  

3. Level 3: Single-Page Data Heist  

4. Level 4: Pagination Labyrinth  

5. Final Boss: Cross-Realm Data Analysis  

🛠️ Setup: Prepare Your Weapons  

const { test, expect } = require('@playwright/test');

test('Webtable & Pagination Mastery', async ({ page }) => {
  await page.goto('https://testautomationpractice.blogspot.com/');
  const webtable = page.locator('#productTable');
  // ... Your code conquers here!
});

🏰 Level 1: Validate the Table Fortress  

"First, know thy enemy's defenses!"  

Challenge: Verify columns and rows  

// Column Guardian
const columns = webtable.locator('thead tr th');
await expect(columns).toHaveCount(4); 
console.log(`🛡️ ${await columns.count()} columns standing guard!`);

// Row Soldiers
const firstPageRows = webtable.locator('tbody tr');
await expect(firstPageRows).toHaveCount(5);
console.log(`⚔️ ${await firstPageRows.count()} rows on first page!`);

Pro Tip: Fail here? The table might be shape-shifting! 🧙‍♂️  

🔮 Level 2: Checkbox Enigma  

"Activate the magical 'Wireless Earbuds' checkbox!"  

const targetRow = firstPageRows.filter({
  has: page.locator('td'),
  hasText: 'Wireless Earbuds' // Exact spell required!
});

await targetRow.locator('[type="checkbox"]').check();
console.log('🔑 Checkbox activated! Portal to Level 3 opens...');

Danger: One typo = 100 angry checkbox goblins! 🧌  

🕵️ Level 3: First-Page Data Heist  

"Steal treasure from the CURRENT realm only!"  

let productCount = 1;

for (let i = 0; i < await firstPageRows.count(); i++) {
  const row = firstPageRows.nth(i);
  const cells = row.locator('td');
  
  const productName = await cells.nth(1).textContent();
  const price = await cells.nth(2).textContent();
  
  console.log(`💰 #${productCount}: ${productName} (${price})`);
  productCount++;
}

🧭 Level 4: Pagination Labyrinth  

"Now conquer ALL data realms!"  

  const pagination = page.locator('.pagination a');
  let productCount = 1;
  
  for (let p = 0; p < await pagination.count(); p++) {
    if (p > 0) {
      await pagination.nth(p).click();
      await page.waitForTimeout(2000); // Simple delay
    }

    const rows = page.locator('table#productTable tr');
    for (let i = 0; i < await rows.count(); i++) {
      const row = rows.nth(i);
      const name = await row.locator('td:nth-child(2)').textContent();
      const price = await row.locator('td:nth-child(3)').textContent();
      
      console.log(`${productCount}. Product: ${productName} | Price: ${price}`);
      productCount++; // Increment the counter

    }
  }

🐉 Final Boss: Cross-Realm Data Dragon  

🏆 Boss Battle: Golden Product Gauntlet

 

"Prove your skills in 3...2...1... GO!"

Your Mission:

🔥 Find the MOST EXPENSIVE item across ALL pages

🔥 Log it like: 🏆 Ultimate Treasure: PRODUCT ($PRICE)

// STARTER CODE
let maxPrice = 0;
let goldenProduct = '';

/* Your magic here! */

console.log(`🏆 Ultimate Treasure: ${goldenProduct} ($${maxPrice})`);

Victory Reward: Eternal glory in the Console Hall of Fame! 🏛️  

Got stuck? Found a cooler way? Comment below! Let’s build the ultimate Playwright community. 💬

Happy Coding! 👩💻👨💻