E2E 테스트의 기본 및 Cypress와 Next.js 통합

👋 안녕하세요 여러분! 오랜만에 글을 올립니다.



개발자로서 우리는 항상 사용자에게 최고의 제품을 제공하기를 원합니다. 그리고 테스트는 이 프로세스의 중요한 부분입니다. 일반적으로 사용되는 테스트 기술 중 하나는 E2E 테스트입니다.

💡 E2E 테스팅 - 기초

End to End Testing(또는 줄여서 E2E 테스트)은 애플리케이션 흐름이 예상대로 작동하는지 확인하기 위해 처음부터 끝까지 전체 소프트웨어 제품을 테스트하는 기술입니다.

E2E 테스트의 주요 목적은 실제 사용자 시나리오를 시뮬레이션하고 최종 사용자의 경험에서 테스트하는 것입니다.

📃 E2E 테스트의 이점

위험 감소

자신감 증가

비용 절감

⚡ E2E 테스트 방법

수평 E2E 테스트

수평 테스트는 최종 사용자의 관점에서 수행됩니다. 사용자가 소프트웨어를 탐색하고 해당 기능을 적절하게 사용할 수 있는지 평가합니다. 또한 사용자가 일부 소프트웨어 기능을 사용하지 못하게 할 수 있는 버그를 감지하는 데 도움이 됩니다.

수직 E2E 테스트

이 방법은 테스트가 순차적인 계층적 순서로 수행됨을 의미하는 레이어 테스트를 의미합니다. 시스템의 각 하위 구성 요소는 품질을 보장하기 위해 처음부터 끝까지 테스트됩니다.

시스템에 UI가 없거나 UI에 높은 수준의 기술이 있고 중요한 구성 요소를 테스트하는 데 사용되는 경우에 주로 수행됩니다.

❓ E2E 테스팅은 어떻게 하나요?

모든 요구 사항을 분석하십시오. 앱이 무엇을 해야 하는지에 대한 명확한 아이디어를 가지고 있습니다.

요구 사항에 따라 테스트 환경을 설정합니다.

이러한 응답을 테스트하는 데 필요한 모든 테스트 방법을 나열하십시오.

테스트 케이스를 디자인합니다.

테스트를 실행하고 결과를 기록하십시오.

⚡ E2E 테스팅 프레임워크

E2E 테스트 프레임워크는 애플리케이션의 모든 움직이는 부분이 올바르게 구성되었는지 확인하는 데 사용됩니다.

다음은 가장 인기 있는 몇 가지입니다.

셀레늄

사이프러스

오이

증언

이제 E2E Testing의 기본 개념에 익숙해졌으므로 Next.JS에서 Cypress를 사용하여 E2E Testing을 통합하는 방법을 살펴보겠습니다.

👨‍💻 E2E 테스트를 위한 Next.js와 Cypress의 통합

Now that you're familiar with the Basics of E2E Testing, let's take a look at how to get started with Cypress in Next.js

다음.JS

Next.js에 익숙하지 않은 경우 개발자와 클라이언트 모두에게 도움이 되는 몇 가지 추가 기능이 포함된 반응 프레임워크입니다.

사이프러스

Cypress는 웹용 E2E 테스팅을 위한 테스트 러너입니다.

프로젝트 설정

create next-app 예제와 함께 cypress를 사용하여 빠르게 시작할 수 있습니다.

npx create-next-app@latest --example with-cypress with-cypress-app 

기존 프로젝트의 경우 cypress 패키지를 설치하여 시작할 수 있습니다.

npm install --save-dev cypress

그런 다음 scripts 파일의 package.json 섹션에 Cypress를 추가합니다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "cypress": "cypress open",
}

그런 다음 cypress를 실행하여 권장 폴더 구조를 사용하는 예제를 생성합니다.

npm run cypress

첫 번째 Cypress 통합 테스트 만들기

두 페이지가 있다고 가정해 보겠습니다.

// pages/index.js

import Link from 'next/link'

export default function Home() {
  return (
    <nav>
      <Link href="/about">
        <a>About</a>
      </Link>
    </nav>
  )
}

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  )
}

그런 다음 탐색이 올바르게 작동하는지 테스트하려면 다음을 수행합니다.

// cypress/integration/app.spec.js

describe('Navigation', () => {
  it('should navigate to the about page', () => {
    // Start from the index page
    cy.visit('http://localhost:3000/')

    // Find a link with an href attribute containing "about" and click it
    cy.get('a[href*="about"]').click()

    // The new url should include "/about"
    cy.url().should('include', '/about')

    // The new page should contain an h1 with "About page"
    cy.get('h1').contains('About Page')
  })
})

팁: cy.visit('http://localhost:3000/') 대신 cy.visit('/') 구성 파일에서 baseUrl를 http://localhost:3000로 설정하면 cypress.json를 수행할 수 있습니다.

// cypress.json 
{
  "baseUrl": "http://localhost:3000"
}

이 시점에서 간단한 테스트 설정을 갖게 됩니다. Cypress는 실제 Next.js 애플리케이션을 테스트하고 있으므로 cypress를 시작하기 전에 Next.js 서버가 실행 중이어야 합니다.

먼저 npm run build 및 npm run start를 실행한 다음 다른 터미널 창에서 실행npm run cypress하여 Cypress를 시작합니다.

이제 cypress가 시작되고 결과를 볼 수 있습니다.

지속적 통합(CI)을 위한 추가 단계

이 시점에서 지금까지 Cypress를 실행하면 CI 환경에 적합하지 않은 대화형 브라우저가 열렸음을 알 수 있습니다.
cypress run 명령을 사용하여 헤드리스로 Cypress를 실행할 수 있습니다.
package.json 파일에서:

// package.json

"scripts": {
  // ...
  "cypress": "cypress open",
  "cypress:headless": "cypress run"
}

그것이 이 기사의 전부입니다! 여기에 몇 가지 반응을 표시하여 지원을 표시할 수 있습니다!

저자 소개

Github

Portfolio

Blog