Cypress입문~테스트의 작성과 실행~

시작에 앞서

저번의 포스팅에서는 사이프레스의 인스톨부터 실행방법까지 알아보았습니다.
Cypress입문~인스톨부터 기동까지~

Cypress입문~인스톨부터 실행까지~

테스트의 작성은 스팩 spec이라는 파일에서 작성합니다. 이번에는 이 파일의 기본적인 작성법과 테스트의 실행에 대해 알아 봅시다.

Cypress의 작성방법

Cypress에서 사용하는 기본적인 커멘드를 소개하겠습니다.

cy.visit('방문할 URL')  //web사이트의 방문

cy.get('DOM 태그')  //DOM의 취득

cy.contain('문자열')  //문자열의 존재 확인

cy.click()  //클릭

cy.type('문자열')  //문자열의 입력

cy.should('테스트 타입')  //assert
cy.should('테스트 타입', 비교치)
cy.should(메소드)

cy.wait(밀리 세컨드)  //대기

테스트의 실행

테스트의 실행을 위해 간단한 로그인 화면을 만들어 보았습니다.

로그인 기능을 확인할 테스트를 한번 작성해 봅시다.

cypress를 인스톨하면 인스톨 한 디렉토리에 'cypress'의 디렉토리가 자동적으로 생성됩니다.
일반적으로 그 아래의 'Integration'폴더에 테스트를 위한spec파일이 작성 합니다.
샘플 테스트로서 'Untilted.spec.js'를 작성해 보았습니다.

describe('example my-app', () => {
    beforeEach(() => {
      cy.visit('http://localhost:3000')
    })

    //초기화면의 확인
    it('check main page', () => {
        cy.contains('ID:');
        cy.contains('PW:')
    })

    //로그인 테스트
    it('login test', () => {
        cy.get('input[name="id"]').type('admin')
        cy.get('input[name="pw"]').type('admin')
        cy.get('button').click()

        cy.wait(1000)

        cy.contains('ログイン成功')
    })
})

cypress의 테스트를 위해 먼저 기동을 해 봅시다.

mpx cypress open

cypress가 기동이 되면 브라우저가 열립니다.
'Tests'탭에는 실행 할 수 있는 테스트, 즉 작성되어있는 spec파일이 표시됩니다.
테스트는 spec별로 실행되어, 실행하고싶은 테스트 파일을 클릭하면 자동적으로 테스트가 실행됩니다.

실행후의 화면은 위와 같습니다.
화면의 좌측은 실행한 테스트의 코드와 pass/fail의 테스트 결과가 표시됩니다.
우측은 실제 테스트를 실시한 화면이 표시됩니다.

위의 화면은 pass의 경우입니다. fail의 경우도 확인해 봅시다.
Untilted.spec.js에 이하의 코드를 적어봅시다.

//로그인 테스트-error
    it('login test2', () => {
        cy.get('input[name="id"]').type('abc')
        cy.get('input[name="pw"]').type('abc')
        cy.get('button').click()

        cy.wait(1000)

        cy.contains('ログイン成功')
    })

이 테스트를 실행하면

좌측에 에러 메세지가 출력됩니다.

이렇게 실행한 테스트는 동영상이나 스크린샷으로 작성하거나, 대쉬보드를 통해 팀 멤버들과 공유하거나 테스트의 관리도 할 수 있습니다.
이 기능에 대해서는 다음 포스팅에서 알아보도록 합시다.