# 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/voters.spec.ts >> voters (premium) >> every Districts row links; legislative districts open the filtered voters list - Location: tests/ui/voters.spec.ts:134:7 # Error details ``` Test timeout of 30000ms exceeded. ``` ``` Error: expect(locator).toBeVisible() failed Locator: locator('section#districts').locator('a').first() Expected: visible Timeout: 30000ms Error: element(s) not found Call log: - Expect "toBeVisible" locator('section#districts').locator('a').first() with timeout 30000ms - waiting for locator('section#districts').locator('a').first() ``` ```yaml - banner: - heading "Voter Not Found" [level=1] - paragraph: The requested profile could not be loaded. - text: Not signed in - link "Log in": - /url: /outpost.goauthentik.io/start?rd=http%3A%2F%2Fpreview-us-elect-info.electinfo.svc.cluster.local%2Fvoters%2F0c13135d-8e3d-3aa4-1077-28a81eb5d10f%2F - link "Create an account": - /url: /signin/register?rd=http%3A%2F%2Fpreview-us-elect-info.electinfo.svc.cluster.local%2Fvoters%2F0c13135d-8e3d-3aa4-1077-28a81eb5d10f%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 - paragraph: GraphQL request failed (400) ``` # Test source ```ts 38 | }; 39 | const anon = mintVisitorToken('anon'); 40 | const asAnon = anon ? { Cookie: `ei_vt=${anon}` } : {}; 41 | 42 | await refused(await request.post('/api/graphql', { data: { query: BROWSE }, headers: asAnon })); 43 | // A client-sent marker must not get through either: nginx clears it. 44 | await refused(await request.post('/api/graphql', { 45 | data: { query: BROWSE }, 46 | headers: { ...asAnon, 'X-Premium-Access': 'voters' }, 47 | })); 48 | // Facets are voter data too. 49 | await refused(await request.post('/api/graphql', { 50 | data: { query: '{ entityFacets(entityType: Voter, field: "county", filters: [{ field: "state", values: ["FL"] }]) { value count } }' }, 51 | headers: asAnon, 52 | })); 53 | }); 54 | 55 | test('a premium visitor token reads voters through /api/graphql', async ({ request }) => { 56 | test.skip(!mintVisitorToken('premium'), 'needs the target\'s visitor-token key (EI_VT_KEY)'); 57 | const res = await request.post('/api/graphql', { data: { query: BROWSE }, headers: visitorHeaders() }); 58 | expect(res.status()).toBe(200); 59 | const body = await res.json() as { data?: { browseEntities?: { results: Array<{ id: string }> } } }; 60 | expect(body.data?.browseEntities?.results.length).toBe(1); 61 | }); 62 | 63 | test('/voters/api/graphql answers voter queries and only POST', async ({ request }) => { 64 | const res = await request.post('/voters/api/graphql', { data: { query: BROWSE } }); 65 | expect(res.status()).toBe(200); 66 | expect(res.headers()['cache-control']).toContain('no-store'); 67 | const body = await res.json() as { data?: { browseEntities?: { results: Array<{ id: string; name: string }> } } }; 68 | expect(body.data?.browseEntities?.results.length).toBe(1); 69 | 70 | const get = await request.get('/voters/api/graphql', { maxRedirects: 0 }); 71 | expect(get.status()).toBe(405); 72 | }); 73 | 74 | test('browse lists the most active voters and links to detail pages', async ({ page }) => { 75 | const response = await page.goto('/voters/'); 76 | expect(response?.status()).toBe(200); 77 | const results = page.locator('.entity-search-result'); 78 | await expect(results.first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 79 | await expect(results.first()).toContainText(/elections voted/); 80 | 81 | const href = await results.first().getAttribute('href'); 82 | expect(href).toMatch(/^\/voters\/[0-9a-f-]{36}\/$/); 83 | const detail = await page.goto(href!); 84 | expect(detail?.status()).toBe(200); 85 | await expect(page.locator('.leaf-detail-page h1')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 86 | await expect(page.locator('.leaf-detail-page h1')).not.toHaveText(/Not Found/i); 87 | await expect(page.locator('section#history')).toContainText('Elections voted'); 88 | await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', 'noindex, follow'); 89 | }); 90 | 91 | test('search needs every term: name plus city', async ({ page }) => { 92 | await page.goto('/voters/'); 93 | await page.fill('#entity-search-input', 'john smith austin'); 94 | await page.locator('#entity-search-form button[type="submit"]').click(); 95 | const results = page.locator('.entity-search-result'); 96 | await expect(results.first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 97 | await expect(results.filter({ hasText: /SMITH, JOHN/ }).first()).toContainText(/Austin, TX/i); 98 | }); 99 | 100 | test('state filter narrows the list and scopes the county and district dropdowns', async ({ page }) => { 101 | await page.goto('/voters/'); 102 | await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 103 | await expect(page.locator('.entity-filter-control[data-key="county"]')).toBeHidden(); 104 | await page.selectOption('#entity-filter-state', 'FL'); 105 | await expect(page.locator('.entity-search-result').first()).toContainText(', FL', { timeout: DATA_LOAD_TIMEOUT }); 106 | await expect(page).toHaveURL(/[?&]f_state=FL/); 107 | await expect(page.locator('#entity-filter-county option', { hasText: /Miami-Dade \([\d,]+\)/ })).toHaveCount(1, { timeout: DATA_LOAD_TIMEOUT }); 108 | await expect(page.locator('#entity-filter-cd option', { hasText: 'FL-27' })).toHaveCount(1); 109 | }); 110 | 111 | test('filters combine, count matches and survive a reload', async ({ page }) => { 112 | await page.goto('/voters/?f_state=FL&f_county=MIAMI-DADE&f_age=65-74&f_party=DEM'); 113 | const results = page.locator('.entity-search-result'); 114 | await expect(results.first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 115 | await expect(results.first()).toContainText('Democratic (DEM)'); 116 | await expect(results.first()).toContainText(/Age (6[5-9]|7[0-4])\b/); 117 | await expect(page.locator('#entity-results-count')).toHaveText(/^[\d,]+ match(es)?$/); 118 | await expect(page.locator('#entity-results-title')).toContainText('Miami-Dade'); 119 | await expect(page.locator('#entity-filter-county')).toHaveValue('MIAMI-DADE', { timeout: DATA_LOAD_TIMEOUT }); 120 | 121 | await page.locator('#entity-filter-reset').click(); 122 | await expect(page).not.toHaveURL(/f_state=/); 123 | await expect(page.locator('.entity-filter-control[data-key="county"]')).toBeHidden(); 124 | }); 125 | 126 | test('race and Civitech score filters (persuadable, high-turnout Latinx voters in Miami-Dade)', async ({ page }) => { 127 | await page.goto('/voters/?f_state=FL&f_county=MIAMI-DADE&f_race=LATINX&f_support_dem=tossup&f_turnout_pres=high'); 128 | await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 129 | await expect(page.locator('#entity-results-count')).toHaveText(/^[\d,]+ match(es)?$/); 130 | await expect(page.locator('#entity-results-title')).toContainText('Latinx'); 131 | await expect(page.locator('#entity-filter-support_dem')).toHaveValue('tossup'); 132 | }); 133 | 134 | test('every Districts row links; legislative districts open the filtered voters list', async ({ page }) => { 135 | // A Rochester, NY voter with all four district codes and a precinct. 136 | await page.goto('/voters/0c13135d-8e3d-3aa4-1077-28a81eb5d10f/'); 137 | const districts = page.locator('section#districts'); > 138 | await expect(districts.locator('a').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); | ^ Error: expect(locator).toBeVisible() failed 139 | const hrefs = await districts.locator('a').evaluateAll(as => as.map(a => a.getAttribute('href'))); 140 | expect(hrefs).toEqual(expect.arrayContaining([ 141 | '/states/ny/', 142 | '/voters/?f_state=NY', 143 | '/districts/ny-25/', 144 | '/voters/?f_state=NY&f_cd=NY-25', 145 | '/voters/?f_state=NY&f_senate=NY-055', 146 | '/voters/?f_state=NY&f_house=NY-138', 147 | '/voters/?f_state=NY&f_precinct=36055Rochester_Ward_24_ED_6', 148 | ])); 149 | await expect(districts.locator('dd')).toHaveCount(5); 150 | expect(await districts.locator('dd:not(:has(a))').count()).toBe(0); 151 | 152 | // Overview: city, state, ZIP and county link too. 153 | const overview = await page.locator('section#overview a').evaluateAll(as => as.map(a => a.getAttribute('href'))); 154 | expect(overview).toEqual([ 155 | '/voters/?f_state=NY&f_city=ROCHESTER', 156 | '/states/ny/', 157 | '/voters/?f_state=NY&f_zip=14620', 158 | '/voters/?f_state=NY&f_county=MONROE', 159 | ]); 160 | 161 | await districts.locator('a', { hasText: 'NY-055' }).click(); 162 | await expect(page).toHaveURL(/\/voters\/\?f_state=NY&f_senate=NY-055$/); 163 | await expect(page.locator('.entity-search-result').first()).toContainText(', NY', { timeout: DATA_LOAD_TIMEOUT }); 164 | await expect(page.locator('#entity-filter-senate')).toHaveValue('NY-055', { timeout: DATA_LOAD_TIMEOUT }); 165 | }); 166 | 167 | test('an unknown voter id renders Not Found', async ({ page }) => { 168 | await page.goto('/voters/00000000-0000-0000-0000-000000000000/'); 169 | await expect(page.locator('.leaf-detail-page h1')).toHaveText(/Voter Not Found/, { timeout: DATA_LOAD_TIMEOUT }); 170 | }); 171 | }); 172 | ```