Blog # 11: Conquer Web Tables & Pagination with Playwright: A Step-by-Step Quest ๐งโโ๏ธ
Published on April 1, 2025
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! ๐ฉ๐ป๐จ๐ป