# 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) >> race and Civitech score filters (persuadable, high-turnout Latinx voters in Miami-Dade) - Location: tests/ui/voters.spec.ts:126:7 # Error details ``` Test timeout of 30000ms exceeded. ``` ``` Error: expect(locator).toBeVisible() failed Locator: locator('.entity-search-result').first() Expected: visible Error: element(s) not found Call log: - Expect "toBeVisible" locator('.entity-search-result').first() with timeout 30000ms - waiting for locator('.entity-search-result').first() - Test timeout of 30000ms exceeded. ``` ```yaml - region "Status messages" - banner - main "Authentication form": - text: elect.info - heading "Sign in to elect.info" [level=1] - paragraph: Login to continue to us.elect.info. - text: Email - textbox "Email" - text: Password - textbox "Password": - /placeholder: Please enter your password - button "Log in" - group "Login sources": - text: or Login sources - button "Continue with Google" - group "Additional actions": - text: Additional actions Need an account? - link "Sign up.": - /url: /if/flow/elect-info-enrollment/?client_id=KI5Be8scLVeZN7n5zY8p5s8VbpyradOSKQvo9T2c&redirect_uri=https%3A%2F%2Fus.elect.info%2Foutpost.goauthentik.io%2Fcallback%3FX-authentik-auth-callback%3Dtrue&response_type=code&scope=openid+entitlements+ak_proxy+email+profile&state=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnb2F1dGhlbnRpay5pby9vdXRwb3N0L0tJNUJlOHNjTFZlWk43bjV6WThwNXM4VmJweXJhZE9TS1F2bzlUMmMiLCJzaWQiOiJRTElDRFMyTTNCSkxDNlBRRFhYRkdDSElLNU0zWjZFRVFRVkVBMllRQVpSSUJCRkdWQzZBIiwic3RhdGUiOiIzN3BDanl5cjhhNmRjUUNsRkg0T1lVaC1lRkJTQnR6MVNqX1NBSGg3ZXFJIiwicmVkaXJlY3QiOiJodHRwczovL3VzLmVsZWN0LmluZm8vdm90ZXJzLz9mX3N0YXRlPUZMXHUwMDI2Zl9jb3VudHk9TUlBTUktREFERVx1MDAyNmZfcmFjZT1MQVRJTlhcdTAwMjZmX3N1cHBvcnRfZGVtPXRvc3N1cFx1MDAyNmZfdHVybm91dF9wcmVzPWhpZ2gifQ.fp4lA5HxJwTSle78NiEv7dqwNW76PhWJHx57wVtx8E8&next=%2Fapplication%2Fo%2Fauthorize%2F%3Fclient_id%3DKI5Be8scLVeZN7n5zY8p5s8VbpyradOSKQvo9T2c%26redirect_uri%3Dhttps%253A%252F%252Fus.elect.info%252Foutpost.goauthentik.io%252Fcallback%253FX-authentik-auth-callback%253Dtrue%26response_type%3Dcode%26scope%3Dopenid%2Bentitlements%2Bak_proxy%2Bemail%2Bprofile%26state%3DeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnb2F1dGhlbnRpay5pby9vdXRwb3N0L0tJNUJlOHNjTFZlWk43bjV6WThwNXM4VmJweXJhZE9TS1F2bzlUMmMiLCJzaWQiOiJRTElDRFMyTTNCSkxDNlBRRFhYRkdDSElLNU0zWjZFRVFRVkVBMllRQVpSSUJCRkdWQzZBIiwic3RhdGUiOiIzN3BDanl5cjhhNmRjUUNsRkg0T1lVaC1lRkJTQnR6MVNqX1NBSGg3ZXFJIiwicmVkaXJlY3QiOiJodHRwczovL3VzLmVsZWN0LmluZm8vdm90ZXJzLz9mX3N0YXRlPUZMXHUwMDI2Zl9jb3VudHk9TUlBTUktREFERVx1MDAyNmZfcmFjZT1MQVRJTlhcdTAwMjZmX3N1cHBvcnRfZGVtPXRvc3N1cFx1MDAyNmZfdHVybm91dF9wcmVzPWhpZ2gifQ.fp4lA5HxJwTSle78NiEv7dqwNW76PhWJHx57wVtx8E8 - link "Forgot username or password?": - /url: /if/flow/elect-info-recovery/?client_id=KI5Be8scLVeZN7n5zY8p5s8VbpyradOSKQvo9T2c&redirect_uri=https%3A%2F%2Fus.elect.info%2Foutpost.goauthentik.io%2Fcallback%3FX-authentik-auth-callback%3Dtrue&response_type=code&scope=openid+entitlements+ak_proxy+email+profile&state=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnb2F1dGhlbnRpay5pby9vdXRwb3N0L0tJNUJlOHNjTFZlWk43bjV6WThwNXM4VmJweXJhZE9TS1F2bzlUMmMiLCJzaWQiOiJRTElDRFMyTTNCSkxDNlBRRFhYRkdDSElLNU0zWjZFRVFRVkVBMllRQVpSSUJCRkdWQzZBIiwic3RhdGUiOiIzN3BDanl5cjhhNmRjUUNsRkg0T1lVaC1lRkJTQnR6MVNqX1NBSGg3ZXFJIiwicmVkaXJlY3QiOiJodHRwczovL3VzLmVsZWN0LmluZm8vdm90ZXJzLz9mX3N0YXRlPUZMXHUwMDI2Zl9jb3VudHk9TUlBTUktREFERVx1MDAyNmZfcmFjZT1MQVRJTlhcdTAwMjZmX3N1cHBvcnRfZGVtPXRvc3N1cFx1MDAyNmZfdHVybm91dF9wcmVzPWhpZ2gifQ.fp4lA5HxJwTSle78NiEv7dqwNW76PhWJHx57wVtx8E8&next=%2Fapplication%2Fo%2Fauthorize%2F%3Fclient_id%3DKI5Be8scLVeZN7n5zY8p5s8VbpyradOSKQvo9T2c%26redirect_uri%3Dhttps%253A%252F%252Fus.elect.info%252Foutpost.goauthentik.io%252Fcallback%253FX-authentik-auth-callback%253Dtrue%26response_type%3Dcode%26scope%3Dopenid%2Bentitlements%2Bak_proxy%2Bemail%2Bprofile%26state%3DeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnb2F1dGhlbnRpay5pby9vdXRwb3N0L0tJNUJlOHNjTFZlWk43bjV6WThwNXM4VmJweXJhZE9TS1F2bzlUMmMiLCJzaWQiOiJRTElDRFMyTTNCSkxDNlBRRFhYRkdDSElLNU0zWjZFRVFRVkVBMllRQVpSSUJCRkdWQzZBIiwic3RhdGUiOiIzN3BDanl5cjhhNmRjUUNsRkg0T1lVaC1lRkJTQnR6MVNqX1NBSGg3ZXFJIiwicmVkaXJlY3QiOiJodHRwczovL3VzLmVsZWN0LmluZm8vdm90ZXJzLz9mX3N0YXRlPUZMXHUwMDI2Zl9jb3VudHk9TUlBTUktREFERVx1MDAyNmZfcmFjZT1MQVRJTlhcdTAwMjZmX3N1cHBvcnRfZGVtPXRvc3N1cFx1MDAyNmZfdHVybm91dF9wcmVzPWhpZ2gifQ.fp4lA5HxJwTSle78NiEv7dqwNW76PhWJHx57wVtx8E8 ``` # Test source ```ts 28 | }); 29 | 30 | test('the public /api/graphql refuses voter queries', async ({ request }) => { 31 | // Refused by the visitor-token gate (401 without a token, 403 for an unlisted 32 | // document) or, on a target without the gate, by the API (FORBIDDEN). 33 | const refused = async (res: APIResponse) => { 34 | if (res.status() === 401 || res.status() === 403) return; 35 | const body = await res.json() as { data?: unknown; errors?: Array<{ extensions?: { code?: string } }> }; 36 | expect(body.errors?.[0]?.extensions?.code).toBe('FORBIDDEN'); 37 | expect(JSON.stringify(body.data ?? null)).not.toContain('"id"'); 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 }); | ^ Error: expect(locator).toBeVisible() failed 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 }); 139 | const hrefs = await districts.locator('a').evaluateAll(as => as.map(a => a.getAttribute('href'))); 140 | expect(hrefs).toEqual(expect.arrayContaining([ 141 | '/districts/ny-25/', 142 | '/voters/?f_state=NY&f_cd=NY-25', 143 | '/voters/?f_state=NY&f_senate=NY-055', 144 | '/voters/?f_state=NY&f_house=NY-138', 145 | '/voters/?f_state=NY&f_precinct=36055Rochester_Ward_24_ED_6', 146 | ])); 147 | await expect(districts.locator('dd')).toHaveCount(4); 148 | expect(await districts.locator('dd:not(:has(a))').count()).toBe(0); 149 | 150 | // Location: state, place, ZIP and county pages (graph ids from the public API) plus the filtered voters list. 151 | const location = page.locator('section#location'); 152 | await expect(location.locator('a[href^="/places/"]')).toHaveText('Rochester city', { timeout: DATA_LOAD_TIMEOUT }); 153 | const locationHrefs = await location.locator('a').evaluateAll(as => as.map(a => a.getAttribute('href'))); 154 | expect(locationHrefs).toEqual([ 155 | '/states/ny/', '/voters/?f_state=NY', 156 | expect.stringMatching(/^\/places\/[0-9a-f-]+\/$/), '/voters/?f_state=NY&f_city=ROCHESTER', 157 | expect.stringMatching(/^\/postalcodes\/[0-9a-f-]+\/$/), '/voters/?f_state=NY&f_zip=14620', 158 | expect.stringMatching(/^\/counties\/[0-9a-f-]+\/$/), '/voters/?f_state=NY&f_county=MONROE', 159 | ]); 160 | await expect(location.locator('a[href^="/counties/"]')).toHaveText('Monroe County'); 161 | await expect(page.locator('section#overview a')).toHaveCount(0); 162 | 163 | await districts.locator('a', { hasText: 'NY-055' }).click(); 164 | await expect(page).toHaveURL(/\/voters\/\?f_state=NY&f_senate=NY-055$/); 165 | await expect(page.locator('.entity-search-result').first()).toContainText(', NY', { timeout: DATA_LOAD_TIMEOUT }); 166 | await expect(page.locator('#entity-filter-senate')).toHaveValue('NY-055', { timeout: DATA_LOAD_TIMEOUT }); 167 | }); 168 | 169 | test('an unknown voter id renders Not Found', async ({ page }) => { 170 | await page.goto('/voters/00000000-0000-0000-0000-000000000000/'); 171 | await expect(page.locator('.leaf-detail-page h1')).toHaveText(/Voter Not Found/, { timeout: DATA_LOAD_TIMEOUT }); 172 | }); 173 | }); 174 | 175 | test.describe('voter Location card (mocked)', () => { 176 | const voter = { 177 | id: 'v-loc', name_last: 'MOLLICA', name_first: 'CAROL', state: 'MA', addr_state: 'MA', 178 | city: 'WRENTHAM', zip: '02093', county: 'NORFOLK', congressional_district: 'MA-04', 179 | state_senate_district: 'MA-D14', state_house_district: 'MA-104', precinct: '25021823150003', 180 | }; 181 | 182 | test('State, Place, Postal code and County link their pages plus the filtered voters list; Overview and Districts drop them', async ({ page }) => { 183 | const lookups: string[] = []; 184 | await page.route('**/api/graphql', async route => { 185 | const body = route.request().postData() || ''; 186 | if (route.request().url().includes('/voters/api/graphql')) { 187 | return route.fulfill({ json: { data: { voter } } }); 188 | } 189 | lookups.push(body); 190 | return route.fulfill({ json: { data: { 191 | postalCodes: [{ id: 'zip-02093', zip_code: '02093', overlapsCounties: [ 192 | { id: 'cty-bristol', name: 'Bristol County', state: 'MA' }, 193 | { id: 'cty-norfolk', name: 'Norfolk County', state: 'MA' }, 194 | ] }], 195 | places: [{ id: 'place-wrentham', name: 'Wrentham CDP' }], 196 | } } }); 197 | }); 198 | await page.goto('/voters/v-loc/'); 199 | const location = page.locator('section#location'); 200 | await expect(location.locator('a').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 201 | expect(await location.locator('a').evaluateAll(as => as.map(a => a.getAttribute('href')))).toEqual([ 202 | '/states/ma/', '/voters/?f_state=MA', 203 | '/places/place-wrentham/', '/voters/?f_state=MA&f_city=WRENTHAM', 204 | '/postalcodes/zip-02093/', '/voters/?f_state=MA&f_zip=02093', 205 | '/counties/cty-norfolk/', '/voters/?f_state=MA&f_county=NORFOLK', 206 | ]); 207 | await expect(location.locator('a[href="/counties/cty-norfolk/"]')).toHaveText('Norfolk County'); 208 | expect(lookups.some(b => b.includes('query VoterLocation(') && b.includes('"city":"WRENTHAM"') && b.includes('"zip":"02093"'))).toBe(true); 209 | await expect(page.locator('section#overview')).not.toContainText('Wrentham'); 210 | await expect(page.locator('section#districts dt')).toHaveText(['Congressional district', 'State senate district', 'State house district', 'Precinct']); 211 | }); 212 | 213 | test('without graph matches (or a failed lookup) each value opens the filtered voters list', async ({ page }) => { 214 | await page.route('**/api/graphql', async route => { 215 | if (route.request().url().includes('/voters/api/graphql')) { 216 | return route.fulfill({ json: { data: { voter } } }); 217 | } 218 | return route.fulfill({ status: 500, body: '' }); 219 | }); 220 | await page.goto('/voters/v-loc/'); 221 | const location = page.locator('section#location'); 222 | await expect(location.locator('a').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 223 | expect(await location.locator('a').evaluateAll(as => as.map(a => a.getAttribute('href')))).toEqual([ 224 | '/states/ma/', '/voters/?f_state=MA', 225 | '/voters/?f_state=MA&f_city=WRENTHAM', 226 | '/voters/?f_state=MA&f_zip=02093', 227 | '/voters/?f_state=MA&f_county=NORFOLK', 228 | ]); ```