Nx 작업 공간의 공유 Cypress 자산

tldr;

Nx 작업 공간에는 여러 애플리케이션이 있으며 종단 간 테스트 프로젝트 간에 사용자 정의 Cypress 명령을 공유할 수 있는 경우가 많습니다. 여러 프로젝트 간에 이러한 명령을 수동으로 복사하는 데 몇 달을 보냈고 변경 사항이 있을 때 불가피하게 업데이트하는 것을 잊어버렸습니다. 마침내 나는 문제를 해결하고 프로젝트 간에 Cypress 자산을 공유할 방법을 찾기로 결정했습니다. 이 기사에서는 이를 수행하는 한 가지 방법을 다룰 것입니다.

따라하려면 최소한 하나의 종단간 프로젝트가 포함된 Nx 작업 공간이 필요합니다.

공유 자산 라이브러리 생성

엔드투엔드 공유 자산 라이브러리를 만들어 시작하겠습니다. 이는 Nx 작업 공간에서 다른 라이브러리를 생성하는 것과 유사합니다. 유일한 잠재적 차이는 생성하는 라이브러리의 유형입니다. 예를 들어 Nx는 Angular 특정 라이브러리를 만드는 방법을 제공합니다. 이 경우 프레임워크 특정 라이브러리를 만들고 싶지 않습니다. 이는 다음 명령으로 수행할 수 있습니다.

$ nx g @nrwl/workspace:library e2e-assets --directory shared

이 명령은 e2e-assets라는 일반 Nx 작업 공간 라이브러리를 생성하고 libs/shared 디렉토리에 넣습니다. 이 라이브러리에서 사용자 지정 Cypress 명령을 추가한 다음 모든 엔드투엔드 프로젝트에서 사용할 수 있습니다.

사용자 지정 명령 파일 만들기

이제 새 공유 라이브러리에 사용자 지정 Cypress 명령이 포함된 파일을 추가해 보겠습니다. 이 사용자 정의 명령을 사용하면 data-cy HTML 속성으로 요소를 더 쉽게 선택할 수 있습니다. e2e-assets/src/lib라는 폴더에 data-cy.commands.ts라는 파일을 만듭니다. 해당 파일의 내용은 다음과 같습니다.

// data-cy.commands.ts

// load the global Cypress types
/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to get elements by data-cy attribute.
     * @example cy.dataCy('greeting')
     */
    dataCy(selector: string): Chainable<Element>;
  }
}

Cypress.Commands.add('dataCy', (value) => cy.get(`[data-cy=${value}]`));

파일의 처음 두 줄은 Cypress의 유형을 로드하고 IDE에 표시되는 오류를 방지합니다. 파일의 다음 부분은 기본적으로 새 사용자 지정 명령을 선언하여 테스트를 위해 Cypress 개체를 확장합니다. 이것을 생략하고 dataCy 명령을 사용하려고 하면 오류가 발생하고 명령이 작동하지 않습니다. 파일의 마지막 줄은 실제로 사용자 지정 명령을 추가하는 코드입니다. Cypress.Commands.add 메소드의 첫 번째 인수는 새 명령의 이름이고 두 번째 인수는 사용자 정의 명령에 대한 기능을 제공하는 콜백 함수입니다.

이 사용자 정의 명령은 cy.get 메서드를 반환하고 data-cy HTML 속성으로 요소를 선택합니다. 나중에 어떻게 사용되는지 살펴보겠습니다.

사용자 지정 명령 가져오기

다음 단계는 Cypress 테스트에서 사용할 수 있도록 새 사용자 지정 명령을 가져오는 것입니다. 첫 번째 가져오기는 e2e-assets/src/index.ts 파일에 속합니다.

// e2e-assets/src/index.ts

import './lib/data-cy.commands';

이렇게 하면 다음에 수행할 Cypress 테스트로 이 라이브러리를 가져올 때 새 명령을 사용할 수 있습니다. 두 번째 가져오기는 app-e2e/src/support/index.ts 파일에 속합니다. 여기에서 라이브러리를 가져오면 이 새 명령을 app-e2e Cypress 테스트에서 사용할 수 있습니다.

// app-e2e/src/support/index.ts
import '@my-org/shared/e2e-assets';

이제 공유 e2e 자산 라이브러리를 가져왔으므로 새 명령을 사용할 수 있습니다.

새 사용자 지정 명령 사용

다음은 Cypress 테스트에서 새 사용자 지정 명령을 사용하는 예입니다.

// app-e2e/src/integration/test.ts

it('should show the homepage', () => {
  cy.dataCy('homepage').should('be.visible');
});

이 사용자 지정 명령을 사용하지 않은 경우 테스트는 다음과 같습니다.

// app-e2e/src/integration/test.ts

it('should show the homepage', () => {
  cy.get('[data-cy=homepage]').should('be.visible');
});

여기에는 큰 차이가 없지만 data-cy 속성을 기반으로 하는 요소에 액세스해야 할 때마다 속성 선택기를 반복하는 것은 경험상 번거롭습니다. 이 간단한 사용자 지정 명령은 사용하기가 훨씬 쉽습니다.

결론

Nx 작업 공간의 가장 큰 이점 중 하나는 프로젝트 간에 코드를 공유할 수 있다는 것입니다. Angular 또는 React 앱 간에 코드를 공유하는 것은 자연스러운 일이지만 동일한 프로세스를 사용하여 Cypress 종단 간 테스트용 코드를 공유할 수 있습니다. 작업 공간에 더 많은 앱이 있고 더 복잡한 Cypress 명령에 특히 유용합니다.