테스트 러너(오픈 모드) 이해하기

테스트 러너(오픈 모드) 이해하기

Cypress를 cypress open으로 실행하면 열리는 앱을 **오픈 모드(open mode)**라고 해요. 여기서 스펙을 실행하고, Command Log가 실시간으로 갱신되는 걸 보면서, 테스트 대상 애플리케이션이나 컴포넌트를 직접 살펴볼 수 있습니다. 이 글에서는 오픈 모드의 화면 구성과 각 영역이 무엇을 하는지 정리해 볼게요.

출처: Cypress 공식 문서 — Open mode in the Cypress app (Test Runner) 원본 URL: https://docs.cypress.io/app/core-concepts/open-mode

론치패드(Launchpad)와 스펙 실행

처음 실행하면 테스트 종류와 환경을 고르는 론치패드가 나와요. 이 수동 선택 단계를 건너뛰고 싶다면 cypress open --browser <브라우저>에 --component 또는 --e2e를 붙여서 실행하면 됩니다.

스펙 목록에서 스펙을 클릭하면 Test Runner가 열리면서 그 스펙을 실행해요. 검색창으로 스펙 이름을 필터링할 수도 있고, 실험적인 experimentalRunAllSpecs를 쓰면 여러 스펙을 순차 실행할 수도 있습니다(이 옵션은 실험 기능이라 바뀔 수 있어요).

Test Runner와 Command Log

Cypress Test Runner는 오픈 모드에서 스펙을 실행하고 디버깅하는 창이에요. 커맨드를 한 단계씩 실행하면서 애플리케이션/컴포넌트(Application or Component Under Test)를 렌더링하고, 그 과정을 Command Log로 흘려보내서 무엇이 어떻게 일어났는지 보여줍니다.

Command Log(왼쪽 패널)는 스펙 파일의 각 테스트마다 모든 커맨드와 훅을 순서대로 나열해요. 테스트를 클릭하면 그 안의 커맨드가 펼쳐지는데, before, beforeEach, afterEach, after 훅에서 실행된 커맨드도 포함됩니다.

미리보기 영역 — 애플리케이션/컴포넌트

화면 오른쪽은 테스트 대상이 렌더링되는 미리보기(preview pane) 영역이에요.

E2E: 애플리케이션(Application Under Test)

엔드투엔드 테스팅에서는 cy.visit()이나 이후 라우팅 호출로 이동한 앱이 이 영역에 표시돼요. 이 앱은 완전히 상호작용 가능해서, 평소처럼 개발자 도구를 열어 요소를 검사할 수 있습니다. DOM 전체가 디버깅에 사용 가능하죠.

미리보기는 테스트에 정의된 크기와 방향을 그대로 따릅니다. cy.viewport()로 조절하거나 Cypress 설정에 기본값을 넣을 수 있어요. 미리보기가 브라우저 창에 맞지 않으면 Cypress가 맞게 축소하고, 창 우측 상단에 현재 크기와 배율을 표시합니다.

스펙 파일에 문법 오류가 있으면 미리보기에 바로 표시돼서, 테스트가 실행될 때 오타나 누락된 임포트를 일찍 잡을 수 있어요.

컴포넌트 테스트: 컴포넌트(Component Under Test)

컴포넌트 테스팅에서는 오른쪽에 테스트 대상 컴포넌트(CUT)가 렌더링됩니다. cy.mount()로 컴포넌트를 마운트하고, 실제 브라우저에서 상호작용하며 동작과 접근성을 검증할 수 있어요. 컴포넌트도 완전히 상호작용 가능하고, 마찬가지로 viewport 설정과 문법 오류 표시가 적용됩니다.

Cypress Studio

Cypress Studio는 오픈 모드에 포함된 기능으로, 브라우저에서의 상호작용을 기록해서 Cypress 커맨드로 생성해 줘요. 녹음한 동작을 바탕으로 테스트를 앱을 벗어나지 않고 바로 수정할 수 있고, 변경 사항은 스펙 파일에 저장되므로 테스트가 코드로 유지됩니다.

디버깅하기

오픈 모드에는 실패 원인을 추적하는 디버깅 도구가 갖춰져 있어요. 상세 오류 메시지(스택 트레이스 포함), 커맨드별 구조화된 콘솔 출력을 볼 수 있고, 특수 커맨드로 실행을 멈추고 한 단계씩 진행할 수 있죠.

커맨드를 제어하는 특수 커맨드로는 cy.pause()와 cy.debug()가 있어요. cy.pause()는 아래 예처럼 실행을 일시 정지해서 남은 커맨드를 한 단계씩 살펴보게 해줍니다.

describe('My First Test', () => {
  it('clicking "type" shows the right headings', () => {
    cy.visit('https://example.cypress.io')
    cy.pause()
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')
    cy.get('[data-testid="action-email"]').type('[email protected]').should('have.value', '[email protected]')
  })
})

테스트가 실행될 때 Cypress가 단계 컨트롤을 보여주면, 한 커맨드씩 진행하면서 각 단계 사이의 상태를 확인할 수 있어요.

더 알아보기