🏓 Cypress

🤩 E2E테스트란

개발물을 사용자관점에서 테스트 하는 방법

결과물이 화면에 예상한대로 나오는지 테스트하는방법

😆 Cypress 이란

Cypress는 Javascript E2E 테스트 도구중 하나이다

 

 😝 설치

설치는 생각보다 가능하다

npm install cypress --save-dev

 

🚚  Cypress 환경설정 정리

cypress 환경설정을 여러가지 할 수 있다.

url ,환경변수, 화면사이즈 지정 , 타임아웃 등등 

현재까지 알아본것은 아래와 같다

기능설명예시

테스트 기본 URL 설정	테스트 실행 시 기준이 되는 기본 주소를 지정합니다.	baseUrl: 'http://localhost:5173'
테스트 파일 경로 지정	Cypress가 테스트 파일을 찾는 경로를 정의합니다.	specPattern: 'cypress/e2e/**/*.cy.ts'
환경 변수 설정	API 주소, 토큰 등 테스트에서 사용할 환경 변수를 지정합니다.	env: { apiUrl: 'https://api.example.com' }
플러그인 및 이벤트 설정	테스트 실행 전후 이벤트나 플러그인을 등록합니다.	setupNodeEvents(on, config) { ... }
리트라이(재시도) 횟수 설정	테스트 실패 시 자동 재시도 횟수를 지정합니다.	retries: 2
리포터 설정	테스트 결과를 다양한 리포터로 출력합니다.	reporter: 'junit'
리포터 옵션 설정	리포터의 상세 저장 형식이나 경로를 지정합니다.	reporterOptions: { mochaFile: 'results/test.xml' }
뷰포트 크기 설정	브라우저 창 크기를 설정하여 반응형 테스트에 활용합니다.	viewportWidth: 1280, viewportHeight: 720
스크린샷 / 비디오 설정	테스트 중 스크린샷과 비디오를 저장할지 여부를 설정합니다.	video: true, screenshotOnRunFailure: true
커맨드 타임아웃 설정	각 Cypress 명령어의 최대 대기 시간을 지정합니다.	defaultCommandTimeout: 8000

 

🎿 Cypress 사용법

크게 4가지가 있다

• 요소 탐색 및 선택
• 사용자 입력 시뮬레이션
• 검증 (Assertions)
• 네트워크 요청 (Intercept / Wait)

요소 탐색 및 선택

cy.visit(url)	특정 페이지로 이동	cy.visit('/login')
cy.get(selector)	DOM 요소 선택	cy.get('#username')
cy.contains(text)	특정 텍스트 포함 요소 선택	cy.contains('로그인')
cy.find(selector)	특정 요소 내부 탐색	cy.get('.form').find('input')
cy.first() / cy.last()	첫 번째 / 마지막 요소 선택	cy.get('li').first()
cy.eq(index)	N번째 요소 선택	cy.get('li').eq(2)

 

사용자 입력 시뮬레이션

명령어설명예시

cy.type(text)	텍스트 입력	cy.get('input[name=email]').type('test@test.com')
cy.clear()	입력 필드 비우기	cy.get('input').clear()
cy.click()	클릭	cy.get('button').click()
cy.check() / cy.uncheck()	체크박스 선택 / 해제	cy.get('#agree').check()
cy.select(value)	<select> 옵션 선택	cy.get('select').select('Option 1')

검증 (Assertions)

명령어설명예시

cy.should(assertion, value)	단일 어설션	cy.get('h1').should('contain', 'Welcome')
cy.should('have.class', 'active')	클래스 확인	cy.get('button#submit').click().should('have.class', 'active')
cy.should('be.visible') / cy.should('not.exist')	표시/부재 상태 확인	cy.get('.modal').should('be.visible')cy.get('.loading').should('not.exist')
cy.url().should('include', value)	URL 포함 여부 검증	cy.url().should('include', '/dashboard')
cy.title().should('eq', value)	페이지 타이틀 검증	cy.title().should('eq', 'My App')

네트워크 요청 (Intercept / Wait)

명령어설명예시

cy.intercept(method, url)	API 요청 가로채기	cy.intercept('GET', '/api/user').as('getUser')
cy.wait(alias)	요청 완료 대기	cy.wait('@getUser')
cy.request(url)	HTTP 요청 보내기	cy.request('POST', '/api/login', { id: 'a', pw: 'b' })
.as(aliasName)	alias(별칭) 등록	cy.intercept('GET', '/api/user').as('getUser')
cy.get('@alias')	alias 참조	cy.get('@submitBtn').click()

 

 

🏓 Cypress 실행

 npx cypress open

 

해당 명령을 통해 실행한다

 

 

🪃 📅 Cypress.confing.ts(js)

