# 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/routing.spec.ts >> routing: every index link resolves >> /employers/ first-page links all answer 200 or 301 - Location: tests/ui/routing.spec.ts:73:9 # Error details ``` Error: /employers/ should list results expect(locator).toBeVisible() failed Locator: locator('.entity-search-result').first() Expected: visible Timeout: 15000ms Error: element(s) not found Call log: - /employers/ should list results locator('.entity-search-result').first() with timeout 15000ms - waiting for locator('.entity-search-result').first() ``` ```yaml - link "← Back to Home": - /url: / - banner: - heading "Employers" [level=1] - paragraph: Organizations with contributing employees - textbox "Search employers by name..." - button "Search" - heading "All Employers" [level=3] - paragraph: "Failed to load: 400" - main ``` # Test source ```ts 1 | import { test, expect, APIRequestContext } from '@playwright/test'; 2 | import { canonicalPath, getRandomItems, toRelativePath } from './helpers'; 3 | 4 | /* 5 | * Routing coverage across every collection (electinfo/rundeck#700, ops#514). 6 | * 7 | * What slipped past the existing specs: 8 | * - the preview nginx lacked the /politicians/ -> /candidates/ rewrite the 9 | * production config has (sites#162) -- only 3 random index links were followed; 10 | * - unknown paths fall through to the Payload slug lookup, which answers 11 | * 400/500 instead of 404. 12 | */ 13 | 14 | const ALIASES = process.env.EXPECT_ALIASES === '1'; 15 | 16 | /** Collections whose sitemap lists canonical URLs (rundeck PagePaths Sitemaps + CyclePages). */ 17 | const SITEMAP_COLLECTIONS = ['candidates', 'committees', 'parties', 'offices', 'districts', 'states', 'elections']; 18 | 19 | /** Indexes whose first results page lists entity links (.entity-search-result). */ 20 | // (/states/ lists map chips and /districts/ lists .district-result behind a state 21 | // filter; their sitemap tests cover them) 22 | const LINKED_INDEXES = ['/candidates/', '/committees/', '/parties/', '/offices/', '/elections/', '/employers/', '/vendors/']; 23 | 24 | const locs = (xml: string) => [...xml.matchAll(/([^<]+)<\/loc>/g)].map(m => m[1]); 25 | 26 | /** Canonical page URLs from a collection's sitemap, following one level of sitemap index. */ 27 | async function sitemapLocs(request: APIRequestContext, collection: string): Promise { 28 | const path = `/${collection}/sitemap-${collection}.xml`; 29 | const res = await request.get(path); 30 | expect(res.status(), `${path} should answer 200`).toBe(200); 31 | const xml = await res.text(); 32 | if (!xml.includes(' { 41 | test.skip(!ALIASES, 'Set EXPECT_ALIASES=1 against a target with published page paths'); 42 | 43 | for (const collection of SITEMAP_COLLECTIONS) { 44 | test(`${collection}: sitemap URLs serve their page with rel=canonical = the sitemap URL`, async ({ request }) => { 45 | // Entity pages only: a sitemap may also list the collection's index (/elections/) 46 | const entityLocs = (await sitemapLocs(request, collection)).filter(l => toRelativePath(l) !== `/${collection}/`); 47 | const sample = getRandomItems(entityLocs, 3); 48 | expect(sample.length, `${collection} sitemap should list URLs`).toBeGreaterThan(0); 49 | for (const loc of sample) { 50 | const path = toRelativePath(loc); 51 | const res = await request.get(path, { maxRedirects: 0 }); 52 | expect(res.status(), `${path} (from the ${collection} sitemap) should answer 200`).toBe(200); 53 | expect(canonicalPath(await res.text()), `${path} rel=canonical`).toBe(path); 54 | } 55 | }); 56 | } 57 | 58 | 59 | test('party badge links by FEC code redirect to the party page', async ({ request }) => { 60 | // us.elect.news links parties as /parties// (sites#164) 61 | for (const code of ['rep', 'dem']) { 62 | const res = await request.get(`/parties/${code}/`, { maxRedirects: 0 }); 63 | expect(res.status(), `/parties/${code}/ should redirect permanently`).toBe(301); 64 | const target = res.headers()['location'] ?? ''; 65 | const page = await request.get(target, { maxRedirects: 0 }); 66 | expect(page.status(), `/parties/${code}/ -> ${target} should answer 200`).toBe(200); 67 | } 68 | }); 69 | }); 70 | 71 | test.describe('routing: every index link resolves', () => { 72 | for (const index of LINKED_INDEXES) { 73 | test(`${index} first-page links all answer 200 or 301`, async ({ page, request }) => { 74 | test.setTimeout(120000); 75 | const res = await page.goto(index); 76 | expect(res?.status(), `${index} should answer 200`).toBe(200); > 77 | await expect(page.locator('.entity-search-result').first(), `${index} should list results`).toBeVisible({ timeout: 15000 }); | ^ Error: /employers/ should list results 78 | const hrefs = (await page.locator('.entity-search-result').evaluateAll(els => els.map(e => e.getAttribute('href')))) 79 | .filter((h): h is string => !!h) 80 | .map(toRelativePath); 81 | const broken: string[] = []; 82 | for (const href of [...new Set(hrefs)]) { 83 | const r = await request.get(href, { maxRedirects: 0 }); 84 | if (r.status() !== 200 && r.status() !== 301) broken.push(`${href} -> ${r.status()}`); 85 | } 86 | expect(broken, `${index} links that do not resolve`).toEqual([]); 87 | }); 88 | } 89 | }); 90 | 91 | test.describe('routing: unknown addresses', () => { 92 | test('an unknown entity path answers 404', async ({ request }) => { 93 | // A miss in /_resolve (or the API being unavailable) ends in nginx's own 94 | // 404. It used to fall through to Payload's slug-lookup, which answered 95 | // 400/500 (electinfo/sites#218). Only the alias-routed collections apply: 96 | // leaf collections are covered below. 97 | for (const path of ['/candidates/no-such-entity-zz/', '/committees/no-such-entity-zz/']) { 98 | const res = await request.get(path, { maxRedirects: 0 }); 99 | expect(res.status(), `${path} should answer 404`).toBe(404); 100 | } 101 | }); 102 | 103 | test('an unknown leaf entity path serves the collection shell', async ({ request }) => { 104 | // Leaf collections (individuals, employers, vendors, blocks, precincts, 105 | // tracts) render client-side from the baked collection shell (sites#209), 106 | // so nginx answers every subpath with that shell and the runtime reports 107 | // a missing entity itself. There is no server-side 404 to expect here. 108 | for (const col of ['individuals', 'employers', 'vendors', 'blocks', 'precincts', 'tracts']) { 109 | const res = await request.get(`/${col}/no-such-entity-zz/`, { maxRedirects: 0 }); 110 | expect(res.status(), `/${col}/no-such-entity-zz/ should serve the shell`).toBe(200); 111 | expect(res.headers()['content-type'] ?? '', `/${col}/ shell is HTML`).toContain('text/html'); 112 | } 113 | }); 114 | }); 115 | ```