Recipe
This recipe shows how to scrape data from pages with “Load More” buttons by clicking until the button disappears or reaches a maximum number of clicks.TypeScript
import { BrowserContext, Page, Locator } from "playwright";
interface BoxItem {
text: string;
}
// Click button until it disappears or max clicks reached
async function clickUntilExhausted(
buttonLocator: Locator,
maxClicks: number,
page:Page
): Promise<void> {
let clicks = 0;
while (clicks < maxClicks) {
await page.waitForTimeout(3000)
const isVisible = await buttonLocator.isVisible();
if (!isVisible) {
break;
}
await buttonLocator.click();
clicks++;
}
}
// Extract box items from the page
async function extractItems(page: Page): Promise<BoxItem[]> {
const results: BoxItem[] = [];
const boxes = page.locator("div.grid div.h-64");
const count = await boxes.count();
for (let i = 0; i < count; i++) {
const box = boxes.nth(i);
const text = await box.textContent();
if (text) {
results.push({
text: text.trim(),
});
}
}
return results;
}
export default async function handler(
params: { maxClicks?: number },
page: Page,
context: BrowserContext
) {
await page.goto("https://sandbox.intuned.dev/load-more");
// Locate the "Load More" button in main content area (not sidebar)
const loadMoreButton = page.locator("main.flex-1 button:has-text('Load More')");
// Click until button disappears or max clicks reached
await clickUntilExhausted(loadMoreButton, params.maxClicks ?? 50,page);
// Extract all items after content is loaded
const items = await extractItems(page);
console.log(`Extracted ${items.length} items`);
return items;
}