cypress환경설정 파일이다 baseUrl,env,viewportWidth 정도로만 설정하였다.

외에 설정들은 cypress공식홈페이지에서도 확인이가능하다

 

import { defineConfig } from "cypress";
import fs from "fs";
type EnvDataType = {
  baseUrl: string;
};
const envName = process.env.CYPRESS_ENV || "dev";
const envPath = `cypress.env.${envName}.json`;
let envData: EnvDataType = {
  baseUrl: ""
};
if (fs.existsSync(envPath)) {
  envData = JSON.parse(fs.readFileSync(envPath, "utf-8"));
}
export default defineConfig({
  e2e: {
    baseUrl: envData.baseUrl, // 기본 URL
    env: envData, // 환경변수
    viewportWidth: 1920 // 너비 1920
  }
});

 

 

🪁 Cypress 예제 코드

간단한 테스트 코드 작성을 하고자 한다.

단순 방문후 "로그인"이 있는지 확인하고자 한다

describe("main view E2E testing", () => {
  it("로그인 텍스트가 있는지 확인한다", () => {
    // 루트 진입
    cy.visit("/");

    // 로그인 텍스트가 있는지 확인한다
    cy.contains("로그인");
  });
});

export {};

 

🚡 회원가입 화면 테스트코드 작성

간단한 입력폼이 있다

이름,나이,번호,성별,도시가 있고

그리고 submit 버튼을 통해 해당값을 초기화 하는 기능이 있다

 

1. 이름,나이,번호,성별,도시를 입력 및 선택한다
2. submit을 통해 값을 초기화한다

describe("회원가입 테스트", () => {
  it("회원가입 폼 입력 ", () => {
    cy.visit("/signup");

    // 이름 입력
    cy.get("input").eq(0).type("김아무개");
    // 나이
    cy.get("input").eq(1).clear().type("33");
    // 번호
    cy.get("input").eq(2).clear().type("01022223333");
    // radio 선택
    cy.get("input[type='radio'][value='man']").check();
    // v-select 선택
    cy.get("[data-cy='city-select'] .v-field__input").click();
    cy.contains(".v-list-item", "California").click();
    // Submit 버튼 클릭
    cy.get("button[type='submit']").click();
  });
});
export {};

🚞 Home화면 테스트코드 작성

홈 화면에서는 네이버 뉴스를 검색하는 기능이다

여기서는 특별하게 cypress를 인터셉터를 통해 데이터를 모킹하고자 한다

 

1. 홈 화면에 진입하다
2. 네이버 뉴스를 조회한다
3. 검증은 row 개수를 확인한다

describe("Home View Testing", () => {
  it("네트워크 요청 (Intercept / Wait)", () => {
    // 네이버 api 인터셉터
    cy.intercept("GET", "/api/navernews*", {
      total: 949,
      lastBuildDate: "Thu, 20 Nov 2025 08:21:37 +0900",
      display: 100,
      start: 1,
      items: [
        {
          title: "세상의 모든 공간을 PLAY하다…<b>어플레이즈</b>(APLAYZ) 배정진 대표",
          originallink: "https://www.venturesquare.net/1014661",
          link: "https://www.venturesquare.net/1014661",
          description: "플랫폼, <b>어플레이즈</b>(APLAYZ) 배정진 대표 식당, 카페, 전시장, 그리고 차량까지. 어디서나... 뮤직테크 스타트업 <b>어플레이즈</b>(APLAYZ)는 그 일상적 배경음을 데이터와 인공지능으로... ",
          pubDate: "Tue, 18 Nov 2025 09:09:00 +0900"
        },
        {
          title: "강남구, 스페인 ‘스마트시티 박람회’ 참가... 457만불 규모 상담 성과",
          originallink: "https://weeklytrade.co.kr/news/view.html?section=1&category=160&item=&no=97212",
          link: "https://weeklytrade.co.kr/news/view.html?section=1&category=160&item=&no=97212",
          description: "▲‘<b>어플레이즈</b>’는 인공지능을 활용해 공간별로 어울리는 음악을 자동으로 추천하는 시스템을 선보였다. ▲‘큐빅’은 공공 데이터를 안전하게 활용할 수 있도록 개인정보 보호 기능이 강화된 언어처리 기술을... ",
          pubDate: "Tue, 11 Nov 2025 01:50:00 +0900"
        }
      ]
    }).as("naverNews");
    cy.visit("/");
    // 완료를 대기힌다
    cy.wait("@naverNews");

    // 방문검증
    cy.url().should("include", "/");
    // 실제 Row 개수 검증
    cy.get("table tbody tr").should("have.length", 2);
  });
});

export {};

 

 

