`scripts/repro-race.js`

37 lines
// Deterministically trip the route() race: click panels rapidly (no settle).
const { chromium } = require('playwright');
const BASE = 'https://marketing.designerwallcoverings.com';
const LABELS = ['Streams Board', 'Social Scheduler', 'Engine', 'Campaign Templates', 'Marketing Calendar', 'Suggested Copy'];
(async () => {
  const browser = await chromium.launch();
  const ctx = await browser.newContext({ viewport: { width: 1600, height: 900 }, httpCredentials: { username: 'admin', password: 'DW2024!' } });
  const page = await ctx.newPage();
  const errs = [];
  page.on('pageerror', e => errs.push('' + e));
  page.on('console', m => m.type() === 'error' && errs.push(m.text().slice(0, 160)));
  await page.goto(BASE + '/', { waitUntil: 'domcontentloaded' });
  await page.waitForTimeout(2500);

  // RAPID: click each label with only 120ms between — well under fetch latency → interleave.
  for (const label of LABELS) {
    try { const el = page.locator('a', { hasText: new RegExp(label, 'i') }).first(); if (await el.count()) await el.click({ timeout: 3000 }); } catch {}
    await page.waitForTimeout(120);
  }
  // Now land on Streams Board and give it plenty of time to settle.
  try { await page.locator('a', { hasText: /Streams Board/i }).first().click(); } catch {}
  await page.waitForTimeout(4000);
  const res = await page.evaluate(() => {
    const cards = document.querySelectorAll('.bd-card, [class*="card"], article');
    const title = (document.querySelector('#paneltitle')?.innerText || '').trim();
    const loadingStuck = /loading/i.test((document.querySelector('#panel')?.innerText || '').slice(0, 40));
    return { title, cards: cards.length, loadingStuck, panelText: (document.querySelector('#panel')?.innerText || '').trim().slice(0, 120) };
  });
  console.log('AFTER RAPID NAV → land on Streams Board:');
  console.log('  title      :', res.title);
  console.log('  cards      :', res.cards, res.cards === 0 ? '  <-- BLANK (race tripped)' : '  (rendered)');
  console.log('  loadingStuck:', res.loadingStuck);
  console.log('  panelText  :', JSON.stringify(res.panelText));
  console.log('  errors     :', JSON.stringify([...new Set(errs)]));
  await ctx.close(); await browser.close();
})().catch(e => { console.error('FATAL', e); process.exit(1); });