# 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/entity-graph.spec.ts >> entity-graph pop-over >> opens and draws on /candidates/a8897257-430c-2bf3-4498-349021b09ca3/
- Location: tests/ui/entity-graph.spec.ts:64:9

# Error details

```
Error: expect(locator).toHaveCount(expected) failed

Locator:  locator('button.eg-open')
Expected: 1
Received: 0
Timeout:  15000ms

Call log:
  - Expect "toHaveCount" locator('button.eg-open') with timeout 15000ms
  - waiting for locator('button.eg-open')
    34 × locator resolved to 0 elements
       - unexpected value "0"

```

# Page snapshot

```yaml
- generic [active] [ref=e1]:
  - heading "503 Service Temporarily Unavailable" [level=1] [ref=e3]
  - separator [ref=e4]
  - generic [ref=e5]: nginx/1.31.7
```

# Test source

```ts
  1  | import { test, expect } from '@playwright/test';
  2  | import { visitorHeaders } from './helpers';
  3  | 
  4  | // Entity graph pop-over (electinfo/sites#249). nginx injects /js/entity-graph.js
  5  | // next to money-flow.js on Candidate and Committee detail pages. The script
  6  | // adds a "Graph" button to the header; opening it fetches entityGraph from
  7  | // /api/graphql, loads /js/entity-graph-view.js (Cytoscape) and draws the node
  8  | // and its most significant neighbours in a modal dialog.
  9  | //
  10 | // Same targets and pages as money-flow.spec.ts.
  11 | 
  12 | const SCRIPT = '<script src="/js/entity-graph.js" defer></script>';
  13 | const DNC = '/committees/a75a9110-f1db-a945-39a8-7503ed3c04da/'; // C00010603
  14 | const HARRIS = '/candidates/a8897257-430c-2bf3-4498-349021b09ca3/'; // P00009423
  15 | const OTHER_PAGES = [
  16 |   '/states/032f8d61-f554-f435-2a6d-50b3c8cc01d7/', // AK
  17 |   '/elections/2024/',
  18 |   '/offices/president/',
  19 | ];
  20 | 
  21 | test.describe('entity-graph script injection', () => {
  22 |   for (const path of [DNC, HARRIS]) {
  23 |     test(`injected once on ${path}`, async ({ request }) => {
  24 |       const res = await request.get(path);
  25 |       expect(res.status()).toBe(200);
  26 |       expect((await res.text()).split(SCRIPT).length - 1).toBe(1);
  27 |     });
  28 |   }
  29 | 
  30 |   for (const path of OTHER_PAGES) {
  31 |     test(`not injected on ${path}`, async ({ request }) => {
  32 |       const res = await request.get(path);
  33 |       expect(res.status()).toBe(200);
  34 |       expect(await res.text()).not.toContain('entity-graph.js');
  35 |     });
  36 |   }
  37 | });
  38 | 
  39 | test.describe('entityGraph API', () => {
  40 |   for (const fecId of ['C00010603', 'P00009423']) {
  41 |     test(`${fecId}: neighbours without individuals, money edges with amounts`, async ({ request }) => {
  42 |       const res = await request.post('/api/graphql', {
  43 |         data: {
  44 |           query: 'query($f: String!) { entityGraph(fecId: $f) { focalId nodes { id label labels focal displayName } edges { type amount } } }',
  45 |           variables: { f: fecId },
  46 |         },
  47 |         headers: visitorHeaders(),
  48 |         timeout: 60000,
  49 |       });
  50 |       expect(res.status()).toBe(200);
  51 |       const g = (await res.json())?.data?.entityGraph;
  52 |       expect(g).toBeTruthy();
  53 |       expect(g.nodes.filter((n: { focal: boolean }) => n.focal)).toHaveLength(1);
  54 |       expect(g.nodes.length).toBeGreaterThan(5);
  55 |       expect(g.nodes.some((n: { labels: string[] }) => n.labels.includes('Individual'))).toBe(false);
  56 |       expect(g.nodes.every((n: { displayName: string }) => !!n.displayName)).toBe(true);
  57 |       expect(g.edges.some((e: { amount: number | null }) => e.amount != null && e.amount > 0)).toBe(true);
  58 |     });
  59 |   }
  60 | });
  61 | 
  62 | test.describe('entity-graph pop-over', () => {
  63 |   for (const path of [DNC, HARRIS]) {
  64 |     test(`opens and draws on ${path}`, async ({ page }) => {
  65 |       const errors: string[] = [];
  66 |       page.on('pageerror', (e) => errors.push(String(e)));
  67 |       await page.goto(path);
  68 |       const button = page.locator('button.eg-open');
> 69 |       await expect(button).toHaveCount(1, { timeout: 15000 });
     |                            ^ Error: expect(locator).toHaveCount(expected) failed
  70 |       await button.click();
  71 |       const dialog = page.locator('dialog.eg-dialog');
  72 |       await expect(dialog).toBeVisible();
  73 |       await expect(dialog.locator('.eg-canvas canvas').first()).toBeVisible({ timeout: 60000 });
  74 |       // centred in the viewport, horizontally and vertically
  75 |       const box = (await dialog.boundingBox())!;
  76 |       const vp = page.viewportSize()!;
  77 |       expect(Math.abs(box.x - (vp.width - box.x - box.width))).toBeLessThanOrEqual(2);
  78 |       expect(Math.abs(box.y - (vp.height - box.y - box.height))).toBeLessThanOrEqual(2);
  79 |       await page.keyboard.press('Escape');
  80 |       await expect(dialog).toBeHidden();
  81 |       expect(errors).toEqual([]);
  82 |     });
  83 |   }
  84 | });
  85 | 
```