# 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 >> states section - index and random pages
- Location: tests/ui/entities.spec.ts:135:7

# Error details

```
Error: page.goto: net::ERR_CONNECTION_REFUSED at http://10.1.105.22/states/
Call log:
  - navigating to "http://10.1.105.22/states/", waiting until "load"

```

# Test source

```ts
  36  |   test('committees section - index and random pages', async ({ page }) => {
  37  |     const indexResponse = await page.goto('/committees/');
  38  |     expect(indexResponse?.status(), '/committees/ should answer 200').toBe(200);
  39  |     await expect(page.locator('h1')).toContainText(/Committees/i);
  40  | 
  41  |     // Wait for GraphQL browseEntities to populate results
  42  |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  43  | 
  44  |     const links = await page.locator('.entity-search-result').all();
  45  |     expect(links.length).toBeGreaterThan(0);
  46  | 
  47  |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  48  |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  49  | 
  50  |     for (const href of randomLinks) {
  51  |       const entityResponse = await page.goto(toRelativePath(href));
  52  |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  53  |       await expect(page.locator('h1')).toBeVisible();
  54  |     }
  55  |   });
  56  | 
  57  |   test('parties section - index and random pages', async ({ page }) => {
  58  |     const indexResponse = await page.goto('/parties/');
  59  |     expect(indexResponse?.status(), '/parties/ should answer 200').toBe(200);
  60  |     await expect(page.locator('h1')).toContainText(/Parties/i);
  61  | 
  62  |     // Wait for GraphQL browseEntities to populate results
  63  |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  64  | 
  65  |     const links = await page.locator('.entity-search-result').all();
  66  |     expect(links.length).toBeGreaterThan(0);
  67  | 
  68  |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  69  |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  70  | 
  71  |     for (const href of randomLinks) {
  72  |       const entityResponse = await page.goto(toRelativePath(href));
  73  |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  74  |       await expect(page.locator('h1')).toBeVisible();
  75  |     }
  76  |   });
  77  | 
  78  |   test('offices section - index and random pages', async ({ page }) => {
  79  |     const indexResponse = await page.goto('/offices/');
  80  |     expect(indexResponse?.status(), '/offices/ should answer 200').toBe(200);
  81  |     await expect(page.locator('h1')).toContainText(/Offices/i);
  82  | 
  83  |     // Wait for GraphQL browseEntities to populate results
  84  |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  85  | 
  86  |     const links = await page.locator('.entity-search-result').all();
  87  |     expect(links.length).toBeGreaterThan(0);
  88  | 
  89  |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  90  |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  91  | 
  92  |     for (const href of randomLinks) {
  93  |       const entityResponse = await page.goto(toRelativePath(href));
  94  |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  95  |       await expect(page.locator('h1')).toBeVisible();
  96  |     }
  97  |   });
  98  | 
  99  |   test('districts section - index and random pages', async ({ page }) => {
  100 |     const indexResponse = await page.goto('/districts/');
  101 |     expect(indexResponse?.status(), '/districts/ should answer 200').toBe(200);
  102 |     await expect(page.locator('h1')).toContainText(/Districts/i);
  103 | 
  104 |     // List view is now default — EntityIndex browses all districts without requiring state selection
  105 |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  106 | 
  107 |     // State selector is populated from a static list (no GraphQL wait required)
  108 |     const stateSelect = page.locator('#district-state-select');
  109 |     await expect(stateSelect).toBeVisible();
  110 |     await stateSelect.selectOption('CA');
  111 | 
  112 |     // Wait for state-filtered results then collect links
  113 |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  114 |     const links = await page.locator('.entity-search-result').all();
  115 |     expect(links.length).toBeGreaterThan(0);
  116 | 
  117 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  118 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  119 | 
  120 |     for (const href of randomLinks) {
  121 |       const entityResponse = await page.goto(toRelativePath(href));
  122 |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  123 |       await expect(page.locator('h1')).toBeVisible();
  124 |     }
  125 | 
  126 |     // District map (Congressional by default): navigate back and explicitly click the map toggle
  127 |     await page.goto('/districts/');
  128 |     await page.locator('.toggle-btn[data-view="map"]').click();
  129 |     await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  130 |     await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  131 |     const shapes = await page.locator('#map .leaflet-interactive').all();
  132 |     expect(shapes.length).toBeGreaterThan(0);
  133 |   });
  134 | 
  135 |   test('states section - index and random pages', async ({ page }) => {
> 136 |     const indexResponse = await page.goto('/states/');
      |                                      ^ Error: page.goto: net::ERR_CONNECTION_REFUSED at http://10.1.105.22/states/
  137 |     expect(indexResponse?.status(), '/states/ should answer 200').toBe(200);
  138 |     await expect(page.locator('h1')).toContainText(/States/i);
  139 | 
  140 |     // Map view is default — verify Leaflet map renders with GeoJSON state shapes
  141 |     await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  142 |     await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  143 |     const shapes = await page.locator('#map .leaflet-interactive').all();
  144 |     expect(shapes.length).toBeGreaterThan(0);
  145 | 
  146 |     // Switch to Grid view to test state chips and detail navigation
  147 |     await page.locator('.toggle-btn[data-view="grid"]').click();
  148 | 
  149 |     await expect(page.locator('.state-chip').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  150 | 
  151 |     const links = await page.locator('.state-chip').all();
  152 |     expect(links.length).toBeGreaterThan(0);
  153 | 
  154 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  155 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  156 | 
  157 |     for (const href of randomLinks) {
  158 |       const entityResponse = await page.goto(toRelativePath(href));
  159 |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  160 |       await expect(page.locator('h1')).toBeVisible();
  161 |     }
  162 |   });
  163 | 
  164 |   test('elections section - index and random pages', async ({ page }) => {
  165 |     const indexResponse = await page.goto('/elections/');
  166 |     expect(indexResponse?.status(), '/elections/ should answer 200').toBe(200);
  167 |     await expect(page.locator('h1')).toContainText(/Election/i);
  168 | 
  169 |     // Wait for GraphQL browseEntities to populate results
  170 |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  171 | 
  172 |     const links = await page.locator('.entity-search-result').all();
  173 |     expect(links.length).toBeGreaterThan(0);
  174 | 
  175 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  176 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  177 | 
  178 |     for (const href of randomLinks) {
  179 |       const entityResponse = await page.goto(toRelativePath(href));
  180 |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  181 |       await expect(page.locator('h1')).toBeVisible();
  182 |     }
  183 |   });
  184 | });
  185 | 
  186 | test.describe('office profile - dynamic candidates', () => {
  187 |   // President of the United States office page
  188 |   const PRESIDENT_PATH = '/offices/684f6e2d-7105-932b-8b7f-94016580f727/';
  189 | 
  190 |   test('office profile loads candidates filtered to office', async ({ page }) => {
  191 |     // Intercept the browseEntities GraphQL request to verify filter is applied
  192 |     const responsePromise = page.waitForResponse(resp => {
  193 |       if (!resp.url().includes('/api/graphql')) return false;
  194 |       if (resp.request().method() !== 'POST') return false;
  195 |       const body = resp.request().postData() || '';
  196 |       return body.includes('browseEntities');
  197 |     }, { timeout: DATA_LOAD_TIMEOUT });
  198 | 
  199 |     await page.goto(PRESIDENT_PATH);
  200 |     const response = await responsePromise;
  201 | 
  202 |     // Verify the request includes the office filter
  203 |     const requestBody = JSON.parse(response.request().postData() || '{}');
  204 |     expect(requestBody.variables?.filter).toContain('office:P');
  205 | 
  206 |     // Verify the response has results
  207 |     const json = await response.json();
  208 |     const results = json.data?.browseEntities?.results || [];
  209 |     expect(results.length).toBeGreaterThan(0);
  210 |   });
  211 | 
  212 |   test('office profile candidates sorted by total contributions descending', async ({ page }) => {
  213 |     const responsePromise = page.waitForResponse(resp => {
  214 |       if (!resp.url().includes('/api/graphql')) return false;
  215 |       if (resp.request().method() !== 'POST') return false;
  216 |       const body = resp.request().postData() || '';
  217 |       return body.includes('browseEntities');
  218 |     }, { timeout: DATA_LOAD_TIMEOUT });
  219 | 
  220 |     await page.goto(PRESIDENT_PATH);
  221 |     const response = await responsePromise;
  222 | 
  223 |     const json = await response.json();
  224 |     const results = json.data?.browseEntities?.results || [];
  225 |     expect(results.length).toBeGreaterThan(1);
  226 | 
  227 |     // Extract total_contributions from metadata to verify sort order
  228 |     const contributions = results.map((r: { metadata?: string }) => {
  229 |       try {
  230 |         const meta = JSON.parse(r.metadata || '{}');
  231 |         return meta.total_contributions || 0;
  232 |       } catch { return 0; }
  233 |     });
  234 | 
  235 |     for (let i = 1; i < contributions.length; i++) {
  236 |       expect(contributions[i - 1]).toBeGreaterThanOrEqual(contributions[i]);
```