[Cypress Studio] 📝 더욱 간편해진 웹 테스트 자동화 툴

Cypress Studio 소개

앞선 시간에 자바스크립트에 익숙하다면 쉽게 접할 수 있는 테스트 라이브러리인 cypress 에 대해서 기본적인 사용법을 알아보았다. 

--------------------------------------------------

링크 박스

---------------------------------------------------

이처럼 기본적으로 테스팅을 위한 동작을 일일히 프로그래머가 코드를 짜야 하는데, 그러면 비전공자혹은 비개발 직군이 E2E 테스트를 하기 위해선 프로그래밍을 배워야 하는 러닝 커브가 있으며, 또한 테스트 케이스 수만큼 비슷한 E2E 테스트 코드를 반복적으로 작성해야 하여 테스트 코드 작성 시간이 오래걸리게 된다는 아쉬운점이 있다. 그래서 이를 좀 더 편하게 하는 기능이 있어 소개해본다.

Cypress Studio란 Cypress에서 제공하는 테스트 코드 자동화 기능으로, 웹 애플리케이션과 상호작용하면서 테스트 코드를 알아서 생성해주는 기능이다. 즉, 코드를 작성하고 사용자 동작 시나리오를 구성하는것이 아닌, 거꾸로 사용자의 마우스, 키보드 등의 액션과 페이지의 동작을 기록하여 자동으로 코드를 완성시켜 준다.

예를들어 버튼 클릭과 같은 동작에 대한 함수를 코딩 없이 만들어주며, 또한 특정 버튼에 대한 엘리먼트의 아이디나 클래스를 일일히 추적해서 알필요없이 클릭만 하면 자동으로 선택자를 추적해 만들어줘 훨씬 편해진다. 그래서 테스트 코드를 수동으로 작성하는 시간과 번거로움을 줄일 수 있어, Cypress를 새로 사용하거나 학습하는 사람들에게 유용하고 빠르게 테스트를 만들 수 있게 되어 업무 효율일 높일 수 있다.

다만 Cypress Studio는 아직 실험적인 기능이라 완성형 도구는 아님을 유의하자. 예를들어 Cypress Studio는 현재 E2E 테스트 작성에만 사용할 수 있으며, 여러 출처의 도메인을 사용하는 작성 테스트를 지원하지 않는다.

---

Cypress Studio 사용법

 

Cypress 설치하기

기존 cypress를 설치하여 사용하고 있는 독자분들이라면, 이 단계는 그냥 건너뛰어도 된다. 하지만 cypress를 처음 접하시는 분들은 https://www.cypress.io/install 링크에서 [Download Cypress.zip] 버튼을 눌러 exe 파일을 다운받자.

그리고 압축 파일을 적절한곳에 압축을 풀고 경로의 파일을 실행하면, 런치패드(Launchpad) 화면이 띄워지게 된다.

---

Cypress Studio 설정하기

 

초기 프로젝트 폴더 생성

먼저 중앙에 Drag your project directory here or browse manually 문구 버튼을 클릭하고 테스트 코드를 관리할 프로젝트 폴더를 선택해준다. 처음이라면 빈 폴더를 생성하고 등록해 주면 된다.

프로젝트 폴더를 등록하면, 아래와 같은 화면으로 넘어가게 되고 사진에 따라 진행해준다.

 

테스트 파일 생성

브라우저를 선택하면, 마치 웹앱과 같이 cypress 전용 웹애플리케이션이 새 창으로 열리게 된다. 새 테스트 파일을 생성하도록 하자.

테스트 코드 파일 생성

생성된 테스트 코드 파일 실행

 

Studio 설정 활성화 하기

사용자의 키보드, 마우스 클릭과 같은 여러 동작을 기록하여 자동으로 테스트 코드로 변환하기 위해서는 세팅에서 설정값 하나가 필요하다.

먼저 세팅을 눌러 파일을 열어 편집할 에디터를 지정해주고, cypress.config.js 파일을 열어서 안에 experimentalStudio: true를 아래와 같이 추가해준다.

