Cypress에서 네트워크 가로채기 마스터하기: 자세한 가이드

Source: Dev.to

Introduction

오늘날 경쟁이 치열한 소프트웨어 테스트 환경에서 네트워크 요청을 효율적으로 처리하는 것은 웹 애플리케이션의 원활한 기능을 보장하는 핵심 요소입니다. 최신 엔드‑투‑엔드 테스트 프레임워크 Cypress는 네트워크 요청을 가로채고 테스트할 수 있는 강력한 기능을 제공하여 테스트 자동화에 혁신을 가져왔습니다.

이 블로그에서는 Cypress를 활용한 네트워크 가로채기에 대해 자세히 살펴봅니다. API 요청 처리 기본부터 고급 스터빙 기법 및 응답 검증까지, 알아야 할 모든 내용을 포괄적으로 다룹니다. Cypress가 테스트 담당자에게 엣지 케이스를 시뮬레이션하고 복잡한 상호작용을 디버깅하며 테스트 커버리지를 높이는 방법을 보여줍니다. 이 글을 끝까지 읽으면 네트워크 가로채기를 Cypress 테스트 자동화 전략에 통합하는 방법을 종합적으로 이해하게 되어 테스트 신뢰성과 효율성을 동시에 향상시킬 수 있습니다.

이 블로그는 자동화 역량을 한 단계 끌어올리고자 하는 테스터와 개발자를 위해 설계되었으며, 단계별 안내, 실용적인 예제, 그리고 네트워크 테스트에 대한 모범 사례를 제공합니다.

네트워크 요청 가로채기란?

자동화 테스트 맥락에서 네트워크 요청 가로채기는 테스트 세션 동안 클라이언트와 서버 사이의 HTTP 요청 및 응답을 모니터링하고, 수정하거나 완전히 스텁(stub)하는 과정을 의미합니다. 이 기능은 API나 웹 서비스에 의존하는 테스트 시나리오에서 매우 중요하며, 애플리케이션이 성공적인 응답, 서버 오류, 지연된 응답 등 모든 가능한 상황을 올바르게 처리하도록 보장합니다.

예시

• 사용자 데이터를 가져오는 API 호출을 가로채고 더미 데이터를 포함한 응답을 시뮬레이션하면 백엔드 가용성에 의존하지 않고도 다양한 시나리오에서 애플리케이션이 어떻게 동작하는지 검증할 수 있습니다.
• 서버가 500 오류를 반환하는 엣지 케이스를 테스트함으로써 UI에서의 폴백 메커니즘이나 오류 메시지를 검증할 수 있습니다.

네트워크 가로채기가 자동화 테스트에서 중요한 이유는?

• Isolate Application Behaviour – 라이브 백엔드 서버에 의존하지 않고 프런트엔드 로직을 테스트하여 서버가 불안정하거나 사용할 수 없을 때도 애플리케이션 동작을 격리합니다.
• Simulate Edge Cases – 느린 네트워크 응답, 서버 오류, 예상치 못한 페이로드와 같은 시나리오를 손쉽게 시뮬레이션합니다.
• Improve Test Reliability – 외부 의존성을 제어함으로써 테스트의 플라키성을 줄이고, 보다 안정적이고 재현 가능한 테스트를 만들 수 있습니다.
• Validate API Contracts – 애플리케이션이 올바른 요청을 전송하고 응답을 기대대로 처리하는지 확인합니다.
• Debugging Made Easy – 요청 및 응답을 가로채어 애플리케이션이 서버와 주고받는 내용을 가시화함으로써 디버깅을 용이하게 합니다.

Source: …

Cypress를 사용한 API 가로채기의 장점

Cypress는 강력한 cy.intercept 명령어로 네트워크 가로채기를 단순화하여 기존 테스트 도구에 비해 여러 이점을 제공합니다.

사용 편의성

Cypress는 네트워크 요청을 가로채고 수정하기 위한 선언적이고 가독성 높은 구문을 제공합니다.

예시 – /api/users에 대한 모든 GET 요청을 가로채고 users.json 픽스처 파일의 미리 정의된 JSON 응답을 제공합니다.

// cypress/e2e/intercept-users.spec.js
cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
cy.visit('/users');
cy.wait('@getUsers').its('response.statusCode').should('eq', 200);

실시간 디버깅

Cypress 내장 테스트 러너는 가로채진 요청과 그 세부 정보를 실시간으로 표시하여 빠른 검증 및 문제 해결을 가능하게 합니다.

미들웨어 불필요

프록시 서버나 추가 미들웨어가 필요한 일부 도구와 달리 Cypress는 네이티브하게 통합되어 설정 시간을 절감합니다.

복잡한 시나리오 시뮬레이션

cy.intercept를 사용하면 API 응답을 동적으로 모킹하여 페이지네이션이나 인증 같은 복잡한 워크플로를 테스트할 수 있습니다.

예시 – 페이지네이션 시뮬레이션

