Cypress를 사용하여 프로그래밍 방식으로 로그인하는 방법

API를 통해 인증하여 자동화된 테스트를 더 빠르게 만드는 방법 알아보기

자동화된 그래픽 사용자 인터페이스 테스트는 서로 독립적이어야 합니다. 또한 이러한 테스트는 테스트 자체가 수행되도록 원하는 상태에 도달하기 위해 그래픽 사용자 인터페이스에 가능한 한 적게 의존해야 합니다.

직관에 반하는 것처럼 보이지만 정확히는 그렇습니다.

From the graphical user interface, we should test it only once. More than that is waste.

그러나 대부분의 웹 애플리케이션에서 사용자는 특정 기능에 액세스하려면 인증을 받아야 합니다. 그렇다면 로그인 페이지를 거치지 않고 그러한 사용자를 인증하는 방법은 무엇입니까?

이것이 바로 제가 이번 싸이프레스 꼬집음에서 보여드릴 것입니다.

Note: It is worth remembering that this is just an alternative and that it may not be suitable for your use case. For more examples, I recommend reading the Testing Strategies section of the Cypress official documentation.

설명을 쉽게 하기 위해 최근에 기여한 실제 프로젝트를 사용하겠습니다. BR Modelo Web .

다음 테스트 케이스를 상상해 봅시다.

// cypress/integration/programmaticLogin.spec.js

it('successfully logs in programmatically', () => {
  cy.intercept('GET', `${Cypress.env('apiUrl')}/models?userId=*`)
    .as('getUserModels')

  cy.request('POST', `${Cypress.env('apiUrl')}/users/login`, {
    username: Cypress.env('userEmail'),
    password: Cypress.env('userPassword'),
  }).then((response) => {
    cy.setCookie('sessionId', response.body.sessionId)
    cy.setCookie('userId', response.body.userId)
    cy.setCookie('userName', response.body.userName)
  })

  cy.visit('/#!/main')
  cy.wait('@getUserModels')
  cy.contains('h2', 'Models').should('be.visible')
}

이제 이 코드가 무엇을 하는지 이해해 봅시다.

먼저 테스트 본문 내부, 즉 it 블록 내부에서 cy.intercept 명령을 사용합니다. 이러한 명령을 사용하여 로그인한 사용자의 모델을 가져오는 애플리케이션의 API URL에 대한 GET 요청과 같은 네트워크 호출을 "수신"할 수 있습니다. 그런 다음 해당 절편에 별칭을 부여합니다. 별칭은 getUserModels 입니다.

그런 다음 프로그래밍 방식 인증이 발생하는 부분이 있습니다.

이 부분에서는 cy.request 기능을 사용하여 로그인 URL에 대한 POST 요청을 만들고 요청body에 사용자 이름 및 암호 속성을 전달합니다. 둘 다 변수에서 가져옵니다( Cypress.env() 기능 사용). 민감한 데이터를 노출하지 않기 위해 이렇게 합니다.

그런 다음 cy.request() 명령 a .then() 에 연결합니다. 이 명령은 arrow function 을 인수로 사용하고 cy.request() 의 응답을 인수로 사용합니다.

이 화살표 함수의 본문에서는 이름에서 알 수 있듯이 cy.setCookie() 기능을 사용하여 요청-응답의 body를 기반으로 일부 쿠키를 설정합니다. 이는 사용자가 그래픽 사용자 인터페이스를 통해 로그인할 때 정확히 설정되는 쿠키입니다.

쿠키가 설정된 상태에서 애플리케이션의 홈페이지를 방문합니다.

마지막으로 몇 가지 확인을 합니다.

먼저 cy.wait() 을 사용하여 이전에 생성된 인터셉트 요청이 발생할 때까지 기다렸다가 이전에 생성된 별칭( '@getUserModels' )을 전달합니다.

그런 다음 인증된 사용자에게만 표시되는 특정 요소(텍스트 모델이 있는 h2)가 표시되는지 확인하여 로그인에 성공했음을 증명합니다.

완료! 🎉

Attention: When testing a login functionality, it is recommended that such testing takes place via the graphical user interface. However, for all other features that require the authenticated user, use login programmatically and save a few seconds on each test!

보너스 - 사용자 지정 명령

둘 이상의 테스트 스위트가 프로그래밍 방식으로 로그인해야 하므로 해당 논리를 사용자 정의 명령으로 이동하여 필요한 만큼 재사용할 수 있습니다.

테스트 코드는 다음과 같습니다.

// cypress/integration/programmaticLogin.spec.js

it('successfully logs in via GUI', () => {
  cy.intercept('GET', `${Cypress.env('apiUrl')}/models?userId=*`)
    .as('getUserModels')
  cy.loginViaAPI()
  cy.wait('@getUserModels')
  cy.contains('h2', 'Models').should('be.visible')
})

그리고 커스텀 커맨드.

// cypress/support/commands.js

Cypress.Commands.add('loginViaAPI', (
  email = Cypress.env('userEmail'),
  password = Cypress.env('userPassword')
) => {
  cy.request('POST', `${Cypress.env('apiUrl')}/users/login`, {
    username: email,
    password,
  }).then((response) => {
    cy.setCookie('sessionId', response.body.sessionId)
    cy.setCookie('userId', response.body.userId)
    cy.setCookie('userName', response.body.userName)
    cy.visit('/#!/main')
  })
})

테스트에서 이제 cy.request 및 cy.setCookie의 모든 논리가 추상화됩니다. cy.loginViaAPI() 명령을 호출하기만 하면 사용자를 인증하기 위해 수행해야 하는 작업을 관리합니다.

프로그래밍 방식 로그인의 이전 논리 외에도 사용자 지정 명령은 이제 전자 메일과 암호를 인수로 받을 수도 있습니다. 그러나 인수가 전달되지 않으면 이러한 값에는 이미 변수에서 오는 기본값이 있습니다.

또한 홈 페이지 방문을 사용자 지정 명령으로 이동하기로 했습니다.

로그인 페이지를 거치지 않고 테스트 실행 및 인증을 확인하세요. 그것은 마술처럼 보인다! 🪄



그게 다야!

당신이 그것을 즐겼기를 바랍니다.


내 GitHub 프로필에서 최종 버전public repository에 액세스하십시오.

또는 BR Modelo Web App 프로젝트.

별을 남길 기회를 잡으세요! ⭐


내용이 마음에 드셨나요? 코멘트를 남겨주세요.


Cypress 테스트 자동화에 대해 궁금하고 더 자세히 알고 싶으십니까? Udemy에서 내 과정을 확인하십시오.


👋 다음 시간까지 즐거운 테스트 하세요!


이 게시물은 원래 Talking About Testing 블로그에 포르투갈어로 게시되었습니다.