Cypress는 브라우저에서 직접 실행되는 JavaScript E2E 테스팅 프레임워크다. 실시간 리로드, 타임 트래블 디버깅, 자동 스크린샷 기능으로 개발자 경험이 뛰어나다.
| 항목 | Playwright | Cypress |
|---|
| 실행 환경 | 브라우저 외부 | 브라우저 내부 |
| 멀티 탭 | 지원 | 제한적 |
| 언어 | JS/TS/Python/Java | JS/TS |
| 브라우저 | Chromium/FF/WebKit | Chrome/FF/Edge |
| 컴포넌트 테스트 | 지원 | 지원 |
| 속도 | 빠름 | 보통 |
기본 테스트 예시
typescript
describe('장바구니 기능', () => {
beforeEach(() => {
cy.visit('/products');
});
it('상품을 장바구니에 추가', () => {
cy.get('[data-cy="product-card"]').first().within(() => {
cy.get('[data-cy="add-to-cart"]').click();
});
cy.get('[data-cy="cart-count"]').should('have.text', '1');
});
it('장바구니에서 상품 제거', () => {
cy.addToCart('PROD-001'); // 커스텀 커맨드
cy.visit('/cart');
cy.get('[data-cy="remove-item"]').click();
cy.get('[data-cy="empty-cart-message"]').should('be.visible');
});
});
API 인터셉션
typescript
it('API 요청 인터셉션', () => {
cy.intercept('GET', '/api/products', {
statusCode: 200,
body: [{ id: 1, name: '테스트 상품', price: 10000 }],
}).as('getProducts');
cy.visit('/products');
cy.wait('@getProducts');
cy.get('[data-cy="product-name"]').should('contain', '테스트 상품');
});
cypress.config.ts
typescript
import { defineConfig } from 'cypress';
export default defineConfig({
e2e: {
baseUrl: 'http://localhost:3000',
viewportWidth: 1280,
viewportHeight: 720,
video: false,
screenshotOnRunFailure: true,
retries: { runMode: 2, openMode: 0 },
setupNodeEvents(on, config) {
// 플러그인 설정
},
},
component: {
devServer: { framework: 'react', bundler: 'vite' },
},
});
관련 문서