// 첫 번째 페이지 모킹
cy.intercept('GET', '/api/items?page=1', { fixture: 'items-page-1.json' }).as('page1');
// 두 번째 페이지 모킹
cy.intercept('GET', '/api/items?page=2', { fixture: 'items-page-2.json' }).as('page2');

포괄적인 어설션

Cypress는 요청, 페이로드, 헤더 및 응답에 대한 어설션을 지원합니다.

예시 – 요청 페이로드 검증

cy.intercept('POST', '/api/login', (req) => {
  expect(req.body).to.have.property('username', 'testuser');
  expect(req.body).to.have.property('password');
  req.reply({ fixture: 'login-success.json' });
}).as('login');

테스트 유지 보수 간소화

픽스처와 별칭 같은 기능을 활용하면 테스트 데이터와 가로채기를 조직화하여 여러 테스트에서 재사용할 수 있어, 테스트 스위트를 DRY하게 유지하고 관리가 쉬워집니다.

Cypress를 이용한 네트워크 요청 가로채기를 사용하면 애플리케이션의 외부 의존성을 완전히 제어할 수 있어 UI와 API 레이어 모두를 검증하는 견고하고 포괄적인 자동화 테스트를 구현할 수 있습니다. 이는 현대 테스트 자동화 실무자에게 필수적인 스킬입니다.

Source:

Cypress에서 cy.intercept 기본

cy.intercept 소개

cy.intercept는 HTTP 요청과 응답을 가로채고 수정할 수 있는 Cypress 명령입니다. 기존 cy.route API를 대체하며 더 강력하고 유연한 인터페이스를 제공합니다.

구문 개요

cy.intercept([method], url, [routeHandler])

간단한 예시 – GET 요청 스텁

// /api/todos에 대한 GET 요청을 스텁하고 fixture 반환
cy.intercept('GET', '/api/todos', { fixture: 'todos.json' }).as('getTodos');

동적 응답 예시

cy.intercept('POST', '/api/login', (req) => {
  // 요청 페이로드 검사
  expect(req.body).to.have.property('username');

  // 동적으로 응답 결정
  if (req.body.username === 'admin') {
    req.reply({ statusCode: 200, body: { token: 'abc123' } });
  } else {
    req.reply({ statusCode: 401, body: { error: 'Invalid credentials' } });
  }
}).as('login');

대기용 별칭 사용

cy.wait('@login').its('response.statusCode').should('eq', 200);

와일드카드 매칭

// /api/users/* 아래의 모든 GET 요청 매치
cy.intercept('GET', '/api/users/**', { fixture: 'user.json' });

나가는 요청 수정

cy.intercept('GET', '/api/products', (req) => {
  // 요청이 전송되기 전에 커스텀 헤더 추가
  req.headers['x-test-header'] = 'cypress';
  req.continue(); // (수정된) 요청을 계속 진행
});

핵심 팁

1. 요청을 트리거하는 동작보다 먼저 인터셉트를 설정하세요.
2. as() 로 별칭을 만들고 – 이를 통해 cy.wait() 로 쉽게 대기하고 요청/응답을 검증할 수 있습니다.
3. fixture를 활용해 재사용 가능한 정적 데이터를 관리하세요.
4. cy.wait()와 결합해 레이스 컨디션으로 인한 불안정한 테스트를 방지하세요.

모두 합쳐 보기 – 샘플 테스트

describe('User Dashboard – Network Interception', () => {
  beforeEach(() => {
    // Stub the user list API
    cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');

    // Stub a delayed response to test loading state
    cy.intercept('GET', '/api/notifications', (req) => {
      req.reply((res) => {
        // Simulate a 2‑second network delay
        setTimeout(() => {
          res.send({ fixture: 'notifications.json' });
        }, 2000);
      });
    }).as('getNotifications');

    cy.visit('/dashboard');
  });

  it('displays the user list from fixture', () => {
    cy.wait('@getUsers');
    cy.get('[data-cy=user-row]').should('have.length', 5); // assuming 5 users in fixture
  });

  it('shows loading spinner while notifications are delayed', () => {
    cy.get('[data-cy=notifications-spinner]').should('be.visible');
    cy.wait('@getNotifications');
    cy.get('[data-cy=notifications-spinner]').should('not.exist');
    cy.get('[data-cy=notification]').should('have.length.at.least', 1);
  });
});

---

최종 생각

Cypress를 사용한 네트워크 요청 가로채기는 애플리케이션의 외부 상호작용을 완벽하게 제어할 수 있게 해 주며, 다음을 가능하게 합니다:

• 결정적이고 빠르며 신뢰할 수 있는 테스트 작성
• 재현하기 어려운 엣지 케이스 시뮬레이션
• 단일 테스트 흐름에서 UI 동작과 API 계약 모두 검증

cy.intercept를 마스터하는 것은 현대 테스트 자동화 엔지니어에게 필수적인 핵심 스킬입니다. 즐거운 테스트 되세요!

소개

Cypress 6.0은 cy.intercept 명령을 도입하여 테스트 중 네트워크 트래픽에 대한 향상된 기능과 더 나은 제어를 제공합니다.

