https://www.codeslog.com/tags/e2e/ Recent content in E2E 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 Wed, 29 Jul 2026 15:01:36 +0900 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-glossary/ Sat, 04 Jul 2026 22:30:00 +0900 https://www.codeslog.com/posts/frontend-testing-glossary/ 단위 테스트부터 flaky, 픽스처, MCP까지 — 「프론트엔드 테스트 제대로 하기」 시리즈에 나오는 용어를 학습 순서대로 초보자도 이해할 수 있게 풀어 정리했습니다. 읽다가 낯선 단어를 만나면 언제든 이 페이지로 돌아오세요. 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로 함께 만들 커리큘럼을 소개합니다.