[Testing] Cypress란? / 사용법

Cypress란?

웹 서비스 테스팅 앱으로
Mac, Window, Linux 모두 지원한다.

 

Cypress 설치

// node.js에서 설치
npm i cypress

JavaScript End to End Testing Framework

 

Cypress 실행하기

cypress open

실행시 화면

실행시 생성되는 파일들

 

Cypress 파일 만들기

//cypress/integration/test.js (폴더중요)

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

// 'My First Test' = 테스트 이름
// 'Does not do much!' = 함수 이름
// expect(A).to.equal(B) = A,B가 똑같으면 테스트 통과

새로운 파일을 자동으로 인식한다.

 

Cypress 테스트 하기위한 브라우저 설치

Cypress는 크롬, 파이어폭스 등 여러가지 브라우저를 지원하지만,
평소에 사용하는 브라우저는 상시 업데이트를 통해 기능이 변경되는 일이 많으므로
예상치 못한 에러가 발생하는 경우가 있다.
따로 테스트를 위한 브라우저를 설치하는 것이 좋다! ( Chromium 설치 )

Chromium Downloads Tool

현재 버전과 동일한 브라우저를 다운해주세요.

 

 

Cypress 테스트 하기

// 명령창에서 테스트 하기
// chromium 브라우저 사용해서 테스트 하기
// 테스트할 파일을 제외하고, integration 폴더 내용을 비워주세요!

cypress run --browser chromium

테스트 성공

 

Run integration 으로도 실행할 수 있다.

테스트 성공!

 

package.json에 단축명령어 만들기

// package.json
{
  "scripts": {
    "cypress": "cypress open",
    "cypress:chrome": "cypress run --browser chrome"
  }
}
// npm run cypress
// yarn cypress

 

Cypress로 사이트 접속하기

// /integration/test.js

describe("My First Test", () => {
  it("Visits the Kitchen Sink", () => {
    //cy.visit("url") 사용!
    cy.visit("https://example.cypress.io");
  });
});

접속된 모습

 

사이트에 포함되어 있는 요소 검사하기

describe("My First Test", () => {
  it("Visits the Kitchen Sink", () => {
    cy.visit("https://example.cypress.io");
    
    //cy.contain(요소) 사용! - "type" 찾기
    cy.contain("type");
  });
});

type이란 문자열을 찾았다!

 

 

찾은 요소 클릭하기

// click() 함수를 사용한다.
cy.contain("type").click()

type 이라는 글자를 클릭해서 링크로 이동했다.

 

현재 url 상태 검사하기

// url()함수로 현재 url을 가져올 수 있다.
// sould()함수로 조건에 만족하는지 검사하여, 테스트를 진행할 수 있다.
cy.url().should("include", "/commands/actions");

// url속에, "/commands/actions"문자열이 "include"되는지 테스트

테스트를 성공한 모습

 

Input 요소 찾고, 타이핑하기

cy.get('.action-email')
  .type('fake@email.com')
  .should('have.value', 'fake@email.com')
  
// action-email 이란 클래스를 가진 요소를 선택한다.
// 'fake@email.com'이란 문자열을 타이핑한다.
// shoud()함수를 통해, 'fake@email.com'이란 문자열을 값으로 가지고 있는지 테스트한다.

 

 

중간에 일시정지하기

cy.visit("https://example.cypress.io");
// 사이트 방문 후
cy.pause()
// 'type' 클릭 전
cy.contain('type').click()

중간에 멈출 수 있고, 재생버튼을 눌러 이어할 수 있다.

 

 

What is Cypress?