이 강력한 기능은 다음을 할 수 있습니다:

• 나가는 및 들어오는 HTTP 요청을 모니터링합니다.
• 응답을 스텁하고 모킹합니다.
• 페이로드, 헤더 및 응답 구조를 검증합니다.
• 타임아웃, 서버 오류 또는 잘못된 데이터와 같은 엣지 케이스를 시뮬레이션합니다.

cy.route와 cy.intercept의 주요 차이점

cy.intercept는 상세한 요청 매칭, 응답 조작 및 고급 검증을 가능하게 하여 비교할 수 없는 유연성을 제공합니다.

구문 개요 – 기본 사용법

cy.intercept 명령은 요구 사항의 복잡도에 따라 다양한 인자를 받을 수 있습니다.

기본 구문

---

Source: …

cy.intercept 사용 예시

1. GET 요청 가로채기 – 모니터링 및 검증

// Intercept GET /api/users and assign an alias
cy.intercept('GET', '/api/users').as('getUsers');

// Trigger the request in your app (e.g., click a button)
cy.get('button.fetch-users').click();

// Wait for the request and assert response
cy.wait('@getUsers').its('response.statusCode').should('eq', 200);
cy.wait('@getUsers')
  .its('response.body')
  .should('have.length.greaterThan', 0);

설명

• /api/users 로 향하는 요청을 가로챕니다.
• 더 쉽게 참조할 수 있도록 별칭 @getUsers 를 지정합니다.
• 상태 코드와 응답 본문을 검증합니다.

---

2. 응답 스터빙 – JSON 픽스처 사용

// Stub GET /api/products with a fixture file
cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts');

설명

/api/products 로 들어오는 모든 GET 요청은 products.json 픽스처 파일의 데이터를 반환합니다.

---

3. 동적 응답 수정

cy.intercept('POST', '/api/login', (req) => {
  // Simulate a login failure
  req.reply({
    statusCode: 401,
    body: { error: 'Invalid credentials' },
  });
}).as('loginFail');

설명

/api/login 에 대한 POST 요청을 가로채고, 응답 본문을 동적으로 변경하여 로그인 실패 상황을 시뮬레이션합니다.

---

4. 서버 오류 (500) 시뮬레이션

cy.intercept('GET', '/api/orders', {
  statusCode: 500,
  body: { error: 'Internal Server Error' },
}).as('ordersError');

설명

500 오류를 시뮬레이션하여 애플리케이션의 오류 처리 로직을 검증할 수 있습니다.

---

5. 요청 페이로드 검증

cy.intercept('POST', '/api/submit', (req) => {
  // Assert payload structure and values
  expect(req.body).to.have.all.keys('name', 'email', 'message');
  expect(req.body.email).to.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/);
}).as('submitForm');

설명

• /api/submit 에 대한 POST 요청을 가로챕니다.
• 페이로드에 기대하는 키가 모두 포함되어 있는지, 그리고 이메일 형식이 올바른지 검증합니다.

모범 사례

• Alias 사용 – 가로채기된 요청에 별칭(as('myAlias'))을 할당하여 cy.wait으로 쉽게 참조합니다.
• 픽스처 정리 – 재사용 가능한 테스트 데이터를 cypress/fixtures 폴더에 저장하여 일관된 모의 응답을 제공합니다.
• 엣지 케이스 테스트 – 지연, 타임아웃 및 잘못된 응답을 시뮬레이션하여 견고성을 확보합니다.
• 디버깅 – Cypress의 테스트 러너를 활용해 가로채기된 요청 및 응답을 실시간으로 검사합니다.

---

GET, POST, PUT, DELETE 요청 가로채기

다양한 HTTP 메서드를 가로채는 것은 웹 애플리케이션 내에서 다양한 API 상호작용을 테스트하는 데 필수적입니다. Cypress는 cy.intercept를 사용해 이를 간단히 구현할 수 있습니다.

예시: GET 요청 가로채기

시나리오: 애플리케이션이 사용자 목록을 가져오는 방식을 테스트합니다.

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
cy.visit('/users');
cy.wait('@getUsers').its('response.statusCode').should('eq', 200);

예시: POST 요청 가로채기

cy.intercept('POST', '/api/users', (req) => {
  // 요청 페이로드 검증
  expect(req.body).to.have.property('name');
  // 응답 스텁
  req.reply({ statusCode: 201, body: { id: 123, ...req.body } });
}).as('createUser');

예시: PUT 요청 가로채기

cy.intercept('PUT', '/api/users/*', (req) => {
  // 응답을 동적으로 수정
  req.reply({ statusCode: 200, body: { ...req.body, updatedAt: new Date().toISOString() } });
}).as('updateUser');

예시: DELETE 요청 가로채기

cy.intercept('DELETE', '/api/users/*', {
  statusCode: 204,
}).as('deleteUser');

---

추가 읽기

전체 블로그 읽기:
https://tinyurl.com/34wb5k66