Use storageState() for Authentication
Authenticating tests using Playwright's saved session cookies
If your tests require authenticated sessions, you can use Playwright's storageState() to load previously saved authentication cookies into the browser context. Because Axe Watcher uses its own Playwright fixtures, you must merge the authentication fixture with Axe Watcher's fixture using mergeTests.
Fixtures File
Create a fixtures.ts file that reads cookies from a saved storageState.json file and injects them into the Playwright BrowserContext:
import { readFileSync } from 'fs'
import { test as base, type BrowserContext, mergeTests } from '@playwright/test'
import { playwrightTest } from '@axe-core/watcher/playwright-test'
// Environment variables for Axe Developer Hub
const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID
const SERVER_URL = process.env.SERVER_URL
// Configure Axe Watcher
const { test: watcherTest, expect } = playwrightTest({
axe: {
apiKey: ACCESSIBILITY_API_KEY,
projectId: PROJECT_ID,
serverURL: SERVER_URL
},
headless: false
})
// Custom fixture: Cookie-based authentication
class AuthCookie {
#context: BrowserContext
constructor(context: BrowserContext) {
this.#context = context
}
async inject() {
await this.#context.addCookies(
JSON.parse(readFileSync('storageState.json', 'utf-8')).cookies
)
}
}
// Define auth cookie fixture
const authCookieFixture = base.extend<{ authCookie: AuthCookie }>({
authCookie: async ({ context }, use) => {
const auth = new AuthCookie(context)
await use(auth)
}
})
// Merge fixtures
const test = mergeTests(authCookieFixture, watcherTest)
// Export merged test and expect
export { test, expect }Usage in Tests
In your test files, call authCookie.inject() before navigating to authenticated pages:
import { test, expect } from './fixtures'
test('should display accessible authenticated page', async ({ page, authCookie }) => {
await authCookie.inject()
await page.goto('https://example.com/authenticated-page')
// Accessibility testing happens automatically
})Generate storageState.json before running your tests using Playwright's global setup. This file contains authentication cookies and should not be committed to source control.