Cypress - 프런트 엔드 개발자를 위한 테스트 도구입니다.

Cypress는 최신 웹용으로 구축된 차세대 프런트 엔드 테스트 도구입니다.

JavaScript 도구 전용입니다. 일반적으로 최신 JavaScript 프레임워크를 사용하여 웹 애플리케이션을 구축하는 개발자 또는 QA 엔지니어는 Cypress를 사용합니다.

Cypress를 사용하면 종단 간 테스트, 통합 테스트 및 단위 테스트와 같은 모든 유형의 테스트를 작성할 수 있습니다. Cypress는 브라우저에서 실행되는 모든 것을 테스트할 수 있습니다. Cypress는 로컬에 설치된 무료 오픈 소스 Test Runner와 테스트 기록을 위한 대시보드 서비스로 구성됩니다.

참고 - Cypress는 자동화 도구가 아니라 테스트 도구입니다.

특징

시간 여행: Cypress는 테스트가 실행될 때 스냅샷을 찍습니다. 명령 로그의 명령 위로 마우스를 가져가면 각 단계에서 정확히 어떤 일이 발생했는지 확인할 수 있습니다.

디버깅 가능성: 개발자 도구에서 직접 디버깅할 수 있습니다. 디버깅 번개를 빠르게 만드는 읽기 쉬운 오류 및 스택 추적을 제공합니다.

자동 대기: 테스트에 대기 또는 휴면을 추가하지 마십시오. Cypress는 계속 진행하기 전에 자동으로 명령과 어설션을 기다립니다. 더 이상 비동기 지옥은 없습니다.

스파이, 스텁 및 시계: 기능, 서버 응답 또는 타이머의 동작을 확인하고 제어합니다. 단위 테스트에서 좋아하는 동일한 기능을 바로 사용할 수 있습니다.

네트워크 트래픽 제어: 서버를 사용하지 않고도 에지 케이스를 쉽게 제어, 스텁 및 테스트합니다. 원하는 대로 네트워크 트래픽을 스텁할 수 있습니다.

일관된 결과: Cypress 아키텍처는 Selenium 또는 WebDriver를 사용하지 않습니다. 이것이 박편이 없는 빠르고 일관되며 신뢰할 수 있는 테스트인 이유입니다.

스크린샷 및 비디오: 실패 시 자동으로 촬영된 스크린샷 또는 CLI에서 실행할 때 전체 테스트 스위트의 비디오를 봅니다.

빠름: 테스트가 앱처럼 브라우저 내에서 실행되기 때문에 빠릅니다.

해보면서 배워보자

이 데모에서는 JB hifi(https://www.jbhifi.com.au/) 웹사이트를 자동화하고 체크아웃 기본 흐름을 테스트합니다.

내에서 결제할 수 있는 전체 코드github

1 데모를 위한 전제 조건

Nodejs(버전 8 이상) 및 NPM 설치

편집기 - 선택한 코드 편집기입니다. Visual Studio 코드를 사용하고 있습니다.

2 프로젝트 설정

a) 이름이 Cypress인 폴더를 만듭니다.

b) VScode로 폴더 열기

c) VScode 내에서 터미널을 열고 아래 명령을 실행하여 package.json을 생성합니다.

이렇게 하면 NPM 명령을 사용할 수 있도록 폴더가 초기화됩니다.

npm init -y

d) 아래 명령을 사용하여 NPM에서 Cypress를 설치해 봅시다.

npm install cypress

e) 아래 명령을 사용하여 로컬에서 패키지 명령을 실행합니다.

npx cypress open

위의 명령은 UI를 열고 내부에 많은 폴더가 있는 cypress 폴더와 우리 폴더에 cypress.json을 생성합니다.

3 첫 번째 테스트 케이스 작성

cypress/integration 폴더 안에 firstTest.js라는 이름의 테스트 파일을 생성하고 아래 코드를 붙여넣습니다.

describe('My First Test', function() {
  it('select product on JB hifi and checkout', function() {
    // set up view port
    cy.viewport(1440,1200)

    // Visit target URL
    cy.visit('https://www.jbhifi.com.au/')

    // hover over the top menu
    cy.get('#top-menu > :nth-child(2) > :nth-child(1)').trigger('mouseover')

    // select Apple MacBooks from top navbar
    cy.get('a[data-nav-title="Apple MacBooks "]').click()

    // filter by computer type
    cy.get('#collection-search-facet-0 > :nth-child(1) > .ais-root > .ais-body > .ais-refinement-list--list > :nth-child(1) > div > .ais-facet--label > input').click()

    // filter by computer price 
    cy.get(':nth-child(7) > .ais-price-ranges--link > div > .ais-facet--label1').click()

    // add to cart the mackbook
    cy.get(':nth-child(1) > .ais-hit > .ais-hit--cart > .ais-hit--cart-button > svg').click()

    // check the count of item added
    cy.get('#cart-count').contains('1')

    // go to my cart
    cy.get('#cart-count').click()

    // wait for 1000ms to open modal
    cy.wait(1000)

    // check cart modal is open
    cy.get('#mini-cart').and('be.visible') 

    // click on view cart
    cy.scrollTo('top')

    // click on view cart button
    cy.get('#collect-checkout > span').click() 

    // Finally check you have proceed to checkout button
    cy.get('.checkout-btn > .btn').contains('Proceed to Checkout')
  })

4) 테스트 케이스를 실행하자

npx cypress open

실행하려는 테스트를 선택하면 UI 창이 열립니다. 우리의 경우 firstTest.js



firstTest.js를 클릭하면 테스트가 트리거됩니다. 아래와 같은 출력이 표시됩니다.

5) 성공 출력

6) 오류 출력

오류가 발생하면 매우 설명적인 방식으로 오류를 표시합니다.

6) Github 코드 및 전체 비디오

아래 비디오를 클릭하면 cypress가 작동하는 모습을 볼 수 있습니다.

내에서 결제할 수 있는 전체 코드github

7) 참고문헌 -

https://docs.cypress.io/api/commands/scrollto.html#Syntax

https://docs.cypress.io/guides/references/configuration.html#Command-Line