Cypress에서 Vue.js의 E2E 테스트를 시도합니다.

Cypress란?

E2E 테스트 프레임워크

자바 스크립트 프레임 워크의 Fronttend 개발자를 위해 만들어진 프레임 워크
싸게 End-to-End 테스트를 할 수 있다.

Javascript로 작업

Javascript를 사용하여 Dom 이벤트를 직접 조작합니다.
Dom 이벤트를 직접 조작하여 NightWatch보다 편리한 사용법을 할 수 있다.

WebDriver 불필요

Selenium의 경우와 달리 WebDriver는 필요하지 않습니다. Cypress를 설치하면 괜찮습니다.

다양한 브라우저로 테스트 가능

Chrome은 물론 Firefox, Edge, Electron, Brave에서도 움직일 수 있다.

테스트 기능

Cypress.io에 가입하면, 무료로 500건까지의 테스트 실행 화면의 레코딩도 가능. 대시보드에서 테스트 결과를 보거나 테스트 관리를 할 수 있는 기능이 있다.
htps //w w. 그리고 LS. 이 m / cyp rs / cyp rs-s sh 보아 rd-se r ゔ ぃ 세 /
컴포넌트 테스트도 할 수 있도록 Plugin이 준비되어 있다.
htps : // / cs. cyp rs. 이오 / 구이 s / 코 m 포넨 t-s s 찐 g / 닌 t 로즈 c 치온 # W 리 친 g - m 포넨 t-sts

설치

npm을 사용한다면 쉽게 설치할 수 있습니다.

npm install cypress --save-dev

yarn을 사용하는 경우 다음 명령을 실행합니다.

yarn add cypress --dev

테스트 실행

기본적으로 프로젝트 루트에서 다음 명령을 실행하여 테스트 러너를 엽니다.

./node_modules/.bin/cypress open

npx 명령으로도 실행할 수 있다. (npx는 npm v5.2부터 포함되어 있다.)

npx cypress run

또는 yarn에서 실행.

yarn run cypress open

명령을 실행하면 테스트 러너가 시작되므로 테스트 목록을 보거나 테스트를 실행합니다.

아래 화면이 나오면 테스트 준비가 완료.



tests 탭에 모든 js 파일이 표시됩니다.
테스트용 js 파일의 리스트는 자동적으로 감지해 준다. 샘플 테스트가 들어있는 기본 폴더는/cypress/integration

테스트를 실행하면 시스템의 브라우저 화면에서 테스트가 실행되어 브라우저 콘솔에서 결과를 실시간으로 확인할 수 있습니다.

코드 작성

테스트 코드는 아래의 4단계에 따라 작성한다.

테스트 페이지에 연결

요소 지정

요소를 조작하고 움직이기(상호작용)

페이지 내용에 대한 assertion 실행

첫째, 새로운 js 파일을 만듭니다./cypress/integration 아래에 sample_spec.js 파일을 만듭니다.
테스트 코드의 기본 형식은 다음과 같습니다.

describe('Cypressテスト', () => {

it('テスト名', () => {

    // ここにテスト内容を作成
    expect(true).to.equal(false)
    })
})

페이지 이동

테스트할 페이지에 연결합니다.

cy.visit('https://example.cypress.io')

요소 확인

'type'을 포함하는 요소를 찾습니다.

cy.contains('type')

요소 클릭

'type'이 포함된 요소를 찾아 클릭합니다.

cy.contains('type').click()

assertion

.should()를 이용하여 assertion을 생성한다.

// urlが'/commands/actions'を含めているかチェック
cy.url().should('include', '/commands/actions')

테스트 화면

아래의 코드로 테스트를 실행해 보았다.
테스트 러너에서 작성한 파일을 클릭하면 브라우저가 열리고 자동으로 테스트 조작이 시작된다.

describe('Cypressテスト', () => {
    it('テスト1', () => {

        // ここにテスト内容を作成
        cy.visit('https://example.cypress.io')
        // Cypressはコンテンツがロードされるまで待ってくれる
        // cy.contains('type')
        // 'type'を含む要素を探して、クリックする
        cy.contains('type').click() 
        // クリックの結果、urlが'/commands/actions'を含めているかチェック
        cy.url().should('include', '/commands/actions')
    })
})

결과는 이런 느낌.



API는 이쪽.
htps : // / cs. cyp rs. 이오 / 아피 / 타 b 〇 오 f 콘텐 ts