# 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 >> districts section - index and random pages
- Location: tests/ui/entities.spec.ts:112: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 "Congressional Districts" [level=1]
  - paragraph: US House of Representatives districts
- 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
  19  | }
  20  | 
  21  | // Wait timeout for async data loading (GraphQL browseEntities)
  22  | const DATA_LOAD_TIMEOUT = 15000;
  23  | 
  24  | const hasAuthCredentials = !!process.env.PLAYWRIGHT_AUTH_USER;
  25  | 
  26  | test.describe('us.elect.info entity sections', () => {
  27  | 
  28  |   test('candidates section - index and random pages', async ({ page }) => {
  29  |     const indexResponse = await page.goto('/candidates/');
  30  |     expect(indexResponse?.status()).toBe(200);
  31  |     await expect(page.locator('h1')).toContainText(/Candidates/i);
  32  | 
  33  |     // Wait for GraphQL browseEntities to populate results
  34  |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  35  | 
  36  |     const links = await page.locator('.entity-search-result').all();
  37  |     expect(links.length).toBeGreaterThan(0);
  38  | 
  39  |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  40  |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  41  | 
  42  |     for (const href of randomLinks) {
  43  |       const entityResponse = await page.goto(toRelativePath(href));
  44  |       expect(entityResponse?.status()).toBe(200);
  45  |       await expect(page.locator('h1')).toBeVisible();
  46  |     }
  47  |   });
  48  | 
  49  |   test('committees section - index and random pages', async ({ page }) => {
  50  |     const indexResponse = await page.goto('/committees/');
  51  |     expect(indexResponse?.status()).toBe(200);
  52  |     await expect(page.locator('h1')).toContainText(/Committees/i);
  53  | 
  54  |     // Wait for GraphQL browseEntities to populate results
  55  |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  56  | 
  57  |     const links = await page.locator('.entity-search-result').all();
  58  |     expect(links.length).toBeGreaterThan(0);
  59  | 
  60  |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  61  |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  62  | 
  63  |     for (const href of randomLinks) {
  64  |       const entityResponse = await page.goto(toRelativePath(href));
  65  |       expect(entityResponse?.status()).toBe(200);
  66  |       await expect(page.locator('h1')).toBeVisible();
  67  |     }
  68  |   });
  69  | 
  70  |   test('parties section - index and random pages', async ({ page }) => {
  71  |     const indexResponse = await page.goto('/parties/');
  72  |     expect(indexResponse?.status()).toBe(200);
  73  |     await expect(page.locator('h1')).toContainText(/Parties/i);
  74  | 
  75  |     // Wait for GraphQL browseEntities to populate results
  76  |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  77  | 
  78  |     const links = await page.locator('.entity-search-result').all();
  79  |     expect(links.length).toBeGreaterThan(0);
  80  | 
  81  |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  82  |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  83  | 
  84  |     for (const href of randomLinks) {
  85  |       const entityResponse = await page.goto(toRelativePath(href));
  86  |       expect(entityResponse?.status()).toBe(200);
  87  |       await expect(page.locator('h1')).toBeVisible();
  88  |     }
  89  |   });
  90  | 
  91  |   test('offices section - index and random pages', async ({ page }) => {
  92  |     const indexResponse = await page.goto('/offices/');
  93  |     expect(indexResponse?.status()).toBe(200);
  94  |     await expect(page.locator('h1')).toContainText(/Offices/i);
  95  | 
  96  |     // Wait for GraphQL browseEntities to populate results
  97  |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  98  | 
  99  |     const links = await page.locator('.entity-search-result').all();
  100 |     expect(links.length).toBeGreaterThan(0);
  101 | 
  102 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  103 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  104 | 
  105 |     for (const href of randomLinks) {
  106 |       const entityResponse = await page.goto(toRelativePath(href));
  107 |       expect(entityResponse?.status()).toBe(200);
  108 |       await expect(page.locator('h1')).toBeVisible();
  109 |     }
  110 |   });
  111 | 
  112 |   test('districts section - index and random pages', async ({ page }) => {
  113 |     const indexResponse = await page.goto('/districts/');
  114 |     expect(indexResponse?.status()).toBe(200);
  115 |     await expect(page.locator('h1')).toContainText(/Districts/i);
  116 | 
  117 |     // Map view is default — verify Leaflet map renders with GeoJSON state shapes
  118 |     await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
> 119 |     await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
      |                                                                     ^ Error: expect(locator).toBeVisible() failed
  120 |     const shapes = await page.locator('#map .leaflet-interactive').all();
  121 |     expect(shapes.length).toBeGreaterThan(0);
  122 | 
  123 |     // Switch to List view to test state selector and district results
  124 |     await page.locator('.toggle-btn[data-view="list"]').click();
  125 | 
  126 |     // Districts list view loads state options from GraphQL, then requires selection
  127 |     const stateSelect = page.locator('#district-state-select');
  128 |     await expect(stateSelect).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  129 | 
  130 |     // Wait for state options to populate from GraphQL (more than just the placeholder)
  131 |     await page.waitForFunction(() => {
  132 |       const select = document.querySelector('#district-state-select') as HTMLSelectElement;
  133 |       return select && select.options.length > 1;
  134 |     }, { timeout: DATA_LOAD_TIMEOUT });
  135 | 
  136 |     await stateSelect.selectOption('CA');
  137 | 
  138 |     // Wait for district results to load
  139 |     await expect(page.locator('.district-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  140 | 
  141 |     const links = await page.locator('.district-result').all();
  142 |     expect(links.length).toBeGreaterThan(0);
  143 | 
  144 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  145 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  146 | 
  147 |     for (const href of randomLinks) {
  148 |       const entityResponse = await page.goto(toRelativePath(href));
  149 |       expect(entityResponse?.status()).toBe(200);
  150 |       await expect(page.locator('h1')).toBeVisible();
  151 |     }
  152 |   });
  153 | 
  154 |   test('states section - index and random pages', async ({ page }) => {
  155 |     const indexResponse = await page.goto('/states/');
  156 |     expect(indexResponse?.status()).toBe(200);
  157 |     await expect(page.locator('h1')).toContainText(/States/i);
  158 | 
  159 |     // Map view is default — verify Leaflet map renders with GeoJSON state shapes
  160 |     await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  161 |     await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  162 |     const shapes = await page.locator('#map .leaflet-interactive').all();
  163 |     expect(shapes.length).toBeGreaterThan(0);
  164 | 
  165 |     // Switch to Grid view to test state chips and detail navigation
  166 |     await page.locator('.toggle-btn[data-view="grid"]').click();
  167 | 
  168 |     await expect(page.locator('.state-chip').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  169 | 
  170 |     const links = await page.locator('.state-chip').all();
  171 |     expect(links.length).toBeGreaterThan(0);
  172 | 
  173 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  174 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  175 | 
  176 |     for (const href of randomLinks) {
  177 |       const entityResponse = await page.goto(toRelativePath(href));
  178 |       expect(entityResponse?.status()).toBe(200);
  179 |       await expect(page.locator('h1')).toBeVisible();
  180 |     }
  181 |   });
  182 | 
  183 |   test('elections section - index and random pages', async ({ page }) => {
  184 |     const indexResponse = await page.goto('/elections/');
  185 |     expect(indexResponse?.status()).toBe(200);
  186 |     await expect(page.locator('h1')).toContainText(/Election/i);
  187 | 
  188 |     // Wait for GraphQL browseEntities to populate results
  189 |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  190 | 
  191 |     const links = await page.locator('.entity-search-result').all();
  192 |     expect(links.length).toBeGreaterThan(0);
  193 | 
  194 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  195 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  196 | 
  197 |     for (const href of randomLinks) {
  198 |       const entityResponse = await page.goto(toRelativePath(href));
  199 |       expect(entityResponse?.status()).toBe(200);
  200 |       await expect(page.locator('h1')).toBeVisible();
  201 |     }
  202 |   });
  203 | });
  204 | 
  205 | test.describe('office profile - dynamic candidates', () => {
  206 |   // President of the United States office page
  207 |   const PRESIDENT_PATH = '/offices/684f6e2d-7105-932b-8b7f-94016580f727/';
  208 | 
  209 |   test('office profile loads candidates filtered to office', async ({ page }) => {
  210 |     // Intercept the browseEntities GraphQL request to verify filter is applied
  211 |     const responsePromise = page.waitForResponse(resp => {
  212 |       if (!resp.url().includes('/api/graphql')) return false;
  213 |       if (resp.request().method() !== 'POST') return false;
  214 |       const body = resp.request().postData() || '';
  215 |       return body.includes('browseEntities');
  216 |     }, { timeout: DATA_LOAD_TIMEOUT });
  217 | 
  218 |     await page.goto(PRESIDENT_PATH);
  219 |     const response = await responsePromise;
```