# 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 >> counties section - index and random detail pages - Location: tests/ui/entities.spec.ts:477:7 # Error details ``` Error: expect(locator).toBeVisible() failed Locator: locator('#map .leaflet-interactive').first() Expected: visible Timeout: 15000ms Error: element(s) not found Call log: - Expect "toBeVisible" locator('#map .leaflet-interactive').first() with timeout 15000ms - waiting for locator('#map .leaflet-interactive').first() ``` ```yaml - link "← Back to Home": - /url: / - banner: - heading "Counties" [level=1] - paragraph: US counties and parishes - button "Map" - button "List" - main: - button "Zoom in" - button "Zoom out" - link "Leaflet": - /url: https://leafletjs.com - text: © - link "OpenStreetMap": - /url: https://www.openstreetmap.org/copyright ``` # Test source ```ts 382 | const body = resp.request().postData() || ''; 383 | return body.includes('browseEntities'); 384 | }, { timeout: DATA_LOAD_TIMEOUT }); 385 | await page.goto(url); 386 | const response = await responsePromise; 387 | const json = await response.json(); 388 | const results = json.data?.browseEntities?.results || []; 389 | return results.map((r: { score?: number }) => r.score || 0); 390 | } 391 | 392 | test.describe('entity browse sort order - quantitative fields', () => { 393 | 394 | test('candidates sorted by total contributions descending', async ({ page }) => { 395 | const scores = await getBrowseScores(page, '/candidates/'); 396 | expect(scores.length).toBeGreaterThan(1); 397 | for (let i = 1; i < scores.length; i++) { 398 | expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]); 399 | } 400 | }); 401 | 402 | test('committees sorted by total receipts descending', async ({ page }) => { 403 | const scores = await getBrowseScores(page, '/committees/'); 404 | expect(scores.length).toBeGreaterThan(1); 405 | for (let i = 1; i < scores.length; i++) { 406 | expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]); 407 | } 408 | }); 409 | 410 | test('vendors sorted by total received descending', async ({ page }) => { 411 | const scores = await getBrowseScores(page, '/vendors/'); 412 | expect(scores.length).toBeGreaterThan(1); 413 | for (let i = 1; i < scores.length; i++) { 414 | expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]); 415 | } 416 | }); 417 | 418 | test('individuals sorted by total contributions descending', async ({ page }) => { 419 | const scores = await getBrowseScores(page, '/individuals/'); 420 | expect(scores.length).toBeGreaterThan(1); 421 | for (let i = 1; i < scores.length; i++) { 422 | expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]); 423 | } 424 | }); 425 | 426 | test('employers sorted by total employee contributions descending', async ({ page }) => { 427 | const scores = await getBrowseScores(page, '/employers/'); 428 | expect(scores.length).toBeGreaterThan(1); 429 | for (let i = 1; i < scores.length; i++) { 430 | expect(scores[i - 1]).toBeGreaterThanOrEqual(scores[i]); 431 | } 432 | }); 433 | }); 434 | 435 | test.describe('us.elect.info entity sections - additional index + detail', () => { 436 | 437 | test('employers section - index and random pages', async ({ page }) => { 438 | const indexResponse = await page.goto('/employers/'); 439 | expect(indexResponse?.status()).toBe(200); 440 | await expect(page.locator('h1')).toContainText(/Employers/i); 441 | 442 | await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 443 | 444 | const links = await page.locator('.entity-search-result').all(); 445 | expect(links.length).toBeGreaterThan(0); 446 | 447 | const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href'))); 448 | const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3); 449 | 450 | for (const href of randomLinks) { 451 | const entityResponse = await page.goto(toRelativePath(href)); 452 | expect(entityResponse?.status()).toBe(200); 453 | await expect(page.locator('h1')).toBeVisible(); 454 | } 455 | }); 456 | 457 | test('vendors section - index and random pages', async ({ page }) => { 458 | const indexResponse = await page.goto('/vendors/'); 459 | expect(indexResponse?.status()).toBe(200); 460 | await expect(page.locator('h1')).toContainText(/Vendors/i); 461 | 462 | await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 463 | 464 | const links = await page.locator('.entity-search-result').all(); 465 | expect(links.length).toBeGreaterThan(0); 466 | 467 | const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href'))); 468 | const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3); 469 | 470 | for (const href of randomLinks) { 471 | const entityResponse = await page.goto(toRelativePath(href)); 472 | expect(entityResponse?.status()).toBe(200); 473 | await expect(page.locator('h1')).toBeVisible(); 474 | } 475 | }); 476 | 477 | test('counties section - index and random detail pages', async ({ page }) => { 478 | await page.goto('/counties/'); 479 | 480 | // Map view is default — verify Leaflet map renders with GeoJSON state shapes 481 | await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); > 482 | await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); | ^ Error: expect(locator).toBeVisible() failed 483 | const shapes = await page.locator('#map .leaflet-interactive').all(); 484 | expect(shapes.length).toBeGreaterThan(0); 485 | 486 | // Switch to List view to test county results and detail navigation 487 | await page.locator('.toggle-btn[data-view="list"]').click(); 488 | 489 | // Wait for results to load 490 | await page.waitForSelector('.county-result, .county-error', { timeout: DATA_LOAD_TIMEOUT }); 491 | const results = await page.locator('.county-result').all(); 492 | expect(results.length).toBeGreaterThan(0); 493 | 494 | // County results are tags - pick random ones and visit detail pages 495 | const hrefs = await Promise.all(results.slice(0, 20).map(r => r.getAttribute('href'))); 496 | const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3); 497 | 498 | for (const href of randomLinks) { 499 | const entityResponse = await page.goto(toRelativePath(href)); 500 | expect(entityResponse?.status()).toBe(200); 501 | await expect(page.locator('h1')).toBeVisible(); 502 | } 503 | }); 504 | 505 | test('places section - index and random detail pages', async ({ page }) => { 506 | await page.goto('/places/'); 507 | 508 | // Map view is default — verify Leaflet map renders with GeoJSON state shapes 509 | await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 510 | await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 511 | const shapes = await page.locator('#map .leaflet-interactive').all(); 512 | expect(shapes.length).toBeGreaterThan(0); 513 | 514 | // Switch to List view to test place results and detail navigation 515 | await page.locator('.toggle-btn[data-view="list"]').click(); 516 | 517 | // Wait for results to load 518 | await page.waitForSelector('.place-result, .place-error', { timeout: DATA_LOAD_TIMEOUT }); 519 | const results = await page.locator('.place-result').all(); 520 | expect(results.length).toBeGreaterThan(0); 521 | 522 | // Pick random results and visit detail pages 523 | const hrefs = await Promise.all(results.slice(0, 20).map(r => r.getAttribute('href'))); 524 | const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3); 525 | 526 | for (const href of randomLinks) { 527 | const entityResponse = await page.goto(toRelativePath(href)); 528 | expect(entityResponse?.status()).toBe(200); 529 | await expect(page.locator('h1')).toBeVisible(); 530 | } 531 | }); 532 | 533 | test('postalcodes section - index and random detail pages', async ({ page }) => { 534 | await page.goto('/postalcodes/'); 535 | 536 | // Map view is default — verify Leaflet map renders with GeoJSON state shapes 537 | await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 538 | await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 539 | const shapes = await page.locator('#map .leaflet-interactive').all(); 540 | expect(shapes.length).toBeGreaterThan(0); 541 | 542 | // Switch to List view to test postal code results and detail navigation 543 | await page.locator('.toggle-btn[data-view="list"]').click(); 544 | 545 | // Wait for results to load 546 | await page.waitForSelector('.postal-result, .postal-error', { timeout: DATA_LOAD_TIMEOUT }); 547 | const results = await page.locator('.postal-result').all(); 548 | expect(results.length).toBeGreaterThan(0); 549 | 550 | // Pick random results and visit detail pages 551 | const hrefs = await Promise.all(results.slice(0, 20).map(r => r.getAttribute('href'))); 552 | const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3); 553 | 554 | for (const href of randomLinks) { 555 | const entityResponse = await page.goto(toRelativePath(href)); 556 | expect(entityResponse?.status()).toBe(200); 557 | await expect(page.locator('h1')).toBeVisible(); 558 | } 559 | }); 560 | 561 | test('precincts section - map view and state filter', async ({ page }) => { 562 | await page.goto('/precincts/'); 563 | 564 | // Map view is default — verify Leaflet map renders with GeoJSON state shapes 565 | await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 566 | await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 567 | const shapes = await page.locator('#map .leaflet-interactive').all(); 568 | expect(shapes.length).toBeGreaterThan(0); 569 | 570 | // Switch to List view to test state filter and precinct results 571 | await page.locator('.toggle-btn[data-view="list"]').click(); 572 | 573 | // Select a state first (precincts require state selection) 574 | const stateSelect = page.locator('#precinct-state-select'); 575 | await expect(stateSelect).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 576 | await stateSelect.selectOption('TX'); 577 | 578 | // Wait for precinct results to load 579 | await page.waitForSelector('.precinct-result, .precinct-error', { timeout: DATA_LOAD_TIMEOUT }); 580 | const results = await page.locator('.precinct-result').all(); 581 | expect(results.length).toBeGreaterThan(0); 582 | ```