# 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) >> search needs every term: name plus city - Location: tests/ui/voters.spec.ts:93:7 # Error details ``` Error: expect(locator).toContainText(expected) failed Locator: locator('.entity-search-result').filter({ hasText: /SMITH, JOHN/ }).first() Timeout: 5000ms Expected pattern: /Austin, TX/i Received string: " SMITH, JOHN Austin, AR, 72007 | Age 77 | Unknown (UNK) | AR-01 | 12 elections voted··········· " Call log: - Expect "toContainText" locator('.entity-search-result').filter({ hasText: /SMITH, JOHN/ }).first() with timeout 5000ms - waiting for locator('.entity-search-result').filter({ hasText: /SMITH, JOHN/ }).first() 14 × locator resolved to … - unexpected value " SMITH, JOHN Austin, AR, 72007 | Age 77 | Unknown (UNK) | AR-01 | 12 elections voted " ``` ```yaml - link "SMITH, JOHN Austin, AR, 72007 | Age 77 | Unknown (UNK) | AR-01 | 12 elections voted": - /url: /voters/15a46a37-76b2-a70c-4aa3-596c59e5c936/ ``` # Test source ```ts 1 | import { test, expect, type APIRequestContext, type APIResponse } from '@playwright/test'; 2 | import { mintVisitorToken, skipIfPremiumGated, visitorHeaders } from './helpers'; 3 | 4 | // Voter search and detail pages (electinfo/sites#277), like Individual Donors. 5 | // Voter records are premium: the pages query /voters/api/graphql (behind the 6 | // premium gate, marked for the API by nginx), and the public /api/graphql 7 | // must refuse voter queries to anyone without a premium visitor token. 8 | 9 | const DATA_LOAD_TIMEOUT = 30_000; 10 | 11 | const BROWSE = `query { browseEntities(entityType: Voter, page: 1, pageSize: 1, sortOrder: DESC, sortField: "total_votes") { 12 | results { id name } } }`; 13 | 14 | /** The CI test pod proxies to the production API, which serves voters only after the release. */ 15 | async function apiServesVoters(request: APIRequestContext): Promise { 16 | const res = await request.post('/api/graphql', { 17 | data: { query: '{ __type(name: "EntityType") { enumValues { name } } }' }, 18 | headers: visitorHeaders(), 19 | }); 20 | if (res.status() !== 200) return false; 21 | const body = await res.json() as { data?: { __type?: { enumValues?: Array<{ name: string }> } } }; 22 | return !!body.data?.__type?.enumValues?.some(v => v.name === 'Voter'); 23 | } 24 | 25 | test.describe('voters (premium)', () => { 26 | test.beforeEach(async ({ request }) => { 27 | test.skip(!(await apiServesVoters(request)), 'the API behind this host does not serve voters yet'); 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 | await skipIfPremiumGated(request, '/voters/'); 65 | const res = await request.post('/voters/api/graphql', { data: { query: BROWSE } }); 66 | expect(res.status()).toBe(200); 67 | expect(res.headers()['cache-control']).toContain('no-store'); 68 | const body = await res.json() as { data?: { browseEntities?: { results: Array<{ id: string; name: string }> } } }; 69 | expect(body.data?.browseEntities?.results.length).toBe(1); 70 | 71 | const get = await request.get('/voters/api/graphql', { maxRedirects: 0 }); 72 | expect(get.status()).toBe(405); 73 | }); 74 | 75 | test('browse lists the most active voters and links to detail pages', async ({ page, request }) => { 76 | await skipIfPremiumGated(request, '/voters/'); 77 | const response = await page.goto('/voters/'); 78 | expect(response?.status()).toBe(200); 79 | const results = page.locator('.entity-search-result'); 80 | await expect(results.first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 81 | await expect(results.first()).toContainText(/elections voted/); 82 | 83 | const href = await results.first().getAttribute('href'); 84 | expect(href).toMatch(/^\/voters\/[0-9a-f-]{36}\/$/); 85 | const detail = await page.goto(href!); 86 | expect(detail?.status()).toBe(200); 87 | await expect(page.locator('.leaf-detail-page h1')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 88 | await expect(page.locator('.leaf-detail-page h1')).not.toHaveText(/Not Found/i); 89 | await expect(page.locator('section#history')).toContainText('Elections voted'); 90 | await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', 'noindex, follow'); 91 | }); 92 | 93 | test('search needs every term: name plus city', async ({ page, request }) => { 94 | await skipIfPremiumGated(request, '/voters/'); 95 | await page.goto('/voters/'); 96 | await page.fill('#entity-search-input', 'john smith austin'); 97 | await page.locator('#entity-search-form button[type="submit"]').click(); 98 | const results = page.locator('.entity-search-result'); 99 | await expect(results.first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); > 100 | await expect(results.filter({ hasText: /SMITH, JOHN/ }).first()).toContainText(/Austin, TX/i); | ^ Error: expect(locator).toContainText(expected) failed 101 | }); 102 | 103 | test('state filter narrows the list and scopes the county and district dropdowns', async ({ page, request }) => { 104 | await skipIfPremiumGated(request, '/voters/'); 105 | await page.goto('/voters/'); 106 | await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 107 | await expect(page.locator('.entity-filter-control[data-key="county"]')).toBeHidden(); 108 | await page.selectOption('#entity-filter-state', 'FL'); 109 | await expect(page.locator('.entity-search-result').first()).toContainText(', FL', { timeout: DATA_LOAD_TIMEOUT }); 110 | await expect(page).toHaveURL(/[?&]f_state=FL/); 111 | await expect(page.locator('#entity-filter-county option', { hasText: /Miami-Dade \([\d,]+\)/ })).toHaveCount(1, { timeout: DATA_LOAD_TIMEOUT }); 112 | await expect(page.locator('#entity-filter-cd option', { hasText: 'FL-27' })).toHaveCount(1); 113 | }); 114 | 115 | test('filters combine, count matches and survive a reload', async ({ page, request }) => { 116 | await skipIfPremiumGated(request, '/voters/'); 117 | await page.goto('/voters/?f_state=FL&f_county=MIAMI-DADE&f_age=65-74&f_party=DEM'); 118 | const results = page.locator('.entity-search-result'); 119 | await expect(results.first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 120 | await expect(results.first()).toContainText('Democratic (DEM)'); 121 | await expect(results.first()).toContainText(/Age (6[5-9]|7[0-4])\b/); 122 | await expect(page.locator('#entity-results-count')).toHaveText(/^[\d,]+ match(es)?$/); 123 | await expect(page.locator('#entity-results-title')).toContainText('Miami-Dade'); 124 | await expect(page.locator('#entity-filter-county')).toHaveValue('MIAMI-DADE', { timeout: DATA_LOAD_TIMEOUT }); 125 | 126 | await page.locator('#entity-filter-reset').click(); 127 | await expect(page).not.toHaveURL(/f_state=/); 128 | await expect(page.locator('.entity-filter-control[data-key="county"]')).toBeHidden(); 129 | }); 130 | 131 | test('race and Civitech score filters (persuadable, high-turnout Latinx voters in Miami-Dade)', async ({ page, request }) => { 132 | await skipIfPremiumGated(request, '/voters/'); 133 | await page.goto('/voters/?f_state=FL&f_county=MIAMI-DADE&f_race=LATINX&f_support_dem=tossup&f_turnout_pres=high'); 134 | await expect(page.locator('.entity-search-result').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 135 | await expect(page.locator('#entity-results-count')).toHaveText(/^[\d,]+ match(es)?$/); 136 | await expect(page.locator('#entity-results-title')).toContainText('Latinx'); 137 | await expect(page.locator('#entity-filter-support_dem')).toHaveValue('tossup'); 138 | }); 139 | 140 | test('every Districts row links; legislative districts open the filtered voters list', async ({ page, request }) => { 141 | await skipIfPremiumGated(request, '/voters/'); 142 | // A Rochester, NY voter with all four district codes and a precinct. 143 | await page.goto('/voters/0c13135d-8e3d-3aa4-1077-28a81eb5d10f/'); 144 | const districts = page.locator('section#districts'); 145 | await expect(districts.locator('a').first()).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 146 | const hrefs = await districts.locator('a').evaluateAll(as => as.map(a => a.getAttribute('href'))); 147 | expect(hrefs).toEqual(expect.arrayContaining([ 148 | '/districts/ny-25/', 149 | '/voters/?f_state=NY&f_cd=NY-25', 150 | '/voters/?f_state=NY&f_senate=NY-055', 151 | '/voters/?f_state=NY&f_house=NY-138', 152 | '/voters/?f_state=NY&f_precinct=36055Rochester_Ward_24_ED_6', 153 | ])); 154 | await expect(districts.locator('dd')).toHaveCount(4); 155 | expect(await districts.locator('dd:not(:has(a))').count()).toBe(0); 156 | 157 | // Location: state, place, ZIP and county pages (graph ids from the public API) plus the filtered voters list. 158 | const location = page.locator('section#location'); 159 | await expect(location.locator('a[href^="/places/"]')).toHaveText('Rochester city', { timeout: DATA_LOAD_TIMEOUT }); 160 | const locationHrefs = await location.locator('a').evaluateAll(as => as.map(a => a.getAttribute('href'))); 161 | expect(locationHrefs).toEqual([ 162 | '/states/ny/', '/voters/?f_state=NY', 163 | expect.stringMatching(/^\/places\/[0-9a-f-]+\/$/), '/voters/?f_state=NY&f_city=ROCHESTER', 164 | expect.stringMatching(/^\/postalcodes\/[0-9a-f-]+\/$/), '/voters/?f_state=NY&f_zip=14620', 165 | expect.stringMatching(/^\/counties\/[0-9a-f-]+\/$/), '/voters/?f_state=NY&f_county=MONROE', 166 | ]); 167 | await expect(location.locator('a[href^="/counties/"]')).toHaveText('Monroe County'); 168 | await expect(page.locator('section#overview a')).toHaveCount(0); 169 | 170 | await districts.locator('a', { hasText: 'NY-055' }).click(); 171 | await expect(page).toHaveURL(/\/voters\/\?f_state=NY&f_senate=NY-055$/); 172 | await expect(page.locator('.entity-search-result').first()).toContainText(', NY', { timeout: DATA_LOAD_TIMEOUT }); 173 | await expect(page.locator('#entity-filter-senate')).toHaveValue('NY-055', { timeout: DATA_LOAD_TIMEOUT }); 174 | }); 175 | 176 | test('an unknown voter id renders Not Found', async ({ page, request }) => { 177 | await skipIfPremiumGated(request, '/voters/'); 178 | await page.goto('/voters/00000000-0000-0000-0000-000000000000/'); 179 | await expect(page.locator('.leaf-detail-page h1')).toHaveText(/Voter Not Found/, { timeout: DATA_LOAD_TIMEOUT }); 180 | }); 181 | }); 182 | 183 | test.describe('voter Location card (mocked)', () => { 184 | test.beforeEach(async ({ request }) => { 185 | await skipIfPremiumGated(request, '/voters/'); 186 | }); 187 | 188 | const voter = { 189 | id: 'v-loc', name_last: 'MOLLICA', name_first: 'CAROL', state: 'MA', addr_state: 'MA', 190 | city: 'WRENTHAM', zip: '02093', county: 'NORFOLK', congressional_district: 'MA-04', 191 | state_senate_district: 'MA-D14', state_house_district: 'MA-104', precinct: '25021823150003', 192 | }; 193 | 194 | test('State, Place, Postal code and County link their pages plus the filtered voters list; Overview and Districts drop them', async ({ page }) => { 195 | const lookups: string[] = []; 196 | await page.route('**/api/graphql', async route => { 197 | const body = route.request().postData() || ''; 198 | if (route.request().url().includes('/voters/api/graphql')) { 199 | return route.fulfill({ json: { data: { voter } } }); 200 | } ```