Cypress 기본 사항: 쿠키가 사라진 곳은 어디입니까?

애플리케이션에 성공적으로 로그인했습니다. 첫 번째 테스트를 받았습니다! 이제 다음으로. 딸깍 하는 소리! 이제 로그아웃되었습니다. Cypress가 각 테스트 후 로그아웃하는 이유는 무엇입니까?!

그 이유는 사실 간단합니다. Cypress clears out the state of browser 테스트 사이에. 모든 쿠키는 각 블록it() 사이에 앱에서 삭제됩니다. 현재 로그아웃된 이유는 앱이 쿠키를 사용하여 인증 토큰을 저장하기 때문일 수 있습니다. 앱이 서버에 http 요청을 하면 해당 쿠키가 함께 전송됩니다. 이렇게 하면 서버에서 인증이 유효하고 데이터를 읽거나 쓸 수 있는 권한이 있음을 알 수 있습니다. 쿠키가 없으면 서버에서 이를 승인되지 않은 요청으로 평가하고 앱에서 일반적으로 로그아웃합니다.

브라우저의 상태를 지우는 것은 실제로 좋은 일이지만 이 문제를 해결하고 싶은 상황에 처할 수 있습니다. 예를 들어 여러 테스트를 하나의 사양으로 그룹화하려고 합니다. 여기서 각 테스트에는 로그인이 필요합니다. 옵션이 무엇인지 살펴보겠습니다. 내 블로그I have a repo set up, so make sure you clone it의 경우와 마찬가지로 코드를 직접 가지고 놀아보세요. 우리 저장소에는 존재하는 모든 쿠키를 나열하는 간단한 앱이 있습니다.



첫 번째 코드에서 .setCookie() 명령을 사용하여 앱에 쿠키를 설정하고 있음을 알 수 있지만 두 번째 테스트에서는 이 쿠키가 더 이상 존재하지 않습니다.

it('should show cookie', () => {
  cy.setCookie('authentication', 'top_secret');
  cy.visit('../../app/index.html');
});

it('opens a page', () => {
  cy.visit('../../app/index.html');
});

이 사양을 실행하면 페이지에 두 번째 사양에서 "쿠키를 찾을 수 없음"이 표시되는 것을 볼 수 있습니다. 테스트 실행 비디오 보기:


각 테스트에서 쿠키가 설정되었는지 확인하려면 beforeEach 후크를 사용하여 각 테스트 전에 쿠키를 설정할 수 있습니다.

beforeEach(() => {
  cy.setCookie('authentication', 'top_secret');
});

it('first test', () => {
  cy.visit('../../app/index.html');
});

it('second test', () => {
  cy.visit('../../app/index.html');
});

그러나 이것은 약간 귀찮을 수 있으므로 beforeEach 후크를 사용하는 대신 다른 접근 방식을 사용할 수 있습니다. Cypress’ Cookies API을 사용하여 절대 삭제하고 싶지 않은 쿠키를 설정할 수 있습니다. Cypress.Cookies.defaults를 사용하여 각 테스트 전에 지우지 않도록 방지할 쿠키를 정의할 수 있습니다.

Cypress.Cookies.defaults({
  preserve: 'authentication'
})

it('first test', () => {
  cy.setCookie('authentication', 'top_secret');
  cy.visit('../../app/index.html');
});

it('second test', () => {
  cy.visit('../../app/index.html');
});

사양 내에서 API를 사용하는 대신 Cypress 프로젝트의 support/index.js 파일에서 선언하는 것이 좋습니다. 이렇게 하면 모든 테스트에서 쿠키가 보존되는지 확인할 수 있습니다. 하지만 그렇게 하고 싶지 않을 수도 있습니다. 전체 테스트 스위트에 대한 쿠키를 유지하는 대신 단일 사양 파일에 대해 쿠키를 유지하기를 원할 수 있습니다.

이를 위해 쿠키 API도 사용할 수 있습니다. Cypress.Cookies.preserveOnce를 사용하면 사양에 맞게 쿠키를 유지할 수 있습니다. 다음 테스트에서는 before() 후크를 사용하여 쿠키를 설정한 다음 beforeEach() 후크를 사용하여 preserveOnce 함수를 호출하여 각 테스트에 해당 쿠키를 유지합니다.

/// <reference types="cypress" />

before(() => {
  cy.setCookie('authentication', 'top_secret');
});

beforeEach(() => {
  Cypress.Cookies.preserveOnce('authentication')
});

it('first test', () => {
  cy.visit('../../app/index.html');
});

it('second test', () => {
  cy.visit('../../app/index.html');
});

이는 테스트 전에 쿠키를 추가하기 위해 beforeEach()를 사용하는 것과 크게 다르지 않을 수 있습니다. 그러나 이 예제는 지나치게 단순화되었습니다. 대부분의 경우는 브라우저 내부에 쿠키를 설정하는 것이 아니라 실제로 사용자 지정 명령이나 API를 통해 로그인하는 것입니다. 이는 비용이 더 많이 드는 작업일 수 있으며 반복을 피하면 시간을 절약할 수 있습니다. 향후 블로그에서 우리 앱에 인증하는 다양한 방법에 대해 이야기할 것이므로 소식이 나올 때 알림을 받으려면 나를 팔로우하거나 내homepage에서 뉴스레터를 구독하십시오.