Cypress e2e 테스트 환경 구축하기

cypress 다운로드

cypress 다운

npm i cypress --dev --save
or
yarn add --dev cypress

cypress 파일 생성

mkdir cypress
cd cypress

mkdir integration
cd integration

// 테스트코드를 작성할 파일 생성
mkdir App.e2e.js

cypress 실행하기

package.json 스크립트 추가

  "scripts": {
    "cypress:open": "cypress open"
  }

yarn test:cypress

테스트를 시작하면 cypress 에서 제공하는 Launching Browsers가 제공된다!
여기서 우리가 만든 파일을 확인 할 수 있고, 파일을 클릭해 실제 우리가 작성한 코드로 테스트 할 수 있습니다.

주의사항💥

e2e 테스트를 실행시키기전 터미널을 열어 프로젝트를 start 해 줍니다.

테스트코드 작성하기

describe('App e2e test(테스트코드 제목이 들어갑니다)', () => {
  it('헤더가 있어야 한다 (테스트에 대한 설명)', () => {
  
 	// 일반적으로 페이지 방문으로 테스트를 시작합니다.
    cy.visit('/');

	// 가장 기본적인 테스트인 text 검사
    cy.get('.site-page-header').should('have.text', '퀴즈This is a quiz test');
    cy.get('.ant-btn').should('have.text', 'START');

	// 버튼를 찾아 클릭하는 테스트
    cy.contains('START').click();
    
    // http통신부분을 테스트 하기 위해선 server() 메소드로 서버 접속 후 아래와 같이 작성
    cy.server();
    cy.route({
      method: 'GET',
      url: 'https://opentdb.com/api.php?amount=10',
    }).as('apiCheck');
  });
});

'cy' is not defined 버그해결 🐛

'cy'에서 위와같은 eslint 오류가 난다면 cypress direction에서 eslintrc.json에 플러그인 설정을 해 주면 됩니다.

{
  "extends": ["plugin:cypress/recommended"]
}

(Option) BaseUrl Configuration

cypress.json BaseUrl을 설정해 주면 cy.visit("/") 또는 cy.request("/")를 사용할때 Baseurl+"" 로 접근 가능

Reference

https://docs.cypress.io/guides/overview/why-cypress