Cypress - 테스트 작성 (3)

이번 편에서는 Cypress를 이용해 첫 테스트 코드를 작성해 보겠습니다.

STEP1: 테스트 파일 추가

npm 설치가 완료되고 실행까지 문제가 없었다면 이제 첫 테스트 파일을 만들어 시험해 볼 수 있습니다.

1. sample_spec.js 파일을 만드세요.
2. Cypress가 사양 목록을 업데이트하는걸 확인하세요.
3. Cypress Test Runner를 시작하세요.
   
   
   

1. 테스트 파일 추가

Cypress를 설치한 프로젝트안에 cypress/integration 폴더에 새로운 파일을 만들어 봅시다.

sample_spec.js 만들기

$ touch {your_project}/cypress/integration/sample_spec.js
# cypress/integration 폴더에 sample_spec.js 파일을 생성합니다.

해당 파일을 만들면 Cypress Test Runner가 즉시 통합 테스트 목록에 해당 파일을 표시해 줍니다. 아직 테스트 코드를 작성하지 않아도 sample_spec.js 파일만 클릭하면 바로 Cypress가 브라우저를 시작하는 것을 볼 수 있습니다.

테스트 코드를 작성하지 않고 sample_spec.js 파을을 열어 브라우저를 실행시키면 Cypress가 테스트를 찾을 수 없다는 메시지를 표시합니다. 이것은 정상입니다. 아직 어떠한 테스트 코드를 작성하지 않았습니다. 테스트 파일의 구문을 분석하는 중에 오류가 발생하는 경우에도 이 메시지가 표시됩니다. Cypress가 테스트를 읽지 못하게하는 구문 또는 구문 분석 요류가 있는지 콘솔을 검사 하기위해 항상 Dev Tools를 열 수 있습니다.

2. 테스트 코드 작성

테스트 파일 추가 첫 테스트 코드를 작성하십시요

1. 첫 성공이 반환되는 테스트 코드를 작성하세요.
2. 첫 실패가 반환되는 테스트 코드를 작성하세요.
3. Cypress가 실시간으로 Load 되는것을 확인하세요.

새 테스트 파일을 계속 수정/저장 하면 브라우저가 자동으로 다시 Load 되는걸 볼 수 있습니다.

describe ('나의 첫 번째 테스트!!', () => {
    it ('간단할걸로 해봅시다!', () => {
        expect(true).to.equal(true);
    });
});

이렇게 코드를 작성하고 저장하면 브라우저가 다시 Load 됩니다.

만약 자동 Load 가 되지않는다면, Cypress 브라우져의 Reload 버튼으로 다시 Load 해야 합니다. 위의 코드는 복잡한 기능은 없지만 결과는 통과입니다!!

이제 실패 결과를 반환하는 코드를 작성해 봅시다.

describe ('나의 첫 번째 테스트!!', () => {
    it ('간단할걸로 해봅시다!', () => {
        expect(true).to.equal(false);
    });
});

다시 저장하면 Cypress가 실패한 테스트를 빨간색으로 표시합니다.

STEP2: 테스트 작성

견고한 테스트는 일반적으로 3단계를 포함합니다.

1. 응용 프로그램 상태를 설정하세요.
2. 행동을 취하세요.
3. 결과 응용 프로그램 상태에 대한 어설션을 만드세요.
   
   

   1. 단계 : 페이지 방문

   먼저 웹페이지를 방문하는 코드를 작성 해봅시다. 이 예제는 특정 웹사이트를 방문하여 테스트 할 페이지를 찾을 필요없이 바로 Cypress에서 시험해볼 수 있습니다. 사용자는 방문하려는 URL을 테스트 코드에 전달할 수 있습니다. cy.visit( URL )

이전 테스트 코드를 페이지 방문 코드로 변경해서 테스트를 진행해보세요.

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
  })
})

파일을 저장하고 Cypress Test Runner로 다시 전환하세요. 그럼 다음과 같은 사항을 확인할 수 있습니다. visit 을 통한 새로운 명령 실행합니다. 해당 URL 의 웹사이트로 페이지 전환합니다. 추가적인 테스트 코드를 작성하지 않았으므로 테스트는 성공을 반환합니다. 페이지가 로딩 완료될 때까지 디스플레이 합니다.

