어제 프론트엔드 애플리케이션용 올인원 테스트 플랫폼인 Cypress(repo)를 발견했습니다. 사용하기 쉽고 효과적인 놀라운 도구입니다.

프로젝트에서 cypress를 설정하는 방법

먼저 npm 패키지를 설치합니다.

npm install --save-dev cypress
# Or
yarn add --dev cypress

그런 다음

node_modules/.bin/cypress open

cypress의 기능을 보여주는 예제 테스트를 실행할 수 있는 창이 나타납니다.


그런 다음 wrinting 테스트를 시작할 수 있습니다.

테스트 작성 방법

간단한 로그인 테스트는 다음과 같이 9줄로 작성할 수 있습니다.

describe('Log in', () => {
  it('should log in and redirect to home page', () => {
    cy.visit('http://localhost:3001/');
    cy.get('[data-testid=EmailInput]').type('[email protected]');
    cy.get('[data-testid=PasswordInput]').type('123');
    cy.get('[data-testid=SignInButton]').click();
    cy.url().should('match', /home$/);
  });
});

describe 제목 아래의 단순 그룹 테스트(이 경우 '로그인')

it는 제목이 있는 새 테스트를 정의합니다. 이 경우 '로그인하고 홈 페이지로 리디렉션해야 함'

cy.visit cypress 브라우저가 서버 로그인 페이지에 액세스하도록 함

cy.get 페이지에서 HTML 요소를 가져옵니다

.

cy.get(...).type 요소에 텍스트 입력

cy.get(...).click 요소를 클릭합니다(놀랍게도 알고 있습니다)

cy.url() 현재 URL에 대한 어설션을 만들 수 있습니다.

따라서 기본적으로 로그인 페이지에 액세스하고 사용자 이메일과 비밀번호를 입력하고 로그인 버튼을 클릭한 다음 홈 페이지로 리디렉션되었는지 확인합니다.

마무리

설정을 수행하고 15분 이내에 로그인 테스트를 실행할 수 있습니다. 이것이 cypress의 단순성이며, 적어도 웹 앱을 테스트하는 데 사용하는 것을 고려해야 하는 이유입니다.

설명서에서 모범 사례page를 읽고 도구에 대해 자세히 알아보려면 모범 사례를 시청하는 것을 잊지 마십시오.

추신: 나와 같이 Typescript를 사용하는 경우 이guide를 사용하면 TS가 cypress와 작동하도록 하는 데 약간의 시간을 절약할 수 있습니다.