사이프러스 | env 및 명령을 사용하여 인증 JWT를 처리하는 방법

1. Setting the scene

2. Need for writing explicit network requests in cypress?

3. Why not mock API responses OR seed the data OR both?

4. What are cypress commands?

5. How does the login command look?

6. How to access redux store?

7. Exploring Cypress env

8. How to set and access cypress env

9. TLDR: Some Example code

1. 장면 설정

애플리케이션 구조의 일반적인 경우는 클라이언트가 API와 쌍을 이루는 경우입니다. 이러한 시나리오에서는 Cypress 을 사용하여 종단 간 테스트를 설정하는 것이 매우 유용합니다. 이렇게 하면 응용 프로그램 전체에서 실제 사용자 동작을 모방하고 구현에 대한 자신감을 높일 수 있습니다.

인증 뒤에 보호되는 일부 API 끝점을 원하는 경우 JWT를 사용하는 것이 매우 일반적인 솔루션입니다.

이것은 우리의 cypress 테스트를 약간 복잡하게 만들고 우리가 속도를 높이기 위해 취할 수 있는 권장 접근 방식 중 하나는 Cypress에서 네트워크 요청을 사용하는 것입니다.

2. cypress에서 명시적 네트워크 요청을 작성해야 합니까?

cypress에서 네트워크 요청을 트리거할 수 있는 두 가지 방법이 있습니다.

UI 방식 - 사이프러스를 사용하여 양식으로 이동하고 세부 정보를 입력하고 버튼을 클릭합니다. 애플리케이션이 페이로드를 빌드하고 예상되는 사용자 흐름을 모방하여 네트워크 요청을 하도록 합니다.

네트워크 요청 방식 - 페이로드를 빌드하고 cy.request를 사용하여 직접 네트워크 요청을 만듭니다. 그런 다음 응답을 처리합니다(예: redux를 사용하는 경우 올바른 작업을 전달).

UI 방식에서는 응용 프로그램이 상태를 처리하고 있는지 알 필요가 없으며 완전한 블랙 박스 테스트가 될 것입니다. 또한 하면 할수록 느려집니다. 50개의 테스트가 있고 각 테스트에 대해 실제 테스트를 실행하기 전에 10개의 제품을 만들어야 한다고 상상해 보십시오!

네트워크 요청 방식은 페이로드, 인증, 상태 관리 및 네트워크 요청을 처리하는 데 필요한 기타 계단식 작업에 대한 완전한 지식이 필요하다는 의미에서 더 관련됩니다. 그러나 훨씬 더 빠르고 더 큰 테스트 제품군에 대한 테스트 실행 시간이 빨라집니다.

이상적인 조합은 UI 구성 요소를 한 번만 사용하여 흐름을 테스트하고 다른 곳에서는 해당 UI 흐름이 테스트의 초점이 아닐 때 네트워크 요청을 사용하는 것입니다.

3. API 응답을 모의하거나 데이터를 시드하거나 둘 다 하지 않는 이유는 무엇입니까?

이것들은 모두 매우 타당한 질문이며 어떤 경우에는 최선의 조치입니다. 그러나 진정한 종단 간 테스트에서는 프런트 엔드와 백 엔드를 모두 포함하는 애플리케이션이 사용자를 위해 어떻게 동작하는지 테스트하고 싶습니다.

API 업데이트 후 시드된 데이터가 업데이트되지 않고 테스트는 통과하지만 애플리케이션이 실패하는 경우가 있습니다.

간단히 말해서, 우리는 종단 간 테스트를 실행하는 동안 실제 사용자 흐름을 가장 정확하게 모방해야 합니다. 동시에 개발자 경험도 고려해야 합니다. 푸시할 때마다 CI/테스트 실행에 많은 시간이 걸리면 매우 빨리 좌절하게 됩니다.

4. cypress 명령이란 무엇입니까?

명령은 반복적으로 사용되는 코드를 추상화하는 좋은 방법이며 cypress 핵심 명령의 기본 동작을 재정의할 수도 있습니다. Cypress 웹사이트에서 그들에 대해 읽어보십시오here.

5. 로그인 명령은 어떻게 보입니까?

간단한login 명령은 다음과 같습니다.
Commands.js

Cypress.Commands.add('login', (email, password) => {
  // make login call to endpoint
  cy.visit('/')
  cy.request('POST', `${BACKEND}/login/`, {
    email: email,
    password: password,
  })
})

username/email 및 password를 cypress.json에 저장하고 액세스할 수도 있습니다.

우리는 테스트에서 그것을 이렇게 부릅니다.
create-product.spec.js

it('Authenticated user can create a new product', () => {
  cy.login('[email protected]', 'password') // logs in the user
})

6. redux 스토어에 어떻게 접속하나요?

동작을 보면 아주 간단합니다! 읽어보세요here.

7. Cypress 환경 탐색

읽어보세요here.

8. cypress 환경 설정 및 접근 방법

당신은 그것을 사용하여 설정

Cypress.env(<env key> : <value you want to store>)

당신은 그것을 사용하여 액세스

const value = Cypress.env(<env key>)

정말 간단합니다.

9. TLDR: 몇 가지 예제 코드

실제로 보여주기 위해 - 제품 생성에 POST /products 에 대한 페이로드가 있는 인증된 요청이 필요하다고 가정해 보겠습니다.

이 예에서는 Redux 저장소에 JWT를 me:{token: <token>} 형식으로 저장하고 있습니다.

이것은 명령이 다음과 같이 보일 수 있는 방법입니다.
Commands.js

Cypress.Commands.add('setUserToken', () => {
  cy.window()
    .its('store')
    .invoke('getState')
    .its('me')
    .then((me) => Cypress.env('token', me.token))
  // Here, me is the user stored in redux
})

Cypress.Commands.add('login', (email, password) => {
  // make login call to endpoint, and push info to redux store
  cy.visit('/')
  cy.request('POST', `${BACKEND}/sessions/`, {
    email: email,
    password: password,
  }).then((response) =>
    cy
      .window()
      .its('store')
      .invoke('dispatch', { type: 'LOGIN', body: response.body })
  )
  // response.body contains `user` object
  // which is stored in redux store as `me`
  cy.setUserToken()
})

Cypress.Commands.add('createProduct', (name) => {
  const payload = {
    name: name,
  }

  const token = Cypress.env('token')
  // We access the user JWT token stored in env

  cy.request({
    method: 'POST',
    url: BACKEND + '/products/',
    body: JSON.stringify(payload),
    headers: {
      authorization: 'Bearer ' + token, // consume the token
    },
  }).as('createProduct')
  cy.get('@createProduct')

  // We can also add assertions about
  // request/response structures here
})

이것이 테스트에서 사용되는 방법입니다.
create-product.spec.js

it('Authenticated user can create a new product', () => {
  cy.login('[email protected]', 'password') // logs in the user
  // Assert that product does not exist
  cy.createProduct('My new product') // Creates product in BE
  // Assert that product exists
})

토큰을 env 로직으로 별도의 명령setUserToken으로 설정하여 보다 명확하고 깔끔하게 만들었습니다.