여기서 주목할점은 intercept를 통해 네트워크를 가짜로 구현할 수 있다는 점이다.

여기서는 2개정도 리턴하게끔 가짜로 구현하였고,

실제 로우 개수가 2개인지 검증한다

// 외부 의존성 잇는것들을 가짜로 구현한다.
cy.intercept("GET", "/api/navernews*", {
      total: 949,
      lastBuildDate: "Thu, 20 Nov 2025 08:21:37 +0900",
      display: 100,
      start: 1,
      items: [
        {
          title: "세상의 모든 공간을 PLAY하다…<b>어플레이즈</b>(APLAYZ) 배정진 대표",
          originallink: "https://www.venturesquare.net/1014661",
          link: "https://www.venturesquare.net/1014661",
          description: "플랫폼, <b>어플레이즈</b>(APLAYZ) 배정진 대표 식당, 카페, 전시장, 그리고 차량까지. 어디서나... 뮤직테크 스타트업 <b>어플레이즈</b>(APLAYZ)는 그 일상적 배경음을 데이터와 인공지능으로... ",
          pubDate: "Tue, 18 Nov 2025 09:09:00 +0900"
        },
        {
          title: "강남구, 스페인 ‘스마트시티 박람회’ 참가... 457만불 규모 상담 성과",
          originallink: "https://weeklytrade.co.kr/news/view.html?section=1&category=160&item=&no=97212",
          link: "https://weeklytrade.co.kr/news/view.html?section=1&category=160&item=&no=97212",
          description: "▲‘<b>어플레이즈</b>’는 인공지능을 활용해 공간별로 어울리는 음악을 자동으로 추천하는 시스템을 선보였다. ▲‘큐빅’은 공공 데이터를 안전하게 활용할 수 있도록 개인정보 보호 기능이 강화된 언어처리 기술을... ",
          pubDate: "Tue, 11 Nov 2025 01:50:00 +0900"
        }
      ]
    }).as("naverNews");
    

 // 실제 Row 개수 검증
 cy.get("table tbody tr").should("have.length", 2);

 

🛵  CypressView화면 테스트 코드작성

해당화면에서는

* h1텍스트 검증

* 버튼활성화 시에 색상변경 검증

* 체크박스 클릭시에 h3 visible/invisible 하는지 검증

* 페이지 title 검증

describe("Cypress View Testing", () => {
  it(" 검증 (Assertions)", () => {
    cy.visit("/cypressview");

    // 방문검증
    cy.url().should("include", "/cypressview");

    // h1 텍스트 검증
    cy.get("h1").contains("H1");
    // 버튼 활성화
    cy.get("button").click().should("have.class", "bg-indigo-darken-3");

    // visible/invisible
    cy.get(".v-switch input[type='checkbox']").check({ force: true });
    cy.get("h3").should("be.visible");
    cy.get(".v-switch input[type='checkbox']").uncheck({ force: true });
    cy.get("h3").should("not.exist");

    // 타이틀 검증
    cy.title().should("eq", "MAXGUN");
  });
});
export {};

 

 

📈 command.ts

반복적인 코드에 대해서 모듈화하여 재사용하는데 사용

// cypress/support/commands.ts
/**
 * cypress login command
 */
export const login = () => {
  // 로그인 이동
  cy.visit("/login");
};
export {};
```

// cypress/e2e/spec.cy.ts
import { login } from "../support/commands";

describe("로그인 방문 테스트", () => {
  before(() => {
    // 반복코드 적용
    login();
  });

  it("로그인 성공", () => {
    // 로그인 폼 입력
    cy.get("input").eq(0).type("cdg@aplayz.co.kr");
    cy.get("input").eq(1).type("chleorjs12@");
    // 로그인 버튼 클릭
    cy.get("button").click();
    // main 화면 이동 확인
    cy.url().should("include", "/main");
  });
});
export {};

 

📁 e2e.ts

e2e.ts는 Cypress가 E2E 테스트를 실행할 때 가장 먼저 로드되는 설정 파일입니다. 즉, 모든 테스트(*.cy.ts 파일 등)가 실행되기 전에 공통적으로 적용할 설정, 훅, 플러그인, 전역 명령어 등을 초기화하는 곳입니다.

 

예시로 beforeAll,beforeEach에 로그를 적용해 보았다

// ***********************************************************
// This example support/e2e.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import "./commands";

// 공통 로직 추가
before(() => {
  cy.log("🌟 모든 테스트 전 한 번 실행");
});

beforeEach(() => {
  cy.log("➡️ 각 테스트 전 실행");
});

 

 

기본적인 Cypress활용법에 대해서 알아보았고 

다음에는 cypress를 통해 커버리지 자동화 N시간마다 검증 하는것을 알아볼 예정이다