# 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/leaf-details.spec.ts >> leaf collection client-side detail pages >> employer detail renders totals and a bounded donor list below threshold - Location: tests/ui/leaf-details.spec.ts:81:7 # Error details ``` Error: expect(locator).toHaveText(expected) failed Locator: locator('.leaf-detail-page h1') Expected pattern: /SPACE EXPLORATION TECHNOLOGIES/i Timeout: 20000ms Error: element(s) not found Call log: - Expect "toHaveText" locator('.leaf-detail-page h1') with timeout 20000ms - waiting for locator('.leaf-detail-page h1') ``` ```yaml - banner: - heading "Loading..." [level=1] - paragraph: Loading profile - paragraph: Fetching current data... ``` # Test source ```ts 1 | import { test, expect, Page } from '@playwright/test'; 2 | 3 | const DATA_LOAD_TIMEOUT = 20_000; 4 | 5 | const samples = { 6 | individual: { 7 | path: '/individuals/93964649-04c3-db10-7f63-261c8c488cce/', 8 | heading: /BLOOMBERG, MICHAEL/i, 9 | operation: 'IndividualDetail', 10 | // moneyCounterparties (sites#194), or IndividualCommitteesLegacy on an API without it 11 | relationship: 'IndividualCommittees', 12 | }, 13 | employer: { 14 | path: '/employers/5f9a1727-2225-3699-685b-8fb15c17c8f3/', 15 | heading: /SPACE EXPLORATION TECHNOLOGIES/i, 16 | operation: 'EmployerDonors', 17 | relationship: 'individualsEmployedByConnection', 18 | }, 19 | vendor: { 20 | path: '/vendors/a2e9cfea-dee0-2824-46f2-843916cd2199/', 21 | heading: /TARGETED VICTORY/i, 22 | operation: 'VendorRankedClients', 23 | relationship: 'vendorClients', 24 | }, 25 | block: { 26 | path: '/blocks/a2e648d3-3cd7-613b-1bfe-85ea19fad69a/', 27 | heading: /Block 1020/i, 28 | operation: 'BlockDetail', 29 | relationship: 'inCountyCountiesConnection', 30 | }, 31 | precinct: { 32 | path: '/precincts/2ff858ff-68ec-a17d-a564-4e71054573c6/', 33 | heading: /Providence/i, 34 | operation: 'PrecinctDetail', 35 | relationship: 'inCountyCountiesConnection', 36 | }, 37 | }; 38 | 39 | async function openLeafDetail( 40 | page: Page, 41 | sample: { path: string; heading: RegExp; operation: string; relationship: string }, 42 | bounded = true, 43 | ): Promise { 44 | const graphqlBodies: string[] = []; 45 | page.on('request', request => { 46 | if (request.method() === 'POST' && request.url().includes('/api/graphql')) { 47 | graphqlBodies.push(request.postData() || ''); 48 | } 49 | }); 50 | 51 | const response = await page.goto(sample.path); 52 | expect(response?.status(), `${sample.path} should serve the baked shell`).toBe(200); > 53 | await expect(page.locator('.leaf-detail-page h1')).toHaveText(sample.heading, { timeout: DATA_LOAD_TIMEOUT }); | ^ Error: expect(locator).toHaveText(expected) failed 54 | 55 | await expect(page).toHaveTitle(/elect\.info$/i); 56 | await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', 'noindex, follow'); 57 | await expect(page.locator('link[rel="canonical"]')).toHaveAttribute('href', /^https:\/\/us\.elect\.info\//); 58 | await expect(page.locator('section#overview')).toBeVisible(); 59 | 60 | expect(graphqlBodies.some(body => body.includes(sample.operation)), `${sample.operation} request missing`).toBe(true); 61 | if (!bounded) return graphqlBodies; 62 | const boundedBody = graphqlBodies.find(body => body.includes(sample.relationship)); 63 | expect(boundedBody, `${sample.relationship} request missing`).toBeTruthy(); 64 | expect(boundedBody).toContain('first: 20'); 65 | return graphqlBodies; 66 | } 67 | 68 | test.describe('leaf collection client-side detail pages', () => { 69 | test('individual detail renders a bounded contribution profile', async ({ page }) => { 70 | const bodies = await openLeafDetail(page, samples.individual); 71 | const detail = bodies.find(body => body.includes('IndividualDetail')) || ''; 72 | expect(detail).not.toContain('contributedToCommitteesConnection'); 73 | expect(detail.match(/first:\s*20/g) || []).toHaveLength(3); 74 | expect(bodies.some(body => body.includes('query IndividualCommittees(') && body.includes('moneyCounterparties'))).toBe(true); 75 | const legacy = bodies.find(body => body.includes('IndividualCommitteesLegacy')); 76 | if (legacy) expect(legacy).toContain('sort: [{ edge: { total_amount: DESC } }]'); 77 | await expect(page.locator('#committees .leaf-relationship-list')).toBeVisible(); 78 | await expect(page.locator('#committees .leaf-list-footer')).toContainText(/Showing (top \d+ of [\d,]+|all [\d,]+) committees/); 79 | }); 80 | 81 | test('employer detail renders totals and a bounded donor list below threshold', async ({ page }) => { 82 | const bodies = await openLeafDetail(page, samples.employer); 83 | const donors = bodies.find(body => body.includes('EmployerDonors')) || ''; 84 | expect(donors.match(/first:\s*20/g) || []).toHaveLength(1); 85 | await expect(page.locator('#activity')).toContainText('Employee donors'); 86 | await expect(page.locator('#donors .leaf-relationship-list')).toBeVisible(); 87 | }); 88 | 89 | test('vendor detail renders totals and committee clients, ranked or edge-sorted', async ({ page }) => { 90 | const bodies = await openLeafDetail(page, samples.vendor, false); 91 | await expect(page.locator('#clients .leaf-list-footer')).toContainText(/Showing (top \d+ of [\d,]+|all [\d,]+) committees/, { 92 | timeout: DATA_LOAD_TIMEOUT, 93 | }); 94 | await expect(page.locator('#clients .leaf-relationship-list')).toHaveCount(1); 95 | // The ranked list (sites#261) replaces the live list once the graph has PAYS ranks; until then 96 | // moneyCounterparties (sites#194), or on an API without it the bounded edge-sorted connection. 97 | const live = bodies.find(body => body.includes('query VendorClients(')); 98 | if (live) { 99 | expect(live).toContain('sort: [{ edge: { total_amount: DESC } }]'); 100 | expect(live.match(/first:\s*20/g) || []).toHaveLength(1); 101 | } 102 | // Sankey is the default view; Table brings the list back. 103 | await expect(page.locator('#clients .money-flow-chart canvas')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 104 | await page.locator('#clients .mf-view-btn[data-view="table"]').click(); 105 | await expect(page.locator('#clients .leaf-relationship-list')).toBeVisible(); 106 | await page.locator('#clients .mf-view-btn[data-view="sankey"]').click(); 107 | }); 108 | 109 | test('block detail renders voter data and bounded geography links', async ({ page }) => { 110 | const bodies = await openLeafDetail(page, samples.block); 111 | const detail = bodies.find(body => body.includes('BlockDetail')) || ''; 112 | expect(detail.match(/first:\s*20/g) || []).toHaveLength(2); 113 | await expect(page.locator('#registration')).toContainText('Registered'); 114 | await expect(page.locator('#geography a').first()).toBeVisible(); 115 | }); 116 | 117 | test('block map links (/blocks//) resolve to the block by its derived id', async ({ page }) => { 118 | const bodies = await openLeafDetail(page, { ...samples.block, path: '/blocks/461030114001020/' }); 119 | const detail = bodies.find(body => body.includes('BlockDetail')) || ''; 120 | expect(detail).toContain('a2e648d3-3cd7-613b-1bfe-85ea19fad69a'); 121 | await expect(page.locator('#overview')).toContainText('461030114001020'); 122 | }); 123 | 124 | test('precinct detail bootstraps directly and renders results', async ({ page }) => { 125 | const bodies = await openLeafDetail(page, samples.precinct); 126 | const detail = bodies.find(body => body.includes('PrecinctDetail')) || ''; 127 | expect(detail.match(/first:\s*20/g) || []).toHaveLength(1); 128 | await expect(page.locator('#results')).toContainText('Democratic'); 129 | await expect(page.locator('#results')).toContainText('D+51.7%'); 130 | await expect(page.locator('#county a').first()).toBeVisible(); 131 | }); 132 | 133 | test('tract detail remains client-rendered under the generalized leaf route', async ({ page }) => { 134 | const graphqlBodies: string[] = []; 135 | page.on('request', request => { 136 | if (request.method() === 'POST' && request.url().includes('/api/graphql')) { 137 | graphqlBodies.push(request.postData() || ''); 138 | } 139 | }); 140 | 141 | const response = await page.goto('/tracts/48453000101/'); 142 | expect(response?.status()).toBe(200); 143 | await expect(page.locator('header h1')).toContainText('Census Tract 1.01', { timeout: DATA_LOAD_TIMEOUT }); 144 | await expect(page).toHaveTitle(/elect\.info$/i); 145 | await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', 'noindex, follow'); 146 | await expect(page.locator('link[rel="canonical"]')).toHaveAttribute('href', /^https:\/\/us\.elect\.info\/tracts\//); 147 | 148 | const detail = graphqlBodies.find(body => body.includes('TractDetail')) || ''; 149 | expect(detail).toContain('variables'); 150 | expect(detail.match(/limit:\s*20/g) || []).toHaveLength(3); 151 | }); 152 | 153 | test('hub employer renders totals without issuing a live connection query', async ({ page }) => { ```