Cypress - 테스팅 프레임워크

싸이프러스는 테스팅 프레임워크이다. 

• E2E 테스트
• 통합 테스트
• 단위 테스트

공식홈페이지 : https://www.cypress.io/

JavaScript End to End Testing Framework

 

기능

• 시간 여행
• 디버깅가능성
• 자동대기
• Spies, Stubs, Clocks
• 네트워크 트래픽 제어
• 일관된 결과
• 스크린샷 및 비디오
• 크로스브라우저 테스팅

 

장점

• 브라우저를 이용하여 테스트하기 때문에, 따로 서버, 드라이버를 포함한 기타 dependency가 없다.
• 실시간 테스트를 볼 수 있다.
• 브라우저 개발자 도구에 액세스할 수 있다.
• 임의의 http 호출을 할 수 있어서, api 테스트에 사용할 수 있다.

 

설치

현재 기준으로 Cypress는 Node 12 버전이나 14버전 이상을 갖추고 있어야 한다.

$ yarn add cypress --dev

 

설치에 대한 자세한 내용은 아래의 링크에 자세히 나와있다.

https://docs.cypress.io/guides/getting-started/installing-cypress#npm-install

Installing Cypress | Cypress Documentation

 

테스트

https://docs.cypress.io/guides/getting-started/writing-your-first-test#Add-a-test-file

 

cypress가 잘 설치되었다면 아래의 CLI를 입력해보자!

$ node_modules/.bin/cypress open

or

$ yarn cypress open

 

그러면 아래와같은 창을 볼 수 있게 되며, 아래의 New Spec File 버튼을 눌러서, test.spec.js 파일을 만들면 내 프로젝트 폴더에서 cypress/intergration/test.spec.js라는 파일을 볼 수 있다.

 

text.spec.js에 첫 번째 테스트코드를 작성 후, cypress 앱에서 test.spec.js 파일을 클릭하여 테스트를 실행시켜보자!

describe("My first Test", function () {
  it("Does not do much", function () {
    expect(true).to.equal(true);
  });
});

 

아래와 같이 테스트가 돌아가고 있는 것을 확인할 수 있다.

 

테스트코드를 아래와 같이 바꾼다면, 테스트에 실패되었기 때문에 아래와 같은 화면을 볼 수 있다.

describe("My first Test", function () {
  it("Does not do much", function () {
    expect(true).to.equal(false); //true와 false는 같지 않으므로 테스트에 실패한다.
  });
});

 

이번엔 진짜 테스트 코드 작성을 해보자

describe("My first Test", function () {
  it("Click the link", function () {
    //테스트를 하려는 사이트에 이동
    cy.visit("https://example.cypress.io");

    //cy.contains()를 이용하여 요소를 찾고,
    //찾은 요소에 click()을 붙이면 요소를 클릭할 수 있다.
    cy.contains("type").click();

    //요소를 클릭하여 들어간 page url에 /commands/actions가 포함되는지 확인한다.
    cy.url().should("include", "/commands/actions");
  });
});

 

위의 코드에 대한 테스트는 이렇게 된다. 

 

더 다양한 명령어들을 사용해보자

• get('')
• type('')
• should('have.value', '')

describe("My first Test", function () {
  it("Gets, types and asserts", function () {
    //테스트를 하려는 사이트에 이동
    cy.visit("https://example.cypress.io");

    //cy.contains()를 이용하여 요소를 찾고,
    //찾은 요소에 click()을 붙이면 요소를 클릭할 수 있다.
    cy.contains("type").click();

    //요소를 클릭하여 들어간 page url에 /commands/actions가 포함되는지 확인한다.
    cy.url().should("include", "/commands/actions");

    //get()을 통하여 css 클래스 요소를 찾을 수 있다.
    //type()을 통하여 선택된 요소(input)에 값을 입력할 수 있다.
    //should()의 have.value를 통하여 요소의 value에 입력값이 잘 담겨져있는지 확인할 수있다.
    cy.get(".action-email")
      .type("fake@email.com")
      .should("have.value", "fake@email.com");
  });
});

 

콘솔 창에서 추가정보 또한 확인할 수 있다.