2. 단계 : 요소 쿼리

이제 정상적으로 페이지가 Load 되었으므로 해당 페이지에서 테스트할 코드를 작성해야 합니다.페이지에서 원하는 요소를 선택하려면 어떻게 해야 할까요? 사용자는 contains라는 명령어를 통해 원하는 내용을 가진 개체를 선택할 수 있습니다. cy.contains ( 찾을 내용.. )

그렇다면 페이지의 type이란 글씨의 개체를 선택해 봅시다.

describe('My First Test', () => {
  it('finds the content "type"', () => {
    cy.visit('https://example.cypress.io')
 
    cy.contains('type') // 'type' 이란 글자의 개체를 선택합니다.
  })
})

실행하면, Cypress 는 해당 페이지에서 ‘type’ 이란 글자를 가진 개체를 선택합니다. 그리고 결과는 성공을 반환합니다. 만약 없는 내용 (ex: hype)을 선택 하려고 한다면, Cypress 는 실패값을 반환할 것입니다.

3. 단계 : 요소 클릭

이제 선택한 요소를 클릭해 봅시다. 간단하게 click() 이란 명령어를 이용해 클릭을 테스트 할 수 있습니다.

describe('My First Test', () => {
  it('clicks the link "type"', () => {
    cy.visit('https://example.cypress.io')
 
    cy.contains('type').click()
  })
})

[tip] Cypress는 메서드 체인을 사용할 수 있습니다.

사용자는 ‘type’이란 요소를 찾았고 해당 태그는 a 태그로 이동하는 경로를 가지고 있습니다. click() 코드를 추가하고 테스트를 진행하면 해당 페이지로 이동하게 되면, 사용자는 새로운 페이지에서 테스트를 위한 코드를 작성할 수 있습니다.

4. 단계 : 어설션 만들기 (Assertion)

클릭한 새 페이지의 내용에서 테스트를 위한 어설션을 작성해 보겠습니다. 새 URL이 사용자가 원했던 예상 URL인지 확인하고 싶다고 가정해 봅시다. URL을 조회하고 URL에 대한 어설션을 연결하여 확인할 수 있습니다.

describe('My First Test', () => {
  it('clicking "type" navigates to a new url', () => {
    cy.visit('https://example.cypress.io')
 
    cy.contains('type').click()
 
    // 새로운 URL에 이것이 포함되었는 확인합니다. >  '/commands/actions'
    cy.url().should('include', '/commands/actions')
  })
})

그리고 추가적으로 DOM 요소를 선택하여 추가적인 어설션을 만드는 것을 수행해 봅시다. cy.get( css 셀럭터 ) 를 이용하면 쉽게 DOM 요소를 선택할 수 있습니다. 이는 jQuery 셀렉터와 유사합니다. 그렇다면 추가적으로 .action-email 이란 클래스명을 가진 input 요소를 선택해 value를 집어넣고 해당 input의 value가 특정 값과 동일한지 테스트 해봅시다.

describe('My First Test', () => {
  it('Gets, types and asserts', () => {
    cy.visit('https://example.cypress.io')
 
    cy.contains('type').click()
 
    // 새로운 URL에 이것이 포함되었는 확인합니다. >  '/commands/actions'
    cy.url().should('include', '/commands/actions')
 
    // input 요소를 선택하고 value 를 타이핑 합니다. 그리고 해당 input 의 value 를 검증합니다.
    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

요약

1. 방문: http://example.cypress.io
2. 내용이 있는 요소를 찾는다 : ex) type
3. 찾은 요소를 클릭한다 : click()
4. URL 을 조회한다 : cy.url()
5. 다음을 표기하고 주장 : should(‘include’, ‘/commands/actions’); → include 를 통해 해당 문자가 포함되었는지 검증
6. .action-email 클래스명의 Input DOM을 찾는다 : cy.get(‘.action-email’)
7. 선택된 input DOM에 ‘fake@email.com’ 을 입력한다 : .type(‘fake@email.com’)
8. Input 이 ‘fake@email.com’ 이란 value 값을 가지고 있는지 검증한다 : .should(‘have.value’, ‘fake@email.com’)

Cypress.io
참고: 좀더 자세한 설명을 원하시면, Cypress 공식 홈페이지에서 확인하실 수 있습니다.