QA 없는 상황에서 Cypress 도입해보기

도입 계기

현재 재직 중인 회사에서 QA 분들이 연달아 퇴사를 하게 되어, 앞으로는 QA가 없이 개발을 진행해야 하는 상황에 직면하게 되었다.

그러다보니 자연스럽게 팀 내에서는 테스트 코드를 작성하는 것에 대한 논의가 이루어졌다. 그러나 설상가상으로 우리 팀에서 작성했던 테스트코드라고는 약 2년 전에 작성했던 코드만 남아있는 상황이었다...

 

이러한 상황에서, E2E 테스트 라이브러리인 Cypress가 눈에 들어왔다. Cypress를 도입하는 것을 적극적으로 건의하였고, 현재 내가 cypress 환경을 구축하고 있는 중이다. 준비하면서 기록을 해두면 좋을 것 같아 이렇게 블로그에 글을 남겨둔다.

Cypress 도입의 이유

Cypress는 주로 엔드투엔드(E2E) 테스트에 사용되는 강력한 프레임워크로, 테스트 작성 및 실행이 비교적 쉬우며 브라우저 환경에서 실제 사용자와 유사한 방식으로 애플리케이션을 테스트할 수 있다는 장점이 있다. 특히 QA가 없는 환경에서는 개발자들이 손쉽게 테스트를 작성하고 실행할 수 있는 툴이 필요했기에 Cypress는 좋은 선택지라고 판단되었다.

 

Cypress 설치

터미널에 아래와 같은 명령어를 통해 설치를 한다.

npm install cypress --save-dev

 

그리고 다음과 같은 명령어를 통해 cypress를 실행시킨다.

npx cypress open

 

그리고 실행된 cypress에서 기본 예제를 실행시키면, 아래와 같이 최상위 폴더 아래에 cypress 라는 폴더가 생긴 뒤, 하위에 여러 파일들이 생기는 것을 확인할 수 있다.

 

• cypress/dowloads: 테스트 실행 중, 다운로드한 파일이 저장된 폴더
• cypress/e2e: E2E 테스트 코드를 작성하는 폴더
• cypress/fixtures: 테스트에서 사용되는 정적인 데이터를 저장하는 폴더
• cypress/support: 테스트에 사용되는 공통 로직을 함수로 만들어서 저장하는 폴더
• cypress.config.js: cypress의 설정을 정의하는 폴더

---

Cypress 테스트코드 작성 예제

// cypress/e2e/login.spec.js
describe('Login Page Test', () => {
  // 각 테스트 전에 로그인 페이지를 방문
  beforeEach(() => {
    cy.visit('/login'); // '/login'은 테스트할 로그인 페이지의 경로입니다.
  });

  it('should display the login form', () => {
    // 로그인 폼의 존재 여부를 확인
    cy.get('form#loginForm').should('be.visible');
  });

  it('should show an error for empty input fields', () => {
    // 로그인 버튼 클릭
    cy.get('button[type="submit"]').click();

    // 오류 메시지가 표시되는지 확인
    cy.get('.error-message')
      .should('be.visible')
      .and('contain', 'Please fill out this field');
  });

  it('should successfully log in with valid credentials', () => {
    // 사용자 이름 및 비밀번호 입력
    cy.get('input[name="username"]').type('testuser');
    cy.get('input[name="password"]').type('password123');

    // 로그인 버튼 클릭
    cy.get('button[type="submit"]').click();

    // 성공적으로 로그인 후, 리디렉션 또는 특정 요소 확인
    cy.url().should('include', '/dashboard'); // 로그인 후 이동할 페이지 확인
    cy.get('h1').should('contain', 'Welcome, testuser'); // 대시보드에 환영 메시지 확인
  });

  it('should show an error for invalid credentials', () => {
    // 잘못된 사용자 이름 및 비밀번호 입력
    cy.get('input[name="username"]').type('wronguser');
    cy.get('input[name="password"]').type('wrongpassword');

    // 로그인 버튼 클릭
    cy.get('button[type="submit"]').click();

    // 오류 메시지 확인
    cy.get('.error-message')
      .should('be.visible')
      .and('contain', 'Invalid username or password');
  });
});

 

 

• cy.visit('/login'): 로그인 페이지로 이동합니다.
• cy.get('selector'): 선택자를 사용하여 요소를 찾습니다.
• .should('be.visible'): 요소가 화면에 보이는지 확인합니다.
• .type('text'): 입력 필드에 텍스트를 입력합니다.
• .click(): 버튼 클릭 등 클릭 이벤트를 트리거합니다.
• cy.url().should('include', '/dashboard'): 로그인 성공 후 URL이 예상대로 변경되었는지 확인합니다.
• .and('contain', 'text'): 요소가 특정 텍스트를 포함하는지 확인합니다.

 

---

Cypress 도입 시 주의할 점

앞에서 설명한 기능적인 테스트만으로는 우리가 만드는 애플리케이션이 항상 정상적으로 동작한다는 보장을 해주는 것은 아니다. 기능이 동작한다고는 해도, 글자가 너무 작거나 생상이 의도한 바와는 달라 눈에 잘 들어오지 않는 경우도 있을 것이다. 그렇기 위해 프론트엔드에서는 시각적 테스트까지 병행하는 것이 좋다.