E2E Test

E2E Test(End To End Test)

E2E Test는 개발물을 사용자의 입장에서 점검하는 것이다.

 

사용자에게 직접 노출되는 페이지에서 원하는 텍스트가 제대로 출력되는지 버튼을 클릭했을 때 올바르게 동작하는지 등을 점검한다.

 

 

E2E가 왜 필요할까?

모든 애플리케이션은 자체 환경 외부의 여러 시스템 및 데이터베이스에 연결되고 통합된다. 말할 필요도 없이 이로 인해 앱의 Workflow가 상당히 복잡해지게 된다. E2E Test를 하면 사용자의 동작을 모사해야 하기 때문에 사용자 입장의 Workflow와 Laytency를 측정하고 점검할 수 있다. 자연스럽게 사용자의 경험을 더 고민하게 되는 것이다.

 

E2E 테스트는 애플리케이션의 다양한 종속성이 정확하게 작동하는지 확인해준다. 또한 여러 시스템 구성 요소 간에 정확한 정보가 전달되고 있는지 확인한다고 한다.

 

 

E2E Test Framework

E2E 테스트를 위한 프레임워크

 

다양한 프레임워크를 Selenium-based 기준으로 나눌 수 있다. Selenium은 웹 어플리케이션을 위한 테스팅 프레임워크로 자동화 테스트를 위한 여러 가지 강력한 기능을 지원해준다. Selenium기반 프레임워크는 웹 드라이버를  설치하고 사용하여 브라우저와 상호작용을 하지만 non-selenium 프레임워크는 브라우저와 직접 상호작용하기 때문에 큰 이점이 있다고 한다.

 

non-selenium 프레임워크 중 많이 다운로드 된 Cypress를 사용하기로 하였다.

 

 

Cypress E2E test

설치

npm install --save-dev cypress

 

설치가 완료되었다면 script에 아래와 같은 내용을 추가한다.

{
  "scripts": {
	 ...
	"e2e": "cypress run", // 모든 테스트를 실행
    	"e2e:open": "cypress open" // Cypress Test Runner를 실행
  }
}

이후 npm run e2e:open 명령어를 실행하면 자동으로 cypress.json 파일과 cypress Directory가 생성된다. cypress.json에는 설정을 할 수 있다.

 

cypress는 프로젝트를 테스트하는 도구로 Cypress로 애플리케이션에 접속하기 전에 먼저 애플리케이션을 실행해야 한다. 이러한 기준이 되는 url값을 설정해줘야 한다. 로컬 주소나 배포 주소를 추가해주면 된다.

{
  "baseUrl": "http://localhost:3000/", // 주소 설정
  "videoRecording": false // 영상 자동 녹화
  "viewportWidth": 1200,
  "viewportHeight": 1000
}

 

설정값은 공식문서에 자세히 나와있다.

 

 

테스트 작성

테스트는 cypress/integration 폴더에 작성하면 된다.

 

test.spec.js

describe('메인', () => { // 테스트 설명
  it('메인으로 이동', () => { // 테스트 제목
    cy.visit('/'); // baseurl 이동
  })
})

 

이제 npm run e2e:open을 통해 실행하면 아래와 같은 화면이 나온다.

 

이전에 추가한 test.spec.js를 볼 수 있다. 클릭하여 실행을 하면 설정해둔 사이트로 이동하게 된다.

 

cy.get(selector)

이제 사이트에서 클릭과 같은 테스트를 하려면 버튼이 무엇인지 알아내야 하는데 방법은 다음과 같다.

주소창 옆에 Open Selector Playground를 선택한다.

 

원하는 요소로 커서를 이동하면 해당 selector를 확인할 수 있다. 해당 select를 복사하고 새로운 테스트를 추가해보자.

 

ranking.spec.js

describe("메인 => 메뉴 => 순위", () => {
  it("메인에서 순위로 이동", () => {
    cy.visit("/");
    cy.get(".NavMenu__MenuIcon-sc-1hb9tmu-1").click();
    cy.get(":nth-child(2) > .NavMenu__LinkName-sc-1hb9tmu-8").click();
  });
});

 

 

테스트 실행

왼쪽에 로그(메인 => 메뉴 열기 클릭 => 순위 클릭 => 순위 페이지 이동)와 오른쪽 영역에서 실제로 실행되는 화면을 볼 수 있다.

 

 

마무리

이렇게 E2E Test를 하면서 서비스를 사용자의 동작으로 지연 시간 및 흐름 등을 확인하면서 다양한 시나리오로 테스트 할 수 있게 된다. 이를 통해 사용자 경험에 대해 다시 한번 고민해보고 이를 통해 더 나은 결과물을 만들어 낼 수 있을 것이다.

 

 

 

 

 

 

참고 자료

- Which E2E testing framework to use for JS-based client applications?