# 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/identity-bar.spec.ts >> identity bar (sites#355) >> Registered with nothing extra offers Request additional access - Location: tests/ui/identity-bar.spec.ts:148:7 # Error details ``` Error: expect(locator).toHaveText(expected) failed Locator: locator('#ei-access-pop').locator('.ei-access-pop__note') Expected: "No additional access yet." Timeout: 5000ms Error: element(s) not found Call log: - Expect "toHaveText" locator('#ei-access-pop').locator('.ei-access-pop__note') with timeout 5000ms - waiting for locator('#ei-access-pop').locator('.ei-access-pop__note') ``` ```yaml - banner: - heading "US Elections" [level=1] - paragraph: Election Data Explorer - text: jane@example.org Registered - button "Request additional access" - link "Log out": - /url: /outpost.goauthentik.io/sign_out - toolbar "Member tools": - button "Save search" - 'button "Export CSV (Needs Individual donors access: request it)" [disabled]': Export CSV - button "All cycles" - button "Graph" - text: Electoral - link "🏛️ 290 Parties Political affiliations": - /url: /parties/ - link "🎖️ 743 Offices Federal positions": - /url: /offices/ - link "👤 57,500 Politicians Candidates & office holders": - /url: /politicians/ - text: 🗳️ 196,257,874 Voters Registered voter records Financial - link "💼 89,861 Committees": - /url: /committees/ - link "🏢 1,372,957 Vendors": - /url: /vendors/ - link "🏭 5,717,106 Employers": - /url: /employers/ - text: 🧑 32,826,724 Individual Donors Geography - link "🗺️ 52 States": - /url: /states/ - link "📍 7,272 Districts": - /url: /districts/ - link "🗂️ 3,222 Counties": - /url: /counties/ - link "🏘️ 32,114 Places": - /url: /places/ - link "📮 33,791 Postal Codes": - /url: /postalcodes/ - link "📐 85,382 Census Tracts": - /url: /tracts/ - link "🗳️ 163,242 Precincts": - /url: /precincts/ - text: 🧱 8,126,956 Census Blocks Other - link "🗳️ 24 Elections": - /url: /elections/ - link "📊 61 Data Sources": - /url: /datasources/ - contentinfo: - link "elect.info": - /url: https://www.elect.info - text: "|" - link "Trust Center": - /url: https://trust.elect.info - text: "|" - link "Privacy Policy": - /url: https://trust.elect.info/#privacy-policy - text: "|" - link "Terms of Use": - /url: https://trust.elect.info/#terms ``` # Test source ```ts 53 | expect(bar.x + bar.width - (controls.x + controls.width), 'controls right-justified').toBeLessThan(16); 54 | expect(controls.x >= identity.x + identity.width, 'controls after the identity').toBe(true); 55 | expect(logout.x + logout.width <= controls.x, 'account actions end before the controls').toBe(true); 56 | for (const id of ['save', 'export']) { 57 | const c = await box(`#auth-slot [data-control="${id}"]`); 58 | expect(c.x >= controls.x - 1 && c.x + c.width <= controls.x + controls.width + 1, `${id} fully visible`).toBe(true); 59 | } 60 | expect(await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth)).toBeLessThanOrEqual(0); 61 | }); 62 | } 63 | 64 | for (const width of [1280, 390, 320]) { 65 | test(`signed out at ${width}px: Log in and Create an account are buttons in one row`, async ({ page }) => { 66 | await page.setViewportSize({ width, height: 800 }); 67 | await open(page, ''); 68 | const login = page.locator('#auth-slot a.auth-link'); 69 | const register = page.locator('#auth-slot a.ei-identity__register'); 70 | await expect(login).toHaveText('Log in'); 71 | await expect(register).toBeVisible(); 72 | await expect(register).toHaveClass(/ei-identity__action/); 73 | await expect(register).toHaveText(width <= 480 ? 'Sign up' : 'Create an account', { useInnerText: true }); 74 | const [l, r, c, bar] = await Promise.all([login.boundingBox(), register.boundingBox(), page.locator('#auth-slot .ei-bar__controls').boundingBox(), page.locator('#auth-slot').boundingBox()]); 75 | expect(Math.abs(l!.height - r!.height), 'same height as Log in').toBeLessThanOrEqual(1); 76 | expect(r!.x + r!.width <= c!.x, 'before the controls').toBe(true); 77 | expect(bar!.height, 'a single row').toBeLessThan(56); 78 | }); 79 | } 80 | 81 | test('signed out: controls are shown locked and only offer sign-in', async ({ page }) => { 82 | await open(page, ''); 83 | const save = page.locator('#auth-slot [data-control="save"]'); 84 | await expect(page.locator('#auth-slot .ei-bar__controls')).toBeVisible(); 85 | await expect(save).toBeVisible(); 86 | await expect(save).toHaveAttribute('aria-disabled', 'true'); 87 | await expect(save).toHaveClass(/ei-control--locked/); 88 | await expect(page.locator('#auth-slot a.auth-link')).toHaveText('Log in'); 89 | await save.click({ force: true }); 90 | const panel = page.locator('dialog#ei-signin'); 91 | await expect(panel).toBeVisible(); 92 | await expect(panel.locator('h2')).toHaveText('Sign in to use Save search'); 93 | expect(await activated(page)).toEqual([]); 94 | }); 95 | 96 | test('signed in: member controls work; area controls stay locked and offer Request access', async ({ page }) => { 97 | await open(page, 'jane@example.org'); 98 | const save = page.locator('#auth-slot [data-control="save"]'); 99 | await expect(save).not.toHaveAttribute('aria-disabled', 'true'); 100 | await save.click(); 101 | expect(await activated(page)).toEqual(['save:jane@example.org']); 102 | 103 | const exp = page.locator('#auth-slot [data-control="export"]'); 104 | await expect(exp).toHaveAttribute('aria-disabled', 'true'); 105 | await exp.click({ force: true }); 106 | const form = page.locator('dialog#ei-request'); 107 | await expect(form).toBeVisible(); 108 | await expect(form.locator('input[name="requested"][value="individuals"]')).toBeChecked(); 109 | expect(await activated(page)).toEqual(['save:jane@example.org']); 110 | }); 111 | 112 | test('entitled: the area control works', async ({ page }) => { 113 | await open(page, 'jane@example.org', { individuals: true }); 114 | await page.locator('#auth-slot [data-control="export"]').click(); 115 | expect(await activated(page)).toEqual(['export']); 116 | }); 117 | 118 | test('entitlements open from Registered and never push the controls off the bar', async ({ page }) => { 119 | await page.setViewportSize({ width: 1280, height: 800 }); 120 | await open(page, 'jane.reporter@example.org', { voters: true, individuals: true, blocks: true, curator: true, preview: true }); 121 | const chips = page.locator('#auth-slot .ei-chip'); 122 | await expect(chips).toHaveCount(1); 123 | await expect(chips).toHaveText('Registered'); 124 | const controls = (await page.locator('#auth-slot .ei-bar__controls').boundingBox())!; 125 | for (const id of ['save', 'export']) { 126 | const c = (await page.locator(`#auth-slot [data-control="${id}"]`).boundingBox())!; 127 | expect(c.x >= controls.x - 1 && c.x + c.width <= controls.x + controls.width + 1, `${id} fully visible`).toBe(true); 128 | expect(c.x + c.width <= 1280, `${id} inside the viewport`).toBe(true); 129 | } 130 | 131 | const pop = page.locator('#ei-access-pop'); 132 | await expect(pop).toHaveCount(0); 133 | await chips.click(); 134 | await expect(chips).toHaveAttribute('aria-expanded', 'true'); 135 | await expect(pop).toBeVisible(); 136 | await expect(pop.locator('.ei-access-pop__item--granted')).toHaveText(['Voters', 'Individual donors', 'Census blocks', 'News curation', 'Preview sites']); 137 | await page.keyboard.press('Escape'); 138 | await expect(pop).toHaveCount(0); 139 | await expect(chips).toHaveAttribute('aria-expanded', 'false'); 140 | await expect(chips).toBeFocused(); 141 | 142 | await chips.click(); 143 | await expect(pop).toBeVisible(); 144 | await page.mouse.click(5, 790); 145 | await expect(pop).toHaveCount(0); 146 | }); 147 | 148 | test('Registered with nothing extra offers Request additional access', async ({ page }) => { 149 | await page.setViewportSize({ width: 1280, height: 800 }); 150 | await open(page, 'jane@example.org'); 151 | await page.locator('#auth-slot .ei-chip').click(); 152 | const pop = page.locator('#ei-access-pop'); > 153 | await expect(pop.locator('.ei-access-pop__note')).toHaveText('No additional access yet.'); | ^ Error: expect(locator).toHaveText(expected) failed 154 | await pop.locator('.ei-access-pop__request').click(); 155 | await expect(pop).toHaveCount(0); 156 | await expect(page.locator('dialog#ei-request')).toBeVisible(); 157 | }); 158 | 159 | test('controls registered after the bar rendered appear', async ({ page }) => { 160 | // us.elect.info always registers the cycle facet (sites#194), so the toolbar is never empty here. 161 | await open(page, 'jane@example.org', {}, false); 162 | await expect(page.locator('#auth-slot [data-control="cycle"]')).toBeVisible(); 163 | await page.evaluate(() => { 164 | (window as unknown as { electinfoBarControls: { push: (c: object) => void } }).electinfoBarControls.push({ id: 'late', label: 'Alerts' }); 165 | }); 166 | await expect(page.locator('#auth-slot [data-control="late"]')).toBeVisible(); 167 | }); 168 | }); 169 | ```