# Instructions

- Following Playwright test failed.
- Explain why, be concise, respect Playwright best practices.
- Provide a snippet of code with the fix, if possible.

# Test info

- Name: tests/ui/entities.spec.ts >> us.elect.info entity sections - additional index + detail >> employers section - index and random pages
- Location: tests/ui/entities.spec.ts:422:7

# Error details

```
Test timeout of 30000ms exceeded.
```

```
Error: page.goto: net::ERR_ABORTED; maybe frame was detached?
Call log:
  - navigating to "http://10.1.105.89/employers/", waiting until "load"

```

# Test source

```ts
  323 |     expect(filter).toContain('office_district:10');
  324 | 
  325 |     const json = await response.json();
  326 |     const results = json.data?.browseEntities?.results || [];
  327 |     expect(results.length).toBeGreaterThan(0);
  328 |   });
  329 | 
  330 |   test('district profile candidates sorted by total contributions descending', async ({ page }) => {
  331 |     const responsePromise = page.waitForResponse(resp => {
  332 |       if (!resp.url().includes('/api/graphql')) return false;
  333 |       if (resp.request().method() !== 'POST') return false;
  334 |       const body = resp.request().postData() || '';
  335 |       return body.includes('browseEntities');
  336 |     }, { timeout: DATA_LOAD_TIMEOUT });
  337 | 
  338 |     await page.goto(DISTRICT_PATH);
  339 |     const response = await responsePromise;
  340 | 
  341 |     const json = await response.json();
  342 |     const results = json.data?.browseEntities?.results || [];
  343 |     expect(results.length).toBeGreaterThan(1);
  344 | 
  345 |     const contributions = results.map((r: { metadata?: string }) => {
  346 |       try {
  347 |         const meta = JSON.parse(r.metadata || '{}');
  348 |         return meta.total_contributions || 0;
  349 |       } catch { return 0; }
  350 |     });
  351 | 
  352 |     for (let i = 1; i < contributions.length; i++) {
  353 |       expect(contributions[i - 1]).toBeGreaterThanOrEqual(contributions[i]);
  354 |     }
  355 |   });
  356 | });
  357 | 
  358 | // Helper to intercept browseEntities GraphQL response and extract score values
  359 | async function getBrowseScores(page: import('@playwright/test').Page, url: string): Promise<number[]> {
  360 |   const responsePromise = page.waitForResponse(resp => {
  361 |     if (!resp.url().includes('/api/graphql')) return false;
  362 |     if (resp.request().method() !== 'POST') return false;
  363 |     const body = resp.request().postData() || '';
  364 |     return body.includes('browseEntities');
  365 |   }, { timeout: DATA_LOAD_TIMEOUT });
  366 |   await page.goto(url);
  367 |   const response = await responsePromise;
  368 |   const json = await response.json();
  369 |   const results = json.data?.browseEntities?.results || [];
  370 |   return results.map((r: { score?: number }) => r.score || 0);
  371 | }
  372 | 
  373 | test.describe('entity browse sort order - quantitative fields', () => {
  374 | 
  375 |   test('candidates sorted by total contributions descending', async ({ page }) => {
  376 |     const scores = await getBrowseScores(page, '/candidates/');
  377 |     expect(scores.length).toBeGreaterThan(1);
  378 |     for (let i = 1; i < scores.length; i++) {
  379 |       expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]);
  380 |     }
  381 |   });
  382 | 
  383 |   test('committees sorted by total receipts descending', async ({ page }) => {
  384 |     const scores = await getBrowseScores(page, '/committees/');
  385 |     expect(scores.length).toBeGreaterThan(1);
  386 |     for (let i = 1; i < scores.length; i++) {
  387 |       expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]);
  388 |     }
  389 |   });
  390 | 
  391 |   test('vendors sorted by total received descending', async ({ page }) => {
  392 |     const scores = await getBrowseScores(page, '/vendors/');
  393 |     expect(scores.length).toBeGreaterThan(1);
  394 |     for (let i = 1; i < scores.length; i++) {
  395 |       expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]);
  396 |     }
  397 |   });
  398 | 
  399 |   test('individuals sorted by total contributions descending', async ({ page, request, baseURL }) => {
  400 |     await skipIfPremiumGated(request, '/individuals/');
  401 |     await premiumVisitor(page.context(), baseURL); // donor records are premium (sites#277)
  402 |     const scores = await getBrowseScores(page, '/individuals/');
  403 |     expect(scores.length).toBeGreaterThan(1);
  404 |     // A stale search index scores every donor 0 and the order means nothing.
  405 |     expect(scores[0], 'top individual donor should have contributions').toBeGreaterThan(0);
  406 |     for (let i = 1; i < scores.length; i++) {
  407 |       expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]);
  408 |     }
  409 |   });
  410 | 
  411 |   test('employers sorted by total employee contributions descending', async ({ page }) => {
  412 |     const scores = await getBrowseScores(page, '/employers/');
  413 |     expect(scores.length).toBeGreaterThan(1);
  414 |     for (let i = 1; i < scores.length; i++) {
  415 |       expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]);
  416 |     }
  417 |   });
  418 | });
  419 | 
  420 | test.describe('us.elect.info entity sections - additional index + detail', () => {
  421 | 
  422 |   test('employers section - index and random pages', async ({ page }) => {
> 423 |     const indexResponse = await page.goto('/employers/');
      |                                      ^ Error: page.goto: net::ERR_ABORTED; maybe frame was detached?
  424 |     expect(indexResponse?.status(), '/employers/ should answer 200').toBe(200);
  425 |     await expect(page.locator('h1')).toContainText(/Employers/i);
  426 | 
  427 |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  428 | 
  429 |     const links = await page.locator('.entity-search-result').all();
  430 |     expect(links.length).toBeGreaterThan(0);
  431 | 
  432 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  433 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  434 | 
  435 |     for (const href of randomLinks) {
  436 |       const entityResponse = await page.goto(toRelativePath(href));
  437 |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  438 |       await expect(page.locator('h1')).toBeVisible();
  439 |     }
  440 |   });
  441 | 
  442 |   test('vendors section - index and random pages', async ({ page }) => {
  443 |     const indexResponse = await page.goto('/vendors/');
  444 |     expect(indexResponse?.status(), '/vendors/ should answer 200').toBe(200);
  445 |     await expect(page.locator('h1')).toContainText(/Vendors/i);
  446 | 
  447 |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  448 | 
  449 |     const links = await page.locator('.entity-search-result').all();
  450 |     expect(links.length).toBeGreaterThan(0);
  451 | 
  452 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  453 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  454 | 
  455 |     for (const href of randomLinks) {
  456 |       const entityResponse = await page.goto(toRelativePath(href));
  457 |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  458 |       await expect(page.locator('h1')).toBeVisible();
  459 |     }
  460 |   });
  461 | 
  462 |   test('counties section - index and random detail pages', async ({ page }) => {
  463 |     await page.goto('/counties/');
  464 | 
  465 |     // Map view is default — verify Leaflet map renders with GeoJSON state shapes
  466 |     await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  467 |     await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  468 |     const shapes = await page.locator('#map .leaflet-interactive').all();
  469 |     expect(shapes.length).toBeGreaterThan(0);
  470 | 
  471 |     // Switch to List view to test county results and detail navigation
  472 |     await page.locator('.toggle-btn[data-view="list"]').click();
  473 | 
  474 |     // Wait for results to load
  475 |     await page.waitForSelector('.county-result, .county-error', { timeout: DATA_LOAD_TIMEOUT });
  476 |     const results = await page.locator('.county-result').all();
  477 |     expect(results.length).toBeGreaterThan(0);
  478 | 
  479 |     // County results are <a> tags - pick random ones and visit detail pages
  480 |     const hrefs = await Promise.all(results.slice(0, 20).map(r => r.getAttribute('href')));
  481 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  482 | 
  483 |     for (const href of randomLinks) {
  484 |       const entityResponse = await page.goto(toRelativePath(href));
  485 |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  486 |       await expect(page.locator('h1')).toBeVisible();
  487 |     }
  488 |   });
  489 | 
  490 |   test('places section - index and random detail pages', async ({ page }) => {
  491 |     await page.goto('/places/');
  492 | 
  493 |     // Map view is default — verify Leaflet map renders with GeoJSON state shapes
  494 |     await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  495 |     await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  496 |     const shapes = await page.locator('#map .leaflet-interactive').all();
  497 |     expect(shapes.length).toBeGreaterThan(0);
  498 | 
  499 |     // Switch to List view to test place results and detail navigation
  500 |     await page.locator('.toggle-btn[data-view="list"]').click();
  501 | 
  502 |     // Wait for results to load
  503 |     await page.waitForSelector('.place-result, .place-error', { timeout: DATA_LOAD_TIMEOUT });
  504 |     const results = await page.locator('.place-result').all();
  505 |     expect(results.length).toBeGreaterThan(0);
  506 | 
  507 |     // Pick random results and visit detail pages
  508 |     const hrefs = await Promise.all(results.slice(0, 20).map(r => r.getAttribute('href')));
  509 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  510 | 
  511 |     for (const href of randomLinks) {
  512 |       const entityResponse = await page.goto(toRelativePath(href));
  513 |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  514 |       await expect(page.locator('h1')).toBeVisible();
  515 |     }
  516 |   });
  517 | 
  518 |   test('postalcodes section - index and random detail pages', async ({ page }) => {
  519 |     await page.goto('/postalcodes/');
  520 | 
  521 |     // Map view is default — verify Leaflet map renders with GeoJSON state shapes
  522 |     await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  523 |     await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
```