소프트웨어 테스트는 개발된 응용 프로그램이 실제 요구 사항을 충족하는지 확인하고 제품에 결함이 없음을 보장하기 위해 결함 및 오류 파악을 목적으로 응용 프로그램을 평가하는 데 사용되는 프로세스입니다. 수많은 소프트웨어 테스트 유형이 있지만 이 포스팅에서는 E2E(엔드 투 엔드) 테스트에 대해 집중적으로 살펴볼 것입니다.

E2E 테스트는 처음부터 끝까지 전체 시스템 흐름을 테스트하여 개발된 시스템이 요구 사항을 충족하고 상호 연결된 다양한 컴포넌트 간에 통합이 유지되는지 확인합니다. 결제 게이트웨이 응용 프로그램을 예로 들어보겠습니다. 다음은 이 응용 프로그램을 통해 결제하기 위한 간단한 워크플로우입니다.

1. 결제 게이트웨이 링크로 이동

2. 이름, 이메일 주소와 주소 입력

3. 결제를 위한 신용카드 세부 정보 입력

4. "결제" 버튼을 클릭하여 결제 처리

5. 이메일 주소로 확인 메시지와 송장 전송

사용자에게는 이러한 과정이 끊김 없이 이어지는 하나의 워크플로우처럼 보이지만, 여기에는 브라우저를 로드하고, 신용카드 API 서비스를 사용하여 인증을 통해 신용카드 세부 정보가 올바른지 확인하고, 신용카드 서비스와 결제를 확인하고, 확인 이메일을 전송하는 것을 비롯하여 수많은 기본 시스템이 함께 작동합니다. 각 단계에는 개별 시스템과 통합된 데이터베이스가 포함되고 원활한 워크플로우를 위해 이러한 시스템 간의 정보 처리 또는 전송 오류를 적절히 관리해야 합니다. E2E 테스트는 워크플로우의 유효성을 검사하고 시스템 간의 정보 흐름이 예상대로 작동하는지 확인합니다. 통합 시스템의 복잡성이 증가함에 따라 품질 및 적시 전달을 보장하기 위해 E2E 테스트가 필수 단계가 되었습니다.

E2E 테스트의 이점

• 응용 프로그램의 정확성 보장

• 중요한 회귀 조기 검색

• 비용 절감 및 시간 단축

E2E 테스트를 위한 도구 및 프레임워크

웹 기반 응용 프로그램을 테스트하는 데 사용할 수 있는 다양한 E2E 프레임워크가 있습니다. 사용자는 프로젝트의 실제 요구 사항에 따라 프레임워크 하나를 선택할 수 있습니다. 선택할 수 있는 프레임워크는 다음과 같습니다.

• Cypress

• Protractor

SpreadJS 기반 응용 프로그램의 E2E 테스트

웹 기반 응용 프로그램을 위한 대부분의 E2E 테스트 프레임워크는 DOM 액세스에 따라 달라집니다. 그러나 SpreadJS는 콘텐츠를 HTML5 캔버스에 렌더링하기 때문에 일반적인 DOM 액세스 방법을 사용하는 SpreadJS 응용 프로그램에는 E2E 테스트를 적용할 수 없습니다.

SpreadJS에서는 통합 문서와 상호 작용하는 데 사용할 수 있는 다양한 API를 제공합니다. E2E 테스트용 테스트 사례를 작성하는 데 같은 API를 사용할 수도 있습니다. E2E 프레임워크에만 사용하도록 제한되어 있지 않기 때문에 이 방법은 E2E 프레임워크 전체에서 사용할 수 있습니다.

다음은 Spread JS 응용 프로그램의 E2E 테스트를 작성하기 위한 단계입니다.

1. 창 개체에서 GC 네임스페이스 노출

2. 테스트할 SpreadJS 통합 문서 인스턴스 가져오기

3. SpreadJS API를 사용하여 E2E 테스트 작성

창 개체에서 GC 네임스페이스 노출

사용자가 SpreadJS의 비모듈식 빌드를 사용하고 응용 프로그램에서 스크립트 태그를 사용하여 SpreadJS를 추가한 경우에는 기본적으로 GC 네임스페이스가 창 개체에 이미 노출되어 있기 때문에 이 단계를 건너뛸 수 있습니다. 그러나 npm을 사용 중이고 @grapecity/spread-sheets 패키지를 사용하여 SpreadJS 모듈을 추가한 경우에는 GC 네임스페이스를 수동으로 노출해야 합니다. 그래야 테스트 도구가 SpreadJS API에 액세스하여 이 API를 사용할 수 있습니다.

SpreadJS를 사용하는 기본 프로젝트에서 다음 코드를 추가합니다.

// import SpreadJS
import * as GC from "@grapecity/spread-sheets";
// expose GC namespace on window object so that it could be used directly from window object during testing
window["GC"] = GC;

테스트할 SpreadJS 통합 문서 인스턴스 가져오기

이제 GC 네임스페이스와 SpreadJS API에 액세스했으므로 정적 메서드인 findControl()을 사용하여 Spread 통합 문서 인스턴스를 가져올 수 있습니다.

Cypress:

// get window object of application 
appWindow = await cy.window();
// find spread instace 
spread = appWindow.GC.Spread.Sheets.findControl(appWindows.document.querySelector(‘[gcuielement="gcSpread"]’));

Protractor:

// find spread instance
browser.executeScript('window[“spreadInstance”] = GC.Spread.Sheets.findControl(document.querySelector(\‘[gcuielement="gcSpread"]\’))’);

SpreadJS API를 사용하여 E2E 테스트 작성

마지막 단계는 SpreadJS API가 노출한 여러 메서드를 사용하여 테스트 사례를 작성하는 것입니다.

Cypress:

it("Content in Cell A1 of ActiveSheet should be 'Test application'", () => {
  let activeSheet = spread.getActiveSheet();
  let valInCellA1 = activeSheet.getValue(0, 0);
  expect(valInCellA1).to.eq("Test application");
});

Protractor:

var valInCellA1 = browser.executeScript('return window[“spreadInstance”].getActiveSheet().getValue(0, 0)’;
expect(valInCellA1).toEqual(“Test application”);

SpreadJS 응용 프로그램에서 E2E 테스트를 작성하는 방법에 대한 간단한 설명을 마칩니다. API에 대한 자세한 내용은 온라인 SpreadJS 문서를 참조하세요. 이 포스팅에서 사용된 샘플은 첨부 파일을 통해 다운로드 받으실 수 있습니다.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