Cypress 설치 및 빠르게 시작하기

Cypress

• cypress 공식 문서

• 공식 문서가 정말 친절합니다. 공식 문서를 따라 가셔도 됩니다.

설치

npm init -y 패키지 설정들을 가져오기 위한 설정들을 생성 package.json
 // npm init -y에서 -y는 yes 라는 의미에요

npm install cypress --save-dev
npm i -D --save-dev // 위와 동일 (약어 버전)

package.json에 script를 추가합시다.

"scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run --browser chrome"
  },

cypress open 명령을 실행합시다.

• cypress 폴더가 생성됩니다.

• integration에 샘플들이 가득 생기게 됩니다.

• 샘플들은 필요없으니 integration내부를 일단 삭제합니당

• 기본 생성된 폴더들도 그냥 일단 무시해도 될 것 같아요. (필요할 때가 있긴 해요.)

테스트 파일을 생성합니다.

1. integration 폴더 내에 테스트용 파일을 생성합니다.
2. app.spec.js

테스트 예시

it("should have ....(테스트 이름)", () => {

	cy.visit("index.html"); // 방문 먼저
	cy.get('#total').should('have.text', "점심에 머먹지");
});

// 2개의 숫자에 대해 덧셈이 가능하다
it("2개의 숫자에 대해 덧셈이 가능하다", ()=>{
	cy.visit("index.html");
	// 2 + 9 = 11
	// 2 버튼을 누른다.
	cy.get(".digit").contains(2).click();
	// + 버튼을 누른다.
	cy.get(".operation").contains('+').click();
	// 9 버튼을 누른다.
	cy.get(".digit").contains(9).click();
	// = 버튼을 누른다.
	cy.get(".operation").contains('=').click();
	// 11이 나오는지 확인한다.
	cy.get("#total").should("have.text", "11");
});

cypress.json 설정 파일

• cypress를 실행하면 비디오 등 다양한 파일이 생겨요.

• 의도하지 않은 파일들이 github에 업로드되지 않도록 cypress.json 파일로 관리해주세요.

{
  "integrationFolder": "test",
  "testFiles": "*.spec.js",
  "screenshotOnRunFailure": false,
  "video": false,
  "pluginsFile": false,
  "supportFile": false,
  "blockHosts": ["cdn.jsdelivr.net"]
}