# 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/postalcodes.spec.ts >> ZIP code pages >> 78701 lists TX-37 and Travis County, linked - Location: tests/ui/postalcodes.spec.ts:95:7 # Error details ``` Error: /postalcodes/78701/ should answer 200 expect(received).toBe(expected) // Object.is equality Expected: 200 Received: 503 ``` # Page snapshot ```yaml - generic [active] [ref=e1]: - heading "503 Service Temporarily Unavailable" [level=1] [ref=e3] - separator [ref=e4] - generic [ref=e5]: nginx/1.31.7 ``` # Test source ```ts 1 | import { test, expect, type APIRequestContext } from '@playwright/test'; 2 | import { gql, visitorHeaders } from './helpers'; 3 | 4 | // ZIP codes from the OVERLAPS edges (electinfo/sites#284, rundeck#789): a ZCTA overlaps up to four 5 | // congressional districts and several counties, with overlap areas. Checked through the API and on the 6 | // ZIP pages, the us-pages renderer's (/postalcodes//) and the client list (/postalcodes/?q=). 7 | // Skipped where the API or the pages predate them (production until its release and graph swap). 8 | 9 | const DATA_LOAD_TIMEOUT = 20_000; 10 | 11 | async function apiHasOverlaps(request: APIRequestContext): Promise { 12 | const res = await request.post('/api/graphql', { 13 | data: { query: '{ __type(name: "PostalCode") { fields { name } } }' }, 14 | headers: visitorHeaders(), 15 | }); 16 | if (res.status() !== 200) return false; 17 | const body = await res.json() as { data?: { __type?: { fields?: Array<{ name: string }> } | null } }; 18 | return !!body.data?.__type?.fields?.some(f => f.name === 'overlapsCounties'); 19 | } 20 | 21 | interface Overlap { 22 | node: N; 23 | properties: { overlap_land_area: string | null; overlap_water_area: string | null }; 24 | } 25 | 26 | interface ZipOverlaps { 27 | postalCodes: Array<{ 28 | zip_code: string; 29 | overlapsDistrictsConnection: { edges: Array> }; 30 | overlapsCountiesConnection: { edges: Array> }; 31 | }>; 32 | } 33 | 34 | const ZIP_OVERLAPS = `query($zip: String!) { postalCodes(where: { zip_code: { eq: $zip } }) { zip_code 35 | overlapsDistrictsConnection { edges { node { state district_number } properties { overlap_land_area overlap_water_area } } } 36 | overlapsCountiesConnection { edges { node { name state } properties { overlap_land_area overlap_water_area } } } } }`; 37 | 38 | test.describe('ZIP code overlaps (API)', () => { 39 | test.beforeEach(async ({ request }) => { 40 | test.skip(!(await apiHasOverlaps(request)), 'the API behind this host has no PostalCode OVERLAPS yet'); 41 | }); 42 | 43 | test('78701 overlaps TX-37 and Travis County, with land area', async ({ request }) => { 44 | const { postalCodes } = await gql(request, ZIP_OVERLAPS, { zip: '78701' }); 45 | expect(postalCodes).toHaveLength(1); 46 | const districts = postalCodes[0].overlapsDistrictsConnection.edges; 47 | expect(districts.map(e => `${e.node.state}-${e.node.district_number}`)).toEqual(['TX-37']); 48 | expect(Number(districts[0].properties.overlap_land_area)).toBeGreaterThan(0); 49 | const counties = postalCodes[0].overlapsCountiesConnection.edges; 50 | expect(counties.map(e => `${e.node.name}, ${e.node.state}`)).toEqual(['Travis County, TX']); 51 | expect(Number(counties[0].properties.overlap_land_area)).toBeGreaterThan(0); 52 | }); 53 | 54 | test('a ZIP split across districts and counties: 02467 (Chestnut Hill, MA)', async ({ request }) => { 55 | const { postalCodes } = await gql(request, ZIP_OVERLAPS, { zip: '02467' }); 56 | const districts = postalCodes[0].overlapsDistrictsConnection.edges.map(e => `${e.node.state}-${e.node.district_number}`); 57 | expect(districts.sort()).toEqual(['MA-04', 'MA-07', 'MA-08']); 58 | expect(postalCodes[0].overlapsCountiesConnection.edges.length).toBe(3); 59 | }); 60 | 61 | test('the edges read both ways: TX-37 and Travis County list 78701', async ({ request }) => { 62 | const data = await gql<{ 63 | districts: Array<{ postalCodesOverlaps: Array<{ zip_code: string }> }>; 64 | counties: Array<{ postalCodesOverlaps: Array<{ zip_code: string }> }>; 65 | }>(request, `{ 66 | districts(where: { state: { eq: "TX" }, district_number: { eq: "37" } }) { postalCodesOverlaps(where: { zip_code: { eq: "78701" } }) { zip_code } } 67 | counties(where: { state: { eq: "TX" }, name: { eq: "Travis County" } }) { postalCodesOverlaps(where: { zip_code: { eq: "78701" } }) { zip_code } } 68 | }`); 69 | expect(data.districts[0]?.postalCodesOverlaps.map(z => z.zip_code)).toEqual(['78701']); 70 | expect(data.counties[0]?.postalCodesOverlaps.map(z => z.zip_code)).toEqual(['78701']); 71 | }); 72 | 73 | test('almost every ZIP has a county', async ({ request }) => { 74 | // Known gaps (2026-10-14): Connecticut's ZIPs map to its pre-2022 counties, which the graph replaced with 75 | // planning regions, and the territories have no County nodes: 305 of 33,791. More than that is a regression. 76 | const data = await gql<{ all: { totalCount: number }; none: { totalCount: number } }>(request, `{ 77 | all: postalCodesConnection { totalCount } 78 | none: postalCodesConnection(where: { overlapsCountiesAggregate: { count: { eq: 0 } } }) { totalCount } 79 | }`); 80 | test.info().annotations.push({ type: 'ZIPs without a county', description: `${data.none.totalCount} of ${data.all.totalCount}` }); 81 | expect(data.all.totalCount).toBeGreaterThan(30_000); 82 | expect(data.none.totalCount).toBeLessThanOrEqual(310); 83 | }); 84 | }); 85 | 86 | test.describe('ZIP code pages', () => { 87 | // The us-pages renderer marks its pages with x-graph-build; static pages predate the OVERLAPS edges. 88 | async function rendered(page: import('@playwright/test').Page, path: string) { 89 | const response = await page.goto(path); > 90 | expect(response?.status(), `${path} should answer 200`).toBe(200); | ^ Error: /postalcodes/78701/ should answer 200 91 | test.skip(!response?.headers()['x-graph-build'], 'this host serves static ZIP pages, not the us-pages renderer'); 92 | return response; 93 | } 94 | 95 | test('78701 lists TX-37 and Travis County, linked', async ({ page }) => { 96 | await rendered(page, '/postalcodes/78701/'); 97 | await expect(page.locator('h1')).toHaveText('ZIP Code 78701'); 98 | const district = page.locator('#districts a', { hasText: 'Texas District 37' }); 99 | await expect(district).toHaveAttribute('href', /\/districts\/tx-37\/$/); 100 | await expect(page.locator('#districts li')).toHaveCount(1); 101 | await expect(page.locator('#counties a', { hasText: 'Travis County' })).toHaveCount(1); 102 | }); 103 | 104 | test('02467 lists three districts, largest overlap first, and three counties', async ({ page }) => { 105 | await rendered(page, '/postalcodes/02467/'); 106 | const items = page.locator('#districts li'); 107 | await expect(items).toHaveCount(3); 108 | await expect(items.first()).toContainText('Massachusetts District 04'); 109 | await expect(page.locator('#districts .meta').last()).toHaveText('Showing 3 of 3 overlapping districts'); 110 | await expect(page.locator('#counties li')).toHaveCount(3); 111 | }); 112 | 113 | test('the water-only "ZZ" district is not listed: 60611 (Chicago, on Lake Michigan)', async ({ page }) => { 114 | await rendered(page, '/postalcodes/60611/'); 115 | await expect(page.locator('#districts li').first()).toContainText('Illinois District'); 116 | await expect(page.locator('#districts')).not.toContainText('ZZ'); 117 | await expect(page.locator('#counties a', { hasText: 'Cook County' })).toHaveCount(1); 118 | }); 119 | 120 | test('the ZIP list shows each ZIP with its districts', async ({ page, request }) => { 121 | test.skip(!(await apiHasOverlaps(request)), 'the API behind this host has no PostalCode OVERLAPS yet'); 122 | // The index opens on the map; the list view (postalcode-index.js) loads on its toggle and reads ?q=. 123 | const listView = async (q: string) => { 124 | await page.goto(`/postalcodes/?q=${q}`); 125 | await page.locator('.toggle-btn[data-view="list"]').click(); 126 | }; 127 | await listView('78701'); 128 | const result = page.locator('.postal-result', { hasText: '78701' }).first(); 129 | await expect(result).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 130 | await expect(result.locator('.postal-result-meta')).toContainText('TX-37'); 131 | 132 | await listView('60611'); 133 | const chicago = page.locator('.postal-result', { hasText: '60611' }).first(); 134 | await expect(chicago).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 135 | await expect(chicago.locator('.postal-result-meta')).toContainText('IL-'); 136 | await expect(chicago.locator('.postal-result-meta')).not.toContainText('ZZ'); 137 | }); 138 | }); 139 | ```