프론트엔드 테스트 자동화 도구인 Playwright를 사용하면서, 종종 브라우저의localStorage에 접근하려 할 때 아래와 같은 에러를 마주할 수 있습니다:
Error: page.evaluate: SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.이 오류는 page.evaluate()를 사용해 localStorage에 값을 설정하거나 읽으려 할 때 발생합니다. 이 글에서는 이 에러가 발생하는 이유와 해결 방법을 알아보겠습니다.
에러가 발생하는 이유
Playwright에서 localStorage를 사용하려고 할 때, 브라우저의 보안 정책에 의해 차단되는 경우가 있습니다. 이는 브라우저가 사용자 데이터를 보호하기 위해 설정된 몇 가지 보안 메커니즘 때문입니다. 주로 다음과 같은 상황에서 이 오류가 발생할 수 있습니다:
1. Cross-Origin Restrictions (교차 출처 제한)
브라우저는 동일 출처 정책(Same-Origin Policy)에 따라 다른 도메인에서 온 요청이나 리소스에 대해 제한을 가합니다. Playwright가 특정 페이지를 테스트할 때, 그 페이지가 다른 도메인으로 리디렉션되거나 외부 리소스를 불러오려는 시도가 있을 경우, localStorage 접근이 차단됩니다. 예를 들어, A 도메인에서 B 도메인의 localStorage에 접근하려는 시도가 이 문제를 일으킬 수 있습니다.
2. 특수 URL 사용 (about:blank, data URLs 등)
브라우저는 about:blank, about:srcdoc, 또는 data:와 같은 특수 URL에서 localStorage에 접근하는 것을 허용하지 않습니다. 이 특수한 URL들은 보안상 이유로 브라우저에서 제한되며, 이 경우 localStorage에 접근하려 하면 SecurityError가 발생합니다.
3. 브라우저 보안 설정 또는 sandbox 환경
Playwright 테스트 환경이 sandbox 모드로 실행되거나, 특정 보안 설정이 활성화된 브라우저 환경에서는 localStorage 접근이 제한될 수 있습니다. 이 경우 브라우저가 모든 스크립트의 권한을 제한하므로 localStorage에 접근하려고 하면 오류가 발생할 수 있습니다.
해결 방법
위에서 언급한 문제를 해결하기 위해 몇 가지 방법을 적용할 수 있습니다. 주로 비동기적으로 페이지 로드를 확인한 후 localStorage에 접근하는 것과 페이지 로드 전에 스크립트를 미리 실행하는 것이 효과적인 해결책입니다.
1. 올바른 페이지 로딩 확인
첫 번째 해결 방법은 localStorage에 접근하기 전에 페이지가 제대로 로드되었는지 확인하는 것입니다. Playwright에서 페이지가 로드되지 않았거나, about:blank와 같은 특수 페이지일 때 이 문제가 발생할 수 있습니다. 따라서 page.goto()로 페이지를 명시적으로 로드한 뒤, localStorage에 접근해야 합니다.
test('something', async ({ page }) => {
await page.goto('https://your-domain.com'); // 페이지가 올바르게 로드된 후
await page.evaluate(() => localStorage.setItem('key', JSON.stringify('value'))); // localStorage 접근
// 이후 필요한 테스트 코드 작성
});이 코드는 먼저 페이지를 goto로 명확하게 로드한 후 localStorage에 안전하게 접근합니다. 이렇게 하면 페이지가 제대로 준비된 상태에서 localStorage에 접근할 수 있습니다.
2. 교차 출처(Cross-Origin) 문제 해결
교차 출처 제한으로 인한 SecurityError를 피하려면, Playwright의 context를 활용해 페이지가 로드되기 전에 localStorage에 데이터를 설정할 수 있습니다. 이를 통해 브라우저 보안 정책을 우회하지 않고도 테스트를 실행할 수 있습니다.
test('something', async ({ page }) => {
const context = page.context();
// 페이지 로드 전에 localStorage에 값을 미리 설정
await context.addInitScript(() => {
window.localStorage.setItem('key', JSON.stringify('value'));
});
await page.goto('https://your-domain.com'); // 페이지 로드 후 localStorage 사용
// 이후 필요한 테스트 코드 작성
});addInitScript()는 페이지가 로드되기 전에 스크립트를 실행하여, 페이지가 시작할 때 이미 localStorage에 필요한 값이 설정되어 있습니다. 이 방법은 교차 출처 제한으로 인해 발생하는 문제를 해결할 수 있습니다.
3. about:blank 또는 data URL 문제 해결
about:blank 또는 data:와 같은 특수 URL에서는 localStorage에 접근할 수 없습니다. 이러한 경우, 테스트 대상 URL이 적절한지 확인하고, 가능하다면 특수 URL 대신 실제 페이지에서 테스트를 수행해야 합니다.
만약 테스트 환경에서 반드시 이런 특수 URL을 사용해야 한다면, localStorage가 아니라 다른 스토리지 방법을 고려해야 합니다. 예를 들어, 데이터를 메모리에서 직접 관리하거나, sessionStorage 등 다른 저장소를 활용할 수 있습니다.
결론
Playwright에서 localStorage에 접근할 때 발생하는 SecurityError는 주로 브라우저의 보안 정책이나 페이지의 상태와 관련된 문제입니다. 다음과 같은 해결 방법을 통해 이 문제를 방지할 수 있습니다:
- 페이지가 올바르게 로드되었는지 확인하고
localStorage에 접근 - 교차 출처 문제를 해결하기 위해 페이지 로드 전에
localStorage값을 설정 - 특수 URL 사용 시 주의하고, 가능한 경우 적절한 URL에서 테스트 수행
이러한 방법들을 통해 Playwright에서 더 안정적이고 신뢰성 있는 테스트를 작성할 수 있습니다.
요약
Playwright로 웹 애플리케이션을 테스트할 때, localStorage 접근 관련 오류를 피하려면:
- 페이지를 먼저 올바르게 로드한 후
localStorage에 접근합니다. - 교차 출처 문제를 우회하기 위해 페이지가 로드되기 전에
localStorage값을 설정합니다. - 특수 URL에서는
localStorage접근이 제한되므로, 필요한 경우 다른 방식의 스토리지를 고려합니다.
이 방법들을 통해 테스트에서 발생하는 타이밍 문제 및 보안 오류를 효과적으로 해결할 수 있습니다.
참고 코드
test('something', async ({ page }) => {
const context = page.context();
// localStorage에 값을 설정하는 스크립트를 미리 실행
await context.addInitScript(() => {
window.localStorage.setItem('key', JSON.stringify('value'));
});
await page.goto('https://your-domain.com'); // 페이지 로드 후 localStorage 사용
// 이후 필요한 테스트 코드 작성
});이 코드를 사용하면 localStorage 접근 문제를 해결하고, 더 안정적인 테스트를 작성할 수 있습니다.
