# 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 >> tracts section - state/county filter and random detail pages - Location: tests/ui/entities.spec.ts:584:7 # Error details ``` Error: page.goto: net::ERR_CONNECTION_REFUSED at http://10.1.105.47/tracts/ Call log: - navigating to "http://10.1.105.47/tracts/", waiting until "load" ``` # Test source ```ts 486 | const entityResponse = await page.goto(toRelativePath(href)); 487 | expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200); 488 | await expect(page.locator('h1')).toBeVisible(); 489 | } 490 | }); 491 | 492 | test('places section - index and random detail pages', async ({ page }) => { 493 | await page.goto('/places/'); 494 | 495 | // Map view is default — verify Leaflet map renders with GeoJSON state shapes 496 | await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 497 | await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 498 | const shapes = await page.locator('#map .leaflet-interactive').all(); 499 | expect(shapes.length).toBeGreaterThan(0); 500 | 501 | // Switch to List view to test place results and detail navigation 502 | await page.locator('.toggle-btn[data-view="list"]').click(); 503 | 504 | // Wait for results to load 505 | await page.waitForSelector('.place-result, .place-error', { timeout: DATA_LOAD_TIMEOUT }); 506 | const results = await page.locator('.place-result').all(); 507 | expect(results.length).toBeGreaterThan(0); 508 | 509 | // Pick random results and visit detail pages 510 | const hrefs = await Promise.all(results.slice(0, 20).map(r => r.getAttribute('href'))); 511 | const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3); 512 | 513 | for (const href of randomLinks) { 514 | const entityResponse = await page.goto(toRelativePath(href)); 515 | expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200); 516 | await expect(page.locator('h1')).toBeVisible(); 517 | } 518 | }); 519 | 520 | test('postalcodes section - index and random detail pages', async ({ page }) => { 521 | await page.goto('/postalcodes/'); 522 | 523 | // Map view is default — verify Leaflet map renders with GeoJSON state shapes 524 | await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 525 | await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 526 | const shapes = await page.locator('#map .leaflet-interactive').all(); 527 | expect(shapes.length).toBeGreaterThan(0); 528 | 529 | // Switch to List view to test postal code results and detail navigation 530 | await page.locator('.toggle-btn[data-view="list"]').click(); 531 | 532 | // Wait for results to load 533 | await page.waitForSelector('.postal-result, .postal-error', { timeout: DATA_LOAD_TIMEOUT }); 534 | const results = await page.locator('.postal-result').all(); 535 | expect(results.length).toBeGreaterThan(0); 536 | 537 | // Pick random results and visit detail pages 538 | const hrefs = await Promise.all(results.slice(0, 20).map(r => r.getAttribute('href'))); 539 | const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3); 540 | 541 | for (const href of randomLinks) { 542 | const entityResponse = await page.goto(toRelativePath(href)); 543 | expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200); 544 | await expect(page.locator('h1')).toBeVisible(); 545 | } 546 | }); 547 | 548 | test('precincts section - map view and state filter', async ({ page }) => { 549 | await page.goto('/precincts/'); 550 | 551 | // Map view is default — verify Leaflet map renders with GeoJSON state shapes 552 | await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 553 | await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 554 | const shapes = await page.locator('#map .leaflet-interactive').all(); 555 | expect(shapes.length).toBeGreaterThan(0); 556 | 557 | // Switch to List view to test state filter and precinct results 558 | await page.locator('.toggle-btn[data-view="list"]').click(); 559 | 560 | // Select a state first (precincts require state selection) 561 | const stateSelect = page.locator('#precinct-state-select'); 562 | await expect(stateSelect).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 563 | await stateSelect.selectOption('TX'); 564 | 565 | // Wait for precinct results to load 566 | await page.waitForSelector('.precinct-result, .precinct-error', { timeout: DATA_LOAD_TIMEOUT }); 567 | const results = await page.locator('.precinct-result').all(); 568 | expect(results.length).toBeGreaterThan(0); 569 | 570 | // Pick random results and visit detail pages 571 | const hrefs = await Promise.all(results.slice(0, 20).map(r => r.getAttribute('href'))); 572 | const validHrefs = hrefs.filter(Boolean) as string[]; 573 | 574 | if (validHrefs.length > 0) { 575 | const randomLinks = getRandomItems(validHrefs, 3); 576 | for (const href of randomLinks) { 577 | const entityResponse = await page.goto(toRelativePath(href)); 578 | expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200); 579 | await expect(page.locator('h1')).toBeVisible(); 580 | } 581 | } 582 | }); 583 | 584 | test('tracts section - state/county filter and random detail pages', async ({ page }) => { 585 | test.setTimeout(120000); // Tracts require sequential state→county→tract interactions with GraphQL > 586 | await page.goto('/tracts/'); | ^ Error: page.goto: net::ERR_CONNECTION_REFUSED at http://10.1.105.47/tracts/ 587 | 588 | // Switch to List view — tract-index.js loads dynamically on list view activation 589 | await page.locator('.toggle-btn[data-view="list"]').click(); 590 | 591 | // Wait for state dropdown to populate (tract-index.js loads states via GraphQL) 592 | const stateSelect = page.locator('#tract-state-select'); 593 | await page.waitForFunction(() => { 594 | const select = document.querySelector('#tract-state-select') as HTMLSelectElement; 595 | return select && select.options.length > 1; 596 | }, { timeout: 45000 }); 597 | 598 | // Select Texas 599 | await stateSelect.selectOption('TX'); 600 | 601 | // Wait for county dropdown to populate 602 | const countySelect = page.locator('#tract-county-select'); 603 | await expect(countySelect).toBeEnabled({ timeout: DATA_LOAD_TIMEOUT }); 604 | await page.waitForFunction(() => { 605 | const select = document.querySelector('#tract-county-select') as HTMLSelectElement; 606 | return select && select.options.length > 1; 607 | }, { timeout: DATA_LOAD_TIMEOUT }); 608 | 609 | // Select first county 610 | const options = await countySelect.locator('option').all(); 611 | if (options.length > 1) { 612 | const value = await options[1].getAttribute('value'); 613 | if (value) await countySelect.selectOption(value); 614 | } 615 | 616 | // Wait for tract results to load 617 | await page.waitForSelector('.tract-result, .tract-error', { timeout: DATA_LOAD_TIMEOUT }); 618 | const results = await page.locator('.tract-result').all(); 619 | expect(results.length).toBeGreaterThan(0); 620 | 621 | // Pick random results and visit detail pages 622 | const hrefs = await Promise.all(results.slice(0, 20).map(r => r.getAttribute('href'))); 623 | const validHrefs = hrefs.filter(Boolean) as string[]; 624 | 625 | if (validHrefs.length > 0) { 626 | const randomLinks = getRandomItems(validHrefs, 3); 627 | for (const href of randomLinks) { 628 | const entityResponse = await page.goto(toRelativePath(href)); 629 | expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200); 630 | await expect(page.locator('h1')).toBeVisible(); 631 | } 632 | } 633 | }); 634 | 635 | }); 636 | 637 | test.describe('us.elect.info entity sections - individuals (premium)', () => { 638 | test.use({ 639 | httpCredentials: hasAuthCredentials ? { 640 | username: process.env.PLAYWRIGHT_AUTH_USER!, 641 | password: process.env.PLAYWRIGHT_AUTH_PASS || '', 642 | } : undefined 643 | }); 644 | 645 | test('individuals section - index and random pages', async ({ page }) => { 646 | test.skip(!hasAuthCredentials, 'Requires PLAYWRIGHT_AUTH_USER/PLAYWRIGHT_AUTH_PASS'); 647 | 648 | const indexResponse = await page.goto('/individuals/'); 649 | expect(indexResponse?.status(), '/individuals/ should answer 200').toBe(200); 650 | await expect(page.locator('h1')).toContainText(/Individual/i); 651 | 652 | await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 653 | 654 | const links = await page.locator('.entity-search-result').all(); 655 | expect(links.length).toBeGreaterThan(0); 656 | 657 | const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href'))); 658 | const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3); 659 | 660 | for (const href of randomLinks) { 661 | const entityResponse = await page.goto(toRelativePath(href)); 662 | expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200); 663 | await expect(page.locator('h1')).toBeVisible(); 664 | } 665 | }); 666 | }); 667 | ```