M

MLOG

한국어

설치, 테스트 작성, 디버깅, CI/CD 통합 및 모범 사례를 다루는 강력한 엔드 투 엔드 테스트 프레임워크인 Cypress에 대한 포괄적인 가이드입니다.

Cypress: 웹 애플리케이션을 위한 최고의 엔드 투 엔드 테스트 가이드

오늘날 급변하는 웹 개발 환경에서 웹 애플리케이션의 품질과 신뢰성을 보장하는 것은 매우 중요합니다. 엔드 투 엔드(E2E) 테스트는 사용자의 관점에서 애플리케이션의 모든 구성 요소가 원활하게 함께 작동하는지 확인하는 데 중요한 역할을 합니다. Cypress는 개발자 친화적인 경험, 강력한 기능 및 뛰어난 성능을 제공하여 최고의 E2E 테스트 프레임워크로 부상했습니다. 이 포괄적인 가이드에서는 Cypress를 시작하고 웹 애플리케이션을 효과적으로 테스트하는 데 필요한 모든 것을 안내합니다.

Cypress란 무엇인가요?

Cypress는 최신 웹을 위해 구축된 차세대 프런트 엔드 테스트 도구입니다. 브라우저에서 테스트를 실행하는 기존 테스트 프레임워크와 달리 Cypress는 브라우저에서 직접 작동하여 애플리케이션의 동작에 대한 비교할 수 없는 제어 및 가시성을 제공합니다. 빠르고 안정적이며 사용하기 쉽도록 설계되어 전 세계 개발자와 QA 엔지니어 사이에서 인기 있는 선택입니다. Cypress는 JavaScript로 작성되었으며 브라우저 내에서 실행되므로 성능이 매우 뛰어나고 애플리케이션의 내부 요소에 대한 탁월한 액세스를 제공합니다.

Cypress 사용의 주요 이점

설치 및 설정

Cypress를 시작하는 것은 간단합니다. 설치 방법은 다음과 같습니다.

  1. 사전 요구 사항: 시스템에 Node.js 및 npm(Node Package Manager)이 설치되어 있는지 확인합니다. 공식 Node.js 웹사이트에서 다운로드할 수 있습니다.
  2. Cypress 설치: 터미널 또는 명령 프롬프트를 열고 프로젝트 디렉토리로 이동하여 다음 명령을 실행합니다.
    3. npm install cypress --save-dev
  3. Cypress 열기: 설치가 완료되면 다음을 실행하여 Cypress 테스트 러너를 열 수 있습니다.
    4. npx cypress open

    이 명령은 테스트를 실행하고 디버깅하기 위한 그래픽 인터페이스를 제공하는 Cypress 테스트 러너를 시작합니다.

첫 번째 Cypress 테스트 작성

웹사이트의 홈 페이지가 제대로 로드되는지 확인하는 간단한 테스트를 만들어 보겠습니다. 프로젝트의 `cypress/e2e` 디렉토리에 `example.cy.js`라는 새 파일을 만듭니다.


// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

이 테스트를 분석해 보겠습니다.

Cypress 테스트 러너에서 이 테스트를 실행하여 실제로 작동하는지 확인하십시오. 브라우저가 Cypress Kitchen Sink 웹사이트로 이동하여 "type" 링크를 클릭하고 URL을 확인하는 것을 볼 수 있습니다.

Cypress 명령

Cypress는 애플리케이션과 상호 작용하기 위한 광범위한 명령을 제공합니다. 다음은 가장 일반적으로 사용되는 명령 중 일부입니다.

이것은 Cypress에서 사용할 수 있는 많은 명령 중 일부일 뿐입니다. 전체 명령 목록과 해당 옵션은 Cypress 설명서를 참조하십시오.

Cypress의 어설션

어설션은 애플리케이션의 예상 동작을 확인하는 데 사용됩니다. Cypress는 요소의 상태, URL, 제목 등을 확인하는 데 사용할 수 있는 풍부한 내장 어설션 세트를 제공합니다. 어설션은 `.should()` 메서드를 사용하여 Cypress 명령 뒤에 연결됩니다.

다음은 몇 가지 일반적인 어설션 예입니다.

특정 요구 사항에 맞게 사용자 지정 어설션을 만들 수도 있습니다.

Cypress 테스트 작성 모범 사례

모범 사례를 따르면 더 유지 관리 가능하고 안정적이며 효율적인 Cypress 테스트를 작성할 수 있습니다. 다음은 몇 가지 권장 사항입니다.

고급 Cypress 기술

스텁 및 모킹

Cypress를 사용하면 네트워크 요청 및 응답을 스텁하여 다양한 시나리오를 시뮬레이션하고 애플리케이션의 오류 처리를 테스트할 수 있습니다. 이는 외부 API 또는 서비스에 의존하는 기능을 테스트하는 데 특히 유용합니다.

네트워크 요청을 스텁하려면 `cy.intercept()` 명령을 사용할 수 있습니다. 예를 들어, 아래 코드는 `/api/users`에 대한 GET 요청을 스텁하고 모의 응답을 반환합니다.


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

그런 다음 `cy.wait('@getUsers')`를 사용하여 가로챈 요청을 기다리고 애플리케이션이 모의 응답을 올바르게 처리하는지 확인할 수 있습니다.

로컬 스토리지 및 쿠키 사용

Cypress는 로컬 스토리지 및 쿠키와 상호 작용하기 위한 명령을 제공합니다. 이러한 명령을 사용하여 테스트에서 로컬 스토리지 및 쿠키를 설정, 가져오기 및 지울 수 있습니다.

