# 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/auth.spec.ts >> sign-in and premium sections >> the premium notice page is not directly reachable
- Location: tests/ui/auth.spec.ts:86:7

# Error details

```
Test timeout of 30000ms exceeded.
```

```
Error: page.goto: net::ERR_ABORTED; maybe frame was detached?
Call log:
  - navigating to "http://10.1.105.75/premium-required.html", waiting until "load"

```

# Test source

```ts
  1   | import { test, expect } from '@playwright/test';
  2   | 
  3   | // Sign-in and premium sections (electinfo/sites#270). /auth/whoami reports
  4   | // whether Authentik is on for the host under test:
  5   | //   - CI test pods: enabled "false" (no Traefik in front), so nothing is gated
  6   | //     and the homepage keeps its premium cards greyed out;
  7   | //   - preview.elect.info front door: enabled "true", signed in as the
  8   | //     preview-e2e service account (preview-e2e@elect.info, so elevated).
  9   | const PREMIUM = [
  10  |   { path: '/voters/', label: 'Voters' },
  11  |   { path: '/individuals/', label: 'Individual Donors' },
  12  |   { path: '/blocks/', label: 'Census Blocks' },
  13  | ];
  14  | 
  15  | interface WhoAmI {
  16  |   enabled: string;
  17  |   email: string;
  18  |   elevated: boolean;
  19  |   entitlements: { voters: boolean; individuals: boolean; blocks: boolean; curator: boolean };
  20  | }
  21  | 
  22  | async function whoami(request: import('@playwright/test').APIRequestContext): Promise<WhoAmI> {
  23  |   const res = await request.get('/auth/whoami', { maxRedirects: 0 });
  24  |   expect(res.status(), '/auth/whoami answers 200').toBe(200);
  25  |   expect(res.headers()['cache-control']).toContain('no-store');
  26  |   return (await res.json()) as WhoAmI;
  27  | }
  28  | 
  29  | test.describe('sign-in and premium sections', () => {
  30  |   test('/auth/whoami returns well-formed JSON', async ({ request }) => {
  31  |     const me = await whoami(request);
  32  |     expect(['true', 'false']).toContain(me.enabled);
  33  |     expect(typeof me.email).toBe('string');
  34  |     expect(typeof me.elevated).toBe('boolean');
  35  |     // Per-section entitlements (sites#305), always all four booleans.
  36  |     expect(Object.keys(me.entitlements).sort()).toEqual(['blocks', 'curator', 'individuals', 'voters']);
  37  |     for (const v of Object.values(me.entitlements)) expect(typeof v).toBe('boolean');
  38  |     expect(me.elevated).toBe(me.entitlements.voters || me.entitlements.individuals || me.entitlements.blocks);
  39  |     if (me.enabled === 'false') {
  40  |       expect(me.email).toBe('');
  41  |       expect(me.elevated).toBe(false);
  42  |       expect(Object.values(me.entitlements).some(Boolean)).toBe(false);
  43  |     }
  44  |   });
  45  | 
  46  |   test('a forged identity header grants nothing where Authentik is off', async ({ request }) => {
  47  |     const res = await request.get('/auth/whoami', {
  48  |       headers: { 'X-authentik-email': 'someone@elect.info' },
  49  |     });
  50  |     const me = (await res.json()) as WhoAmI;
  51  |     test.skip(me.enabled === 'true', 'host has Authentik: Traefik sets the header');
  52  |     expect(me.email).toBe('');
  53  |     expect(me.elevated).toBe(false);
  54  |   });
  55  | 
  56  |   for (const group of ['elect-info-premium', 'ei-voter-viewers', 'ei-donor-viewers', 'ei-block-viewers', 'elect-news-curators']) {
  57  |     test(`a forged ${group} group header grants nothing where Authentik is off`, async ({ request }) => {
  58  |       const res = await request.get('/auth/whoami', {
  59  |         headers: { 'X-authentik-email': 'someone@example.com', 'X-authentik-groups': group },
  60  |       });
  61  |       const me = (await res.json()) as WhoAmI;
  62  |       test.skip(me.enabled === 'true', 'host has Authentik: Traefik sets the headers');
  63  |       expect(me.email).toBe('');
  64  |       expect(me.elevated).toBe(false);
  65  |       expect(Object.values(me.entitlements).some(Boolean)).toBe(false);
  66  |     });
  67  |   }
  68  | 
  69  |   for (const { path } of PREMIUM) {
  70  |     test(`${path} answers 200 for the test identity`, async ({ page, request }) => {
  71  |       const me = await whoami(request);
  72  |       test.skip(me.enabled === 'true' && !me.elevated, 'signed in without elevated access');
  73  |       const response = await page.goto(path);
  74  |       expect(response?.status()).toBe(200);
  75  |     });
  76  |   }
  77  | 
  78  |   // The placeholder became the voter search page (sites#277, tests/voters.spec.ts).
  79  |   test('/voters/ is the voter search page', async ({ page }) => {
  80  |     await page.goto('/voters/');
  81  |     await expect(page.locator('h1')).toHaveText('Voters');
  82  |     await expect(page.locator('script[src="/js/voter-index.js"]')).toHaveCount(1);
  83  |     await expect(page.locator('.coming-soon')).toHaveCount(0);
  84  |   });
  85  | 
  86  |   test('the premium notice page is not directly reachable', async ({ page }) => {
> 87  |     const response = await page.goto('/premium-required.html');
      |                                 ^ Error: page.goto: net::ERR_ABORTED; maybe frame was detached?
  88  |     expect(response?.status()).toBe(404);
  89  |   });
  90  | 
  91  |   test('homepage premium cards follow the account', async ({ page, request }) => {
  92  |     const me = await whoami(request);
  93  |     await page.goto('/');
  94  |     for (const { path, label } of PREMIUM) {
  95  |       const card = page.locator(`[data-premium-href="${path}"]`);
  96  |       await expect(card).toHaveCount(1);
  97  |       await expect(card).toContainText(label);
  98  |       const area = path.replace(/\//g, '') as 'voters' | 'individuals' | 'blocks';
  99  |       if (me.enabled === 'true' && me.entitlements[area]) {
  100 |         await expect(page.locator(`a[data-premium-href="${path}"]`)).toHaveAttribute('href', path);
  101 |         await expect(card).not.toHaveClass(/entity-card--disabled/);
  102 |       } else {
  103 |         await expect(card).toHaveClass(/entity-card--disabled/);
  104 |         await expect(page.locator(`a[data-premium-href="${path}"]`)).toHaveCount(0);
  105 |       }
  106 |     }
  107 |   });
  108 | 
  109 |   test('account slot shows the signed-in email where Authentik is on', async ({ page, request }) => {
  110 |     const me = await whoami(request);
  111 |     await page.goto('/');
  112 |     const slot = page.locator('#auth-slot');
  113 |     if (me.enabled !== 'true') {
  114 |       await expect(slot).toBeEmpty();
  115 |       return;
  116 |     }
  117 |     if (me.email) {
  118 |       await expect(slot.locator('.auth-email')).toHaveText(me.email);
  119 |       await expect(slot.locator('a.auth-link', { hasText: 'Log out' })).toHaveAttribute('href', '/outpost.goauthentik.io/sign_out');
  120 |       await expect(slot.locator('.ei-chip').first()).toHaveText('Registered');
  121 |     } else {
  122 |       await expect(slot.locator('a.auth-link')).toHaveText('Log in');
  123 |     }
  124 |   });
  125 | });
  126 | 
  127 | // Sign-in panel (electinfo/sites#303): Log In opens the site's own dialog;
  128 | // "Continue with Google" is /signin/google (njs/signin.js), "Continue with
  129 | // email" the outpost's /start.
  130 | test.describe('sign-in panel', () => {
  131 |   test('/signin/google redirects to the Google flow, or falls back to the sign-in page', async ({ request }) => {
  132 |     const res = await request.get('/signin/google?rd=%2Fvoters%2F', { maxRedirects: 0 });
  133 |     expect(res.status()).toBe(302);
  134 |     expect(res.headers()['cache-control']).toContain('no-store');
  135 |     const location = res.headers()['location'] || '';
  136 |     // With an outpost for this host: Authentik's Google-only flow, the
  137 |     // outpost's authorize URL as a relative next. Anywhere else (CI pods):
  138 |     // the outpost's own /start, i.e. the normal sign-in page.
  139 |     if (location.startsWith('https://auth.elect.info/')) {
  140 |       const url = new URL(location);
  141 |       expect(url.pathname).toBe('/if/flow/elect-info-google/');
  142 |       expect(url.searchParams.get('next') || '').toMatch(/^\/application\/o\/authorize\/\?/);
  143 |     } else {
  144 |       expect(location).toMatch(/^https:\/\/[^/]+\/outpost\.goauthentik\.io\/start\?rd=https%3A%2F%2F[^%]+%2Fvoters%2F$/);
  145 |     }
  146 |   });
  147 | 
  148 |   test('/signin/register goes to the sign-up flow, or falls back to the sign-in page', async ({ request }) => {
  149 |     const res = await request.get('/signin/register?rd=%2F', { maxRedirects: 0 });
  150 |     expect(res.status()).toBe(302);
  151 |     const location = res.headers()['location'] || '';
  152 |     if (location.startsWith('https://auth.elect.info/')) {
  153 |       expect(new URL(location).pathname).toBe('/if/flow/elect-info-enrollment/');
  154 |     } else {
  155 |       expect(location).toMatch(/^https:\/\/[^/]+\/outpost\.goauthentik\.io\/start\?rd=/);
  156 |     }
  157 |   });
  158 | 
  159 |   test('the shared identity bar is served and revalidated', async ({ request }) => {
  160 |     for (const asset of ['/identity/identity-bar.js', '/identity/identity-bar.css']) {
  161 |       const res = await request.get(asset);
  162 |       expect(res.status(), asset).toBe(200);
  163 |       expect(res.headers()['cache-control'] || '').toContain('no-cache');
  164 |     }
  165 |   });
  166 | 
  167 |   test('/signin/google only answers GET, and the outpost hop is internal', async ({ request }) => {
  168 |     expect((await request.post('/signin/google', { maxRedirects: 0 })).status()).toBe(405);
  169 |     expect((await request.post('/signin/register', { maxRedirects: 0 })).status()).toBe(405);
  170 |     expect((await request.get('/_outpost_start?rd=%2F', { maxRedirects: 0 })).status()).toBe(404);
  171 |   });
  172 | 
  173 |   test('Log In opens the sign-in panel with Google and email', async ({ page, request }) => {
  174 |     const me = await whoami(request);
  175 |     test.skip(me.enabled !== 'true' || me.email !== '', 'needs Authentik on and a signed-out visitor');
  176 |     await page.goto('/');
  177 |     await page.locator('#auth-slot a.auth-link', { hasText: 'Log in' }).click();
  178 |     const panel = page.locator('dialog#ei-signin');
  179 |     await expect(panel).toBeVisible();
  180 |     await expect(panel.locator('[data-signin="google"]')).toHaveAttribute('href', /^\/signin\/google\?rd=/);
  181 |     await expect(panel.locator('[data-signin="email"]')).toHaveAttribute('href', /^\/outpost\.goauthentik\.io\/start\?rd=/);
  182 |     await expect(panel.locator('[data-signin="register"]')).toHaveAttribute('href', /^\/signin\/register\?rd=/);
  183 |     await page.keyboard.press('Escape');
  184 |     await expect(panel).toBeHidden();
  185 |   });
  186 | });
  187 | 
```