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 reachedasync 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 pageasync 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;}