# 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 >> individual detail renders a bounded contribution profile - Location: tests/ui/leaf-details.spec.ts:70:7 # Error details ``` Error: expect(locator).toBeVisible() failed Locator: locator('#committees .leaf-relationship-list') Expected: visible Received: hidden Timeout: 5000ms Call log: - Expect "toBeVisible" locator('#committees .leaf-relationship-list') with timeout 5000ms - waiting for locator('#committees .leaf-relationship-list') 14 × locator resolved to …
- unexpected value "hidden" ``` ```yaml - banner: - heading "BLOOMBERG, MICHAEL R." [level=1] - paragraph: Individual Donor - text: Not signed in - link "Log in": - /url: /outpost.goauthentik.io/start?rd=http%3A%2F%2Fpreview-us-elect-info.electinfo.svc.cluster.local%2Findividuals%2F93964649-04c3-db10-7f63-261c8c488cce%2F - link "Create an account": - /url: /signin/register?rd=http%3A%2F%2Fpreview-us-elect-info.electinfo.svc.cluster.local%2Findividuals%2F93964649-04c3-db10-7f63-261c8c488cce%2F - toolbar "Member tools": - button "All cycles (Sign in to use the cycle facet)" [disabled]: All cycles - button "Graph (Sign in to use Graph)" [disabled]: Graph - heading "Overview" [level=2] - term: Name - definition: BLOOMBERG, MICHAEL R. - term: Location - definition: NEW YORK, NY, 101501060 - term: Employer - definition: BLOOMBERG INC. - term: Occupation - definition: FOUNDER - term: Cycles - definition: 2024,2020,2026,2022 - term: First contribution - definition: Oct 31, 2019 - term: Last contribution - definition: Jun 30, 2026 - heading "Contribution Activity" [level=2] - term: Total contributed - definition: $1,170,551,222.00 - term: Contributions - definition: 2,168 - term: Committees - definition: "14" - heading "Top Committees" [level=2] - group "View": - button "Sankey view" [pressed] - button "Table view" - img "Top Committees as a Sankey diagram. Switch to table view for the list." - paragraph: Small contributions are drawn wider than scale so each committee stays visible; hover for exact amounts. - paragraph: Showing all 14 committees - heading "Employers (up to 20)" [level=2] - table: - rowgroup: - row "Employer Occupation Records": - columnheader "Employer" - columnheader "Occupation" - columnheader "Records" - rowgroup: - row "BLOOMBERG INC. FOUNDER 2,168": - cell "BLOOMBERG INC.": - link "BLOOMBERG INC.": - /url: /employers/80b9da95-4d78-7197-9b49-56ffecaa3972/ - cell "FOUNDER" - cell "2,168" - heading "Geography" [level=2] - table: - rowgroup: - row "Type Location State": - columnheader "Type" - columnheader "Location" - columnheader "State" - rowgroup: - row "Place New York city NY": - cell "Place" - cell "New York city": - link "New York city": - /url: /places/ca618c7a-7e55-8831-2ba3-790766779140/ - cell "NY" - contentinfo: - paragraph: - link "elect.info": - /url: https://us.elect.info/ - text: "|" - link "Browse Individual Donors": - /url: /individuals/ ``` # Test source ```ts 1 | import { test, expect, Page } from '@playwright/test'; 2 | import { premiumVisitor } from './helpers'; 3 | 4 | const DATA_LOAD_TIMEOUT = 20_000; 5 | 6 | const samples = { 7 | individual: { 8 | path: '/individuals/93964649-04c3-db10-7f63-261c8c488cce/', 9 | heading: /BLOOMBERG, MICHAEL/i, 10 | operation: 'IndividualDetail', 11 | // moneyCounterparties (sites#194), or IndividualCommitteesLegacy on an API without it 12 | relationship: 'IndividualCommittees', 13 | }, 14 | employer: { 15 | path: '/employers/5f9a1727-2225-3699-685b-8fb15c17c8f3/', 16 | heading: /SPACE EXPLORATION TECHNOLOGIES/i, 17 | operation: 'EmployerDonors', 18 | relationship: 'individualsEmployedByConnection', 19 | }, 20 | vendor: { 21 | path: '/vendors/a2e9cfea-dee0-2824-46f2-843916cd2199/', 22 | heading: /TARGETED VICTORY/i, 23 | operation: 'VendorRankedClients', 24 | relationship: 'vendorClients', 25 | }, 26 | block: { 27 | path: '/blocks/a2e648d3-3cd7-613b-1bfe-85ea19fad69a/', 28 | heading: /Block 1020/i, 29 | operation: 'BlockDetail', 30 | relationship: 'inCountyCountiesConnection', 31 | }, 32 | precinct: { 33 | path: '/precincts/2ff858ff-68ec-a17d-a564-4e71054573c6/', 34 | heading: /Providence/i, 35 | operation: 'PrecinctDetail', 36 | relationship: 'inCountyCountiesConnection', 37 | }, 38 | }; 39 | 40 | async function openLeafDetail( 41 | page: Page, 42 | sample: { path: string; heading: RegExp; operation: string; relationship: string }, 43 | bounded = true, 44 | ): Promise { 45 | const graphqlBodies: string[] = []; 46 | page.on('request', request => { 47 | if (request.method() === 'POST' && request.url().includes('/api/graphql')) { 48 | graphqlBodies.push(request.postData() || ''); 49 | } 50 | }); 51 | 52 | const response = await page.goto(sample.path); 53 | expect(response?.status(), `${sample.path} should serve the baked shell`).toBe(200); 54 | await expect(page.locator('.leaf-detail-page h1')).toHaveText(sample.heading, { timeout: DATA_LOAD_TIMEOUT }); 55 | 56 | await expect(page).toHaveTitle(/elect\.info$/i); 57 | await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', 'noindex, follow'); 58 | await expect(page.locator('link[rel="canonical"]')).toHaveAttribute('href', /^https:\/\/us\.elect\.info\//); 59 | await expect(page.locator('section#overview')).toBeVisible(); 60 | 61 | expect(graphqlBodies.some(body => body.includes(sample.operation)), `${sample.operation} request missing`).toBe(true); 62 | if (!bounded) return graphqlBodies; 63 | const boundedBody = graphqlBodies.find(body => body.includes(sample.relationship)); 64 | expect(boundedBody, `${sample.relationship} request missing`).toBeTruthy(); 65 | expect(boundedBody).toContain('first: 20'); 66 | return graphqlBodies; 67 | } 68 | 69 | test.describe('leaf collection client-side detail pages', () => { 70 | test('individual detail renders a bounded contribution profile', async ({ page, baseURL }) => { 71 | await premiumVisitor(page.context(), baseURL); // donor records are premium (sites#277) 72 | const bodies = await openLeafDetail(page, samples.individual); 73 | const detail = bodies.find(body => body.includes('IndividualDetail')) || ''; 74 | expect(detail).not.toContain('contributedToCommitteesConnection'); 75 | expect(detail.match(/first:\s*20/g) || []).toHaveLength(3); 76 | expect(bodies.some(body => body.includes('query IndividualCommittees(') && body.includes('moneyCounterparties'))).toBe(true); 77 | const legacy = bodies.find(body => body.includes('IndividualCommitteesLegacy')); 78 | if (legacy) expect(legacy).toContain('sort: [{ edge: { total_amount: DESC } }]'); > 79 | await expect(page.locator('#committees .leaf-relationship-list')).toBeVisible(); | ^ Error: expect(locator).toBeVisible() failed 80 | await expect(page.locator('#committees .leaf-list-footer')).toContainText(/Showing (top \d+ of [\d,]+|all [\d,]+) committees/); 81 | }); 82 | 83 | test('employer detail renders totals and a bounded donor list below threshold', async ({ page, baseURL }) => { 84 | await premiumVisitor(page.context(), baseURL); // donor records are premium (sites#277) 85 | const bodies = await openLeafDetail(page, samples.employer); 86 | const donors = bodies.find(body => body.includes('EmployerDonors')) || ''; 87 | expect(donors.match(/first:\s*20/g) || []).toHaveLength(1); 88 | await expect(page.locator('#activity')).toContainText('Employee donors'); 89 | await expect(page.locator('#donors .leaf-relationship-list')).toBeVisible(); 90 | }); 91 | 92 | test('vendor detail renders totals and committee clients, ranked or edge-sorted', async ({ page }) => { 93 | const bodies = await openLeafDetail(page, samples.vendor, false); 94 | await expect(page.locator('#clients .leaf-list-footer')).toContainText(/Showing (top \d+ of [\d,]+|all [\d,]+) committees/, { 95 | timeout: DATA_LOAD_TIMEOUT, 96 | }); 97 | await expect(page.locator('#clients .leaf-relationship-list')).toHaveCount(1); 98 | // The ranked list (sites#261) replaces the live list once the graph has PAYS ranks; until then 99 | // moneyCounterparties (sites#194), or on an API without it the bounded edge-sorted connection. 100 | const live = bodies.find(body => body.includes('query VendorClients(')); 101 | if (live) { 102 | expect(live).toContain('sort: [{ edge: { total_amount: DESC } }]'); 103 | expect(live.match(/first:\s*20/g) || []).toHaveLength(1); 104 | } 105 | // Sankey is the default view; Table brings the list back. 106 | await expect(page.locator('#clients .money-flow-chart canvas')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 107 | await page.locator('#clients .mf-view-btn[data-view="table"]').click(); 108 | await expect(page.locator('#clients .leaf-relationship-list')).toBeVisible(); 109 | await page.locator('#clients .mf-view-btn[data-view="sankey"]').click(); 110 | }); 111 | 112 | test('block detail renders voter data and bounded geography links', async ({ page }) => { 113 | const bodies = await openLeafDetail(page, samples.block); 114 | const detail = bodies.find(body => body.includes('BlockDetail')) || ''; 115 | expect(detail.match(/first:\s*20/g) || []).toHaveLength(2); 116 | await expect(page.locator('#registration')).toContainText('Registered'); 117 | await expect(page.locator('#geography a').first()).toBeVisible(); 118 | }); 119 | 120 | test('block map links (/blocks//) resolve to the block by its derived id', async ({ page }) => { 121 | const bodies = await openLeafDetail(page, { ...samples.block, path: '/blocks/461030114001020/' }); 122 | const detail = bodies.find(body => body.includes('BlockDetail')) || ''; 123 | expect(detail).toContain('a2e648d3-3cd7-613b-1bfe-85ea19fad69a'); 124 | await expect(page.locator('#overview')).toContainText('461030114001020'); 125 | }); 126 | 127 | test('precinct detail bootstraps directly and renders results', async ({ page }) => { 128 | const bodies = await openLeafDetail(page, samples.precinct); 129 | const detail = bodies.find(body => body.includes('PrecinctDetail')) || ''; 130 | expect(detail.match(/first:\s*20/g) || []).toHaveLength(1); 131 | await expect(page.locator('#results')).toContainText('Democratic'); 132 | await expect(page.locator('#results')).toContainText('D+51.7%'); 133 | await expect(page.locator('#county a').first()).toBeVisible(); 134 | }); 135 | 136 | test('tract detail remains client-rendered under the generalized leaf route', async ({ page }) => { 137 | const graphqlBodies: string[] = []; 138 | page.on('request', request => { 139 | if (request.method() === 'POST' && request.url().includes('/api/graphql')) { 140 | graphqlBodies.push(request.postData() || ''); 141 | } 142 | }); 143 | 144 | const response = await page.goto('/tracts/48453000101/'); 145 | expect(response?.status()).toBe(200); 146 | await expect(page.locator('header h1')).toContainText('Census Tract 1.01', { timeout: DATA_LOAD_TIMEOUT }); 147 | await expect(page).toHaveTitle(/elect\.info$/i); 148 | await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', 'noindex, follow'); 149 | await expect(page.locator('link[rel="canonical"]')).toHaveAttribute('href', /^https:\/\/us\.elect\.info\/tracts\//); 150 | 151 | const detail = graphqlBodies.find(body => body.includes('TractDetail')) || ''; 152 | expect(detail).toContain('variables'); 153 | expect(detail.match(/limit:\s*20/g) || []).toHaveLength(3); 154 | }); 155 | 156 | test('hub employer renders totals without issuing a live connection query', async ({ page }) => { 157 | const graphqlBodies: string[] = []; 158 | const resolveUrls: string[] = []; 159 | await page.route('**/_resolve/**', async route => { 160 | resolveUrls.push(route.request().url()); 161 | await route.fulfill({ 162 | status: 200, 163 | contentType: 'application/json', 164 | body: JSON.stringify({ canonical_path: '/employers/hub-employer/' }), 165 | }); 166 | }); 167 | await page.route('**/api/graphql', async route => { 168 | const body = route.request().postData() || ''; 169 | graphqlBodies.push(body); 170 | await route.fulfill({ 171 | status: 200, 172 | contentType: 'application/json', 173 | body: JSON.stringify({ 174 | data: { 175 | employers: [{ 176 | id: 'hub-test', 177 | name: 'HUB EMPLOYER', 178 | name_normalized: 'hub employer', 179 | total_employee_contributions: 123456789, ```