# 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 loads candidates filtered to office - Location: tests/ui/entities.spec.ts:196:7 # Error details ``` TimeoutError: page.waitForResponse: Timeout 15000ms exceeded while waiting for event "response" ``` ``` Error: page.goto: net::ERR_ABORTED; maybe frame was detached? Call log: - navigating to "http://10.1.74.226/offices/684f6e2d-7105-932b-8b7f-94016580f727/", waiting until "load" ``` # Test source ```ts 105 | await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 106 | await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 107 | const shapes = await page.locator('#map .leaflet-interactive').all(); 108 | expect(shapes.length).toBeGreaterThan(0); 109 | 110 | // Switch to List view to test state selector and district results 111 | await page.locator('.toggle-btn[data-view="list"]').click(); 112 | 113 | // Districts list view loads state options from GraphQL, then requires selection 114 | const stateSelect = page.locator('#district-state-select'); 115 | await expect(stateSelect).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 116 | 117 | // Wait for state options to populate from GraphQL (more than just the placeholder) 118 | await page.waitForFunction(() => { 119 | const select = document.querySelector('#district-state-select') as HTMLSelectElement; 120 | return select && select.options.length > 1; 121 | }, { timeout: DATA_LOAD_TIMEOUT }); 122 | 123 | await stateSelect.selectOption('CA'); 124 | 125 | // Wait for district results to load 126 | await expect(page.locator('.district-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 127 | 128 | const links = await page.locator('.district-result').all(); 129 | expect(links.length).toBeGreaterThan(0); 130 | 131 | const hrefs = await Promise.all(links.slice(0, 20).map(l => l.getAttribute('href'))); 132 | const randomLinks = getRandomItems(hrefs.filter(Boolean) as string[], 3); 133 | 134 | for (const href of randomLinks) { 135 | const entityResponse = await page.goto(toRelativePath(href)); 136 | expect(entityResponse?.status(), `${toRelativePath(href)} should answer 200`).toBe(200); 137 | await expect(page.locator('h1')).toBeVisible(); 138 | } 139 | }); 140 | 141 | test('states section - index and random pages', async ({ page }) => { 142 | const indexResponse = await page.goto('/states/'); 143 | expect(indexResponse?.status(), '/states/ should answer 200').toBe(200); 144 | await expect(page.locator('h1')).toContainText(/States/i); 145 | 146 | // Map view is default — verify Leaflet map renders with GeoJSON state shapes 147 | await expect(page.locator('#map.leaflet-container')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 148 | await expect(page.locator('#map .leaflet-interactive').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 149 | const shapes = await page.locator('#map .leaflet-interactive').all(); 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); | ^ Error: page.goto: net::ERR_ABORTED; maybe frame was detached? 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 }); 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++) { ```