https://www.codeslog.com/tags/playwright/ Recent content in Playwright on Codeslog https://www.codeslog.com/images/default-cover.png?v=20260114T1436 https://www.codeslog.com/images/default-cover.png?v=20260114T1436 Hugo -- 0.168.0 ko Sat, 10 Oct 2026 23:55:00 +0900 https://www.codeslog.com/posts/lighthouse-agentic-browsing-accessibility/ Sat, 10 Oct 2026 23:55:00 +0900 https://www.codeslog.com/posts/lighthouse-agentic-browsing-accessibility/ Lighthouse 에이전트 브라우징(에이전트형 브라우징)을 결함 페이지로 재 보니, 키보드로 못 누르는 div 버튼이 접근성 100점과 2/2를 받았습니다. 이 점검이 보는 것과 놓치는 것, 에이전트 도구마다 다른 스냅샷까지 정리합니다. https://www.codeslog.com/posts/frontend-testing-ai-playwright/ Thu, 06 Aug 2026 01:11:00 +0900 https://www.codeslog.com/posts/frontend-testing-ai-playwright/ AI가 브라우저를 직접 조작하는 시대. Playwright codegen과 MCP 에이전트를 실무 기준으로 짚고, MCP가 스크린샷이 아니라 접근성 트리를 읽는다는 점, 자가치유 셀렉터가 왜 Playwright 기능이 아닌지까지 정리합니다. https://www.codeslog.com/posts/frontend-testing-visual-regression/ Wed, 29 Jul 2026 15:01:36 +0900 https://www.codeslog.com/posts/frontend-testing-visual-regression/ '기능은 되는데 레이아웃이 깨졌어요.' Playwright의 toHaveScreenshot으로 baseline과 픽셀을 비교하는 시각적 회귀 테스트를 구현하고, 애니메이션·시간을 고정하는 법과 macOS·Linux 폰트 렌더링 차이라는 환경 복병까지 다룹니다. https://www.codeslog.com/posts/frontend-testing-axe-e2e/ Mon, 27 Jul 2026 14:38:51 +0900 https://www.codeslog.com/posts/frontend-testing-axe-e2e/ 실제 브라우저에 그려진 화면을 axe-core 엔진으로 스캔해 접근성 위반을 자동으로 잡아냅니다. @axe-core/playwright로 E2E에 붙이고, 글씨 색을 살짝 흐리게 바꿔 color-contrast 위반이 실패로 잡히는 과정을 확인합니다. https://www.codeslog.com/posts/frontend-testing-playwright-debug/ Wed, 22 Jul 2026 01:30:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-debug/ 테스트가 CI에서만 깨질 때, 무엇을 봐야 할까요? Playwright 트레이스 뷰어로 실패 순간의 DOM·네트워크·콘솔을 되감아 보고, UI·디버그 모드와 리트라이를 '해결'이 아닌 flaky 신호로 읽는 법을 다룹니다. https://www.codeslog.com/posts/frontend-testing-playwright-fixtures/ Tue, 21 Jul 2026 01:25:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-fixtures/ 매 테스트마다 같은 준비를 반복하고 있나요? Playwright의 base.extend 커스텀 픽스처와 Page Object로 반복을 없애고, storageState로 로그인을 한 번만, fullyParallel 병렬 실행에서 테스트 격리 지키는 법까지 다룹니다. https://www.codeslog.com/posts/frontend-testing-playwright-locators/ Sat, 18 Jul 2026 23:06:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-locators/ E2E가 가끔 실패하는 진짜 이유와 해법. getByLabel이 두 요소에 매칭돼 strict mode 위반이 났던 실제 사례로 로케이터의 지연 평가를 이해하고, auto-wait로 waitForTimeout(sleep) 없이 flaky 테스트를 줄입니다. https://www.codeslog.com/posts/frontend-testing-playwright-intro/ Sat, 18 Jul 2026 02:25:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-intro/ 진짜 브라우저에서 사용자 흐름 전체를 검증하는 E2E. Playwright를 설치하고 webServer로 dev 서버를 자동 실행해, getByRole로 찾고 검증하는 첫 시나리오를 통과시킵니다. 단위·컴포넌트 테스트와 역할을 어떻게 나눌지도 정리합니다. https://www.codeslog.com/posts/frontend-testing-why-now/ Fri, 03 Jul 2026 22:40:00 +0900 https://www.codeslog.com/posts/frontend-testing-why-now/ AI가 코드를 쏟아내는 시대일수록 테스트가 더 중요해졌습니다. 「프론트엔드 테스트 제대로 하기」 시리즈의 첫 글로, 테스트가 주는 것과 피라미드·트로피 전략을 정리하고, Vitest·Playwright·axe-core로 함께 만들 커리큘럼을 소개합니다.