로컬 스토리지 항목을 설정하려면 `cy.window()` 명령을 사용하여 window 객체에 액세스한 다음 `localStorage.setItem()` 메서드를 사용할 수 있습니다. 예를 들어:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

로컬 스토리지 항목을 가져오려면 `cy.window()` 명령을 사용한 다음 `localStorage.getItem()` 메서드를 사용할 수 있습니다. 예를 들어:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

쿠키를 설정하려면 `cy.setCookie()` 명령을 사용할 수 있습니다. 예를 들어:


cy.setCookie('myCookie', 'myCookieValue')

쿠키를 가져오려면 `cy.getCookie()` 명령을 사용할 수 있습니다. 예를 들어:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

파일 업로드 처리

Cypress는 테스트에서 파일 업로드를 단순화하는 `cypress-file-upload`라는 플러그인을 제공합니다. 플러그인을 설치하려면 다음 명령을 실행합니다.

npm install -D cypress-file-upload

그런 다음 `cypress/support/commands.js` 파일에 다음 줄을 추가합니다.


import 'cypress-file-upload';

그런 다음 `cy.uploadFile()` 명령을 사용하여 파일을 업로드할 수 있습니다. 예를 들어:


cy.get('input[type="file"]').attachFile('example.txt')

IFrames 사용

IFrames 테스트는 까다로울 수 있지만 Cypress는 IFrame과 상호 작용하는 방법을 제공합니다. `cy.frameLoaded()` 명령을 사용하여 IFrame이 로드될 때까지 기다린 다음 `cy.iframe()` 명령을 사용하여 IFrame의 document 객체를 가져올 수 있습니다.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress 및 CI/CD(지속적인 통합/지속적인 배포)

애플리케이션의 품질을 보장하려면 Cypress를 CI/CD 파이프라인에 통합하는 것이 필수적입니다. CI/CD 환경에서 헤드리스 모드로 Cypress 테스트를 실행할 수 있습니다. 방법은 다음과 같습니다.

  1. Cypress 설치: Cypress가 프로젝트의 종속성으로 설치되어 있는지 확인합니다.
  2. CI/CD 구성: 각 빌드 후 Cypress 테스트를 실행하도록 CI/CD 파이프라인을 구성합니다.
  3. 헤드리스로 Cypress 실행: `cypress run` 명령을 사용하여 헤드리스 모드에서 Cypress 테스트를 실행합니다.

예제 CI/CD 구성(GitHub Actions 사용):


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

이 구성은 코드가 `main` 분기로 푸시되거나 `main` 분기에 대해 풀 요청이 생성될 때마다 Cypress 테스트를 실행합니다. `cypress-io/github-action` 작업은 GitHub Actions에서 Cypress 테스트를 실행하는 프로세스를 단순화합니다.

Cypress 테스트 디버깅

Cypress는 테스트에서 문제를 식별하고 해결하는 데 도움이 되는 훌륭한 디버깅 도구를 제공합니다. Cypress 테스트 디버깅에 대한 몇 가지 팁은 다음과 같습니다.

Cypress 대 다른 테스트 프레임워크

Cypress는 강력한 엔드 투 엔드 테스트 프레임워크이지만 다른 인기 있는 옵션과 비교하는 방법을 이해하는 것이 중요합니다. 다음은 간략한 개요입니다.

프레임워크 선택은 프로젝트의 특정 요구 사항에 따라 다릅니다. Cypress는 빠르고 안정적이며 개발자 친화적인 엔드 투 엔드 테스트가 필요한 최신 웹 애플리케이션에 적합한 선택입니다.

실제 Cypress 사용 예

Cypress를 사용하여 다양한 유형의 웹 애플리케이션을 테스트할 수 있는 몇 가지 실제 예를 살펴보겠습니다.

전자 상거래 애플리케이션 테스트

Cypress를 사용하여 다음과 같은 전자 상거래 애플리케이션에서 다양한 사용자 흐름을 테스트할 수 있습니다.

사용자가 장바구니에 제품을 성공적으로 추가할 수 있는지 확인하는 Cypress 테스트의 예는 다음과 같습니다.


it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

소셜 미디어 애플리케이션 테스트

Cypress를 사용하여 다음과 같은 소셜 미디어 애플리케이션에서 사용자 상호 작용을 테스트할 수 있습니다.

사용자가 새 게시물을 성공적으로 만들 수 있는지 확인하는 Cypress 테스트의 예는 다음과 같습니다.


it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

뱅킹 애플리케이션 테스트

뱅킹 애플리케이션의 경우 Cypress를 사용하여 다음과 같은 중요한 기능을 테스트할 수 있습니다.

자금 이체를 확인하는 테스트는 다음과 같을 수 있습니다(보안을 위해 적절한 스터빙 포함).


it('Transfers funds successfully', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

결론

Cypress는 웹 애플리케이션의 품질과 신뢰성을 보장하는 데 도움이 되는 강력하고 다재다능한 엔드 투 엔드 테스트 프레임워크입니다. 개발자 친화적인 API, 강력한 기능 및 뛰어난 성능은 전 세계 개발자와 QA 엔지니어 사이에서 인기 있는 선택입니다. 이 가이드에 설명된 모범 사례를 따르면 개발 프로세스 초기에 버그를 포착하고 사용자에게 고품질 소프트웨어를 제공하는 데 도움이 되는 효과적인 Cypress 테스트를 작성할 수 있습니다.

웹 애플리케이션이 계속 발전함에 따라 엔드 투 엔드 테스트의 중요성은 더욱 커질 것입니다. Cypress를 수용하고 개발 워크플로에 통합하면 더욱 강력하고 안정적이며 사용자 친화적인 웹 환경을 구축할 수 있습니다.