module.exports = {
  e2e: {
    // 자동 테스트 코드 생성 설정
    experimentalStudio: true,

    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
};

코드를 저장하면, cypress studio 크롬 웹앱이 재부팅되게 되고, 상단에 '자동화된 테스트 소프트웨어에 의해 제어되고 있습니다'라고 표기가 되며, 다시 세팅으로 들어가서 Project settings 를 클릭하고 스크롤을 내리면 아래와 같이 옵션이 활성화가 된 것을 확인할 수 있다.

---

Cypress Studio 시작하기

테스트 동작 코드를 수정하려면 위에서 생성한 spec.cy.js 파일을 수정하면 된다. 다만 우리는 사용자의 동작을 기록해서 자동으로 테스트 코드를 생성하는 기능을 하용할 것이기 때문에, 웹앱에서 cypress studio를 진행하도록 해보자.

 

자동 테스트 기록 & 생성

먼저 기록을 시작하기 위해선 아래와 같이 template spec 테스트 문구 옆에 마우스 커서를 살짝 올려보면 옆에 말풍선으로 Add New Test 문구가 뜨면서 클릭이 활성화 된다.

그러면 테스트할 웹페이지를 입력하라고 뜨게되고 여기에 국내 보편적인 사이트른 네이버 www.naver.com  을 입력해보자.

Continue 버튼을 누르게 되면 네이버 웹페이지로 이동하게 되는데, 이제 이 웹페이지에서 사용자가 행위, 동작을 하게되면 이에 맞게 왼쪽 로그 메뉴에 기록이 되게 된다.

예를들어 네이버 검색창에 텍스트를 입력하고 우측의 돋보기 버튼을 클릭하는 동작을 행하면, 좌측에 이에 대한 행위값이 기록되게 되며, Save Commands 버튼을 누르면 이를 코드로 변환하게 된다.

테스트 이름 입력

실제 테스트 코드는 위에서 생성하고 실행한 spec.cy.js 파일을 오픈하면 아래와 같이 사용자의 행위가 자동으로 테스트 코드로 변환된 것을 확인할 수 있다.

// template spec이라는 테스트 스위트를 정의합니다.
describe('template spec', () => {

  /* ==== Test Created with Cypress Studio ==== */
  
  // 네이버라는 테스트 케이스를 정의합니다.
  it('네이버', function() {
    /* ==== Generated with Cypress Studio ==== */
    cy.visit('www.naver.com'); // www.naver.com 라는 웹사이트를 방문합니다.
    cy.get('#query').clear('r'); // id가 query인 요소를 찾아서 r이라는 문자를 지웁니다.
    cy.get('#query').type('검색어를 입력하세요'); // id가 query인 요소에 '검색어를 입력하세요'라고 타이핑합니다.
    cy.get('#search-btn').click();  // id가 search-btn인 요소를 클릭합니다.
    /* ==== End Cypress Studio ==== */
  });
})

이렇게 생성된 테스트 코드 파일을 실행시키려면, GUI 앱에서 직접 파일을 클릭하면 자동으로 진행되게 된다.

 

테스트 명령 이어서 추가하기

만일 추가적인 테스팅 동작 코드가 필요하다라고 한다면, 아래 사진처럼 테스트 그룹에 마우스 커서를 갖다대면, 'Add Commands to Test' 말충선이 뜨게 된다. 이걸 클릭하면 다시 Cypress Studio 가 발동되며 동작 코드 변환을 시행하게 된다. 추가 수정을 한뒤 이전 처럼 커맨드를 저장해주면 된다.

 

엘리먼트 값 추적하기

내가 클릭한 메뉴나 버튼의 css 선택자를 알고 싶을 때가 있을 것이다. 이런 경우 개발자 도구를 열어 일일히 추적하기 보다는 cypress에서 제공해주는 기능을 이용하면 된다. 아래와 같이 간편히 셀렉터를 얻을 수 있다.

---

참고문헌

https://docs.cypress.io/guides/references/cypress-studio

테스트 코드 자동으로 만들기 feat. Cypress Studio | 카카오엔터테인먼트 FE 기술블로그