# 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 >> office profile - dynamic candidates >> office profile renders candidate results in UI
- Location: tests/ui/entities.spec.ts:246:7

# Error details

```
Error: expect(locator).toBeVisible() failed

Locator: locator('.entity-search-result').first()
Expected: visible
Timeout: 15000ms
Error: element(s) not found

Call log:
  - Expect "toBeVisible" locator('.entity-search-result').first() with timeout 15000ms
  - waiting for locator('.entity-search-result').first()

```

```yaml
- banner:
  - heading "President of the United States" [level=1]
  - paragraph: Federal Office Profile
- heading "Overview" [level=2]
- term: Office Type
- definition: President
- term: State
- definition:
  - link "United States":
    - /url: https://us.elect.info/states/f4d08ba1-2eba-4f98-f93c-490cb3926e8e/
- term: Total Candidates
- definition: 6,956
- term: Election Years
- definition: 1972,1976,1980,1982,1984,1988,1990,1992,1994,1996,1998,2000,2002,2004,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025,2026,2027,2028,2029,2030,2031,2032,2033,2034,2035,2036,2037,2038,2039,2040,2041,2042,2043,2044,2045,2046,2048,2052,2064,2089,2097,2106,2727,2777,2820,2916,2923,2929,2950,2965,2999
- term: Active Cycles
- definition:
  - link "2026":
    - /url: https://us.elect.info/elections/2026/
  - text: ","
  - link "2024":
    - /url: https://us.elect.info/elections/2024/
  - text: ","
  - link "2022":
    - /url: https://us.elect.info/elections/2022/
  - text: ","
  - link "2020":
    - /url: https://us.elect.info/elections/2020/
  - text: ","
  - link "2018":
    - /url: https://us.elect.info/elections/2018/
  - text: ","
  - link "2016":
    - /url: https://us.elect.info/elections/2016/
  - text: ","
  - link "2014":
    - /url: https://us.elect.info/elections/2014/
  - text: ","
  - link "2012":
    - /url: https://us.elect.info/elections/2012/
  - text: ","
  - link "2010":
    - /url: https://us.elect.info/elections/2010/
  - text: ","
  - link "2008":
    - /url: https://us.elect.info/elections/2008/
  - text: ","
  - link "2006":
    - /url: https://us.elect.info/elections/2006/
  - text: ","
  - link "2004":
    - /url: https://us.elect.info/elections/2004/
  - text: ","
  - link "2002":
    - /url: https://us.elect.info/elections/2002/
  - text: ","
  - link "2000":
    - /url: https://us.elect.info/elections/2000/
  - text: ","
  - link "1998":
    - /url: https://us.elect.info/elections/1998/
  - text: ","
  - link "1996":
    - /url: https://us.elect.info/elections/1996/
  - text: ","
  - link "1994":
    - /url: https://us.elect.info/elections/1994/
  - text: ","
  - link "1992":
    - /url: https://us.elect.info/elections/1992/
  - text: ","
  - link "1990":
    - /url: https://us.elect.info/elections/1990/
  - text: ","
  - link "1988":
    - /url: https://us.elect.info/elections/1988/
  - text: ","
  - link "1986":
    - /url: https://us.elect.info/elections/1986/
  - text: ","
  - link "1984":
    - /url: https://us.elect.info/elections/1984/
  - text: ","
  - link "1982":
    - /url: https://us.elect.info/elections/1982/
  - text: ","
  - link "1980":
    - /url: https://us.elect.info/elections/1980/
- heading "Candidates" [level=2]
- textbox "Search candidates for this office..."
- button "Search"
- heading "Candidates" [level=3]
- paragraph: "Failed to load: 400"
- contentinfo:
  - paragraph:
    - link "elect.info":
      - /url: https://us.elect.info/
    - text: "| Data from"
    - link "Federal Election Commission":
      - /url: https://us.elect.info/datasources/fec.gov/
    - text: "| Generated 2026-10-09"
```

# Test source

```ts
  150 |     expect(shapes.length).toBeGreaterThan(0);
  151 | 
  152 |     // Switch to Grid view to test state chips and detail navigation
  153 |     await page.locator('.toggle-btn[data-view="grid"]').click();
  154 | 
  155 |     await expect(page.locator('.state-chip').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  156 | 
  157 |     const links = await page.locator('.state-chip').all();
  158 |     expect(links.length).toBeGreaterThan(0);
  159 | 
  160 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  161 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  162 | 
  163 |     for (const href of randomLinks) {
  164 |       const entityResponse = await page.goto(toRelativePath(href));
  165 |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  166 |       await expect(page.locator('h1')).toBeVisible();
  167 |     }
  168 |   });
  169 | 
  170 |   test('elections section - index and random pages', async ({ page }) => {
  171 |     const indexResponse = await page.goto('/elections/');
  172 |     expect(indexResponse?.status(), '/elections/ should answer 200').toBe(200);
  173 |     await expect(page.locator('h1')).toContainText(/Election/i);
  174 | 
  175 |     // Wait for GraphQL browseEntities to populate results
  176 |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
  177 | 
  178 |     const links = await page.locator('.entity-search-result').all();
  179 |     expect(links.length).toBeGreaterThan(0);
  180 | 
  181 |     const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href')));
  182 |     const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3);
  183 | 
  184 |     for (const href of randomLinks) {
  185 |       const entityResponse = await page.goto(toRelativePath(href));
  186 |       expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200);
  187 |       await expect(page.locator('h1')).toBeVisible();
  188 |     }
  189 |   });
  190 | });
  191 | 
  192 | test.describe('office profile - dynamic candidates', () => {
  193 |   // President of the United States office page
  194 |   const PRESIDENT_PATH = '/offices/684f6e2d-7105-932b-8b7f-94016580f727/';
  195 | 
  196 |   test('office profile loads candidates filtered to office', async ({ page }) => {
  197 |     // Intercept the browseEntities GraphQL request to verify filter is applied
  198 |     const responsePromise = page.waitForResponse(resp => {
  199 |       if (!resp.url().includes('/api/graphql')) return false;
  200 |       if (resp.request().method() !== 'POST') return false;
  201 |       const body = resp.request().postData() || '';
  202 |       return body.includes('browseEntities');
  203 |     }, { timeout: DATA_LOAD_TIMEOUT });
  204 | 
  205 |     await page.goto(PRESIDENT_PATH);
  206 |     const response = await responsePromise;
  207 | 
  208 |     // Verify the request includes the office filter
  209 |     const requestBody = JSON.parse(response.request().postData() || '{}');
  210 |     expect(requestBody.variables?.filter).toContain('office:P');
  211 | 
  212 |     // Verify the response has results
  213 |     const json = await response.json();
  214 |     const results = json.data?.browseEntities?.results || [];
  215 |     expect(results.length).toBeGreaterThan(0);
  216 |   });
  217 | 
  218 |   test('office profile candidates sorted by total contributions descending', async ({ page }) => {
  219 |     const responsePromise = page.waitForResponse(resp => {
  220 |       if (!resp.url().includes('/api/graphql')) return false;
  221 |       if (resp.request().method() !== 'POST') return false;
  222 |       const body = resp.request().postData() || '';
  223 |       return body.includes('browseEntities');
  224 |     }, { timeout: DATA_LOAD_TIMEOUT });
  225 | 
  226 |     await page.goto(PRESIDENT_PATH);
  227 |     const response = await responsePromise;
  228 | 
  229 |     const json = await response.json();
  230 |     const results = json.data?.browseEntities?.results || [];
  231 |     expect(results.length).toBeGreaterThan(1);
  232 | 
  233 |     // Extract total_contributions from metadata to verify sort order
  234 |     const contributions = results.map((r: { metadata?: string }) => {
  235 |       try {
  236 |         const meta = JSON.parse(r.metadata || '{}');
  237 |         return meta.total_contributions || 0;
  238 |       } catch { return 0; }
  239 |     });
  240 | 
  241 |     for (let i = 1; i < contributions.length; i++) {
  242 |       expect(contributions[i - 1]).toBeGreaterThanOrEqual(contributions[i]);
  243 |     }
  244 |   });
  245 | 
  246 |   test('office profile renders candidate results in UI', async ({ page }) => {
  247 |     await page.goto(PRESIDENT_PATH);
  248 | 
  249 |     // Wait for candidate results to render
> 250 |     await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT });
      |                                                                 ^ Error: expect(locator).toBeVisible() failed
  251 | 
  252 |     const results = await page.locator('.entity-search-result').all();
  253 |     expect(results.length).toBeGreaterThan(0);
  254 | 
  255 |     // First result should be a well-known presidential candidate with high contributions
  256 |     const firstResultText = await results[0].textContent();
  257 |     expect(firstResultText).toMatch(/\$/); // Should show dollar amount
  258 |   });
  259 | });
  260 | 
  261 | test.describe('state profile - dynamic candidates', () => {
  262 |   const TEXAS_PATH = '/states/tx/';
  263 | 
  264 |   test('state profile loads candidates filtered to state', async ({ page }) => {
  265 |     const responsePromise = page.waitForResponse(resp => {
  266 |       if (!resp.url().includes('/api/graphql')) return false;
  267 |       if (resp.request().method() !== 'POST') return false;
  268 |       const body = resp.request().postData() || '';
  269 |       return body.includes('browseEntities');
  270 |     }, { timeout: DATA_LOAD_TIMEOUT });
  271 | 
  272 |     await page.goto(TEXAS_PATH);
  273 |     const response = await responsePromise;
  274 | 
  275 |     const requestBody = JSON.parse(response.request().postData() || '{}');
  276 |     expect(requestBody.variables?.filter).toContain('office_state:TX');
  277 | 
  278 |     const json = await response.json();
  279 |     const results = json.data?.browseEntities?.results || [];
  280 |     expect(results.length).toBeGreaterThan(0);
  281 |   });
  282 | 
  283 |   test('state profile candidates sorted by total contributions descending', async ({ page }) => {
  284 |     const responsePromise = page.waitForResponse(resp => {
  285 |       if (!resp.url().includes('/api/graphql')) return false;
  286 |       if (resp.request().method() !== 'POST') return false;
  287 |       const body = resp.request().postData() || '';
  288 |       return body.includes('browseEntities');
  289 |     }, { timeout: DATA_LOAD_TIMEOUT });
  290 | 
  291 |     await page.goto(TEXAS_PATH);
  292 |     const response = await responsePromise;
  293 | 
  294 |     const json = await response.json();
  295 |     const results = json.data?.browseEntities?.results || [];
  296 |     expect(results.length).toBeGreaterThan(1);
  297 | 
  298 |     const contributions = results.map((r: { metadata?: string }) => {
  299 |       try {
  300 |         const meta = JSON.parse(r.metadata || '{}');
  301 |         return meta.total_contributions || 0;
  302 |       } catch { return 0; }
  303 |     });
  304 | 
  305 |     for (let i = 1; i < contributions.length; i++) {
  306 |       expect(contributions[i - 1]).toBeGreaterThanOrEqual(contributions[i]);
  307 |     }
  308 |   });
  309 | });
  310 | 
  311 | test.describe('district profile - dynamic candidates', () => {
  312 |   const DISTRICT_PATH = '/districts/tx-10/';
  313 | 
  314 |   test('district profile loads candidates filtered to district', async ({ page }) => {
  315 |     const responsePromise = page.waitForResponse(resp => {
  316 |       if (!resp.url().includes('/api/graphql')) return false;
  317 |       if (resp.request().method() !== 'POST') return false;
  318 |       const body = resp.request().postData() || '';
  319 |       return body.includes('browseEntities');
  320 |     }, { timeout: DATA_LOAD_TIMEOUT });
  321 | 
  322 |     await page.goto(DISTRICT_PATH);
  323 |     const response = await responsePromise;
  324 | 
  325 |     const requestBody = JSON.parse(response.request().postData() || '{}');
  326 |     const filter = requestBody.variables?.filter || '';
  327 |     expect(filter).toContain('office:H');
  328 |     expect(filter).toContain('office_state:TX');
  329 |     expect(filter).toContain('office_district:10');
  330 | 
  331 |     const json = await response.json();
  332 |     const results = json.data?.browseEntities?.results || [];
  333 |     expect(results.length).toBeGreaterThan(0);
  334 |   });
  335 | 
  336 |   test('district profile candidates sorted by total contributions descending', async ({ page }) => {
  337 |     const responsePromise = page.waitForResponse(resp => {
  338 |       if (!resp.url().includes('/api/graphql')) return false;
  339 |       if (resp.request().method() !== 'POST') return false;
  340 |       const body = resp.request().postData() || '';
  341 |       return body.includes('browseEntities');
  342 |     }, { timeout: DATA_LOAD_TIMEOUT });
  343 | 
  344 |     await page.goto(DISTRICT_PATH);
  345 |     const response = await responsePromise;
  346 | 
  347 |     const json = await response.json();
  348 |     const results = json.data?.browseEntities?.results || [];
  349 |     expect(results.length).toBeGreaterThan(1);
  350 | 
```