Skip to main content

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