Cypress 3편. 기초 정리

Cypress

Cypress 기본적인 사용 방법, 주로 사용하는 함수 등 정리

 

Cypress 설치 시 기본 폴더 구조 (v10.6.0 기준)

 

• downloads
  • 테스트 실행 중에 다운로드되는 파일이 보관됨. 
• e2e
  • e2e 테스트 파일들을 보관.
• fixtures
  • 테스트에 사용할 정적 데이터 파일들을 보관.
• support
  • 공용으로 사용할 함수를 정의하거나, 테스트 전 사전에 실행할 코드를 작성한 파일들을 보관하는 폴더

 

 

E2E 테스트에서 주로 사용하는 cy 함수들

1. get

---

<button data-cy="login-button">login</button>

 

cy.get('[data-cy="login-button"]')

Cypress에서 data-cy를 통해 요소를 가져오는 것을 권장하고 있음. 

 

2. visit

---

cy.visit('/home')

해당하는 url로 이동

 

3. intercept

---

cy.intercept('/user');
cy.intercept('/user', { fixture: 'user.json' }).as('getUserAPI');

네트워크 요청 및 응답을 spy & stub 하기 위해 사용. 

fixture 옵션과 함께 정적 파일을 넘길 경우 실제로 API 호출을 하지 않고, 정적 파일이 응답됨.

4. as

---

cy.get('.main-nav').find('li').first().as('firstNav') // Alias element as @firstNav
cy.intercept('PUT', '/users').as('putUser') // Alias route as @putUser
cy.stub(api, 'onUnauth').as('unauth') // Alias stub as @unauth
cy.spy(win, 'fetch').as('winFetch')

나중에 사용하기 위해 별칭을 할당함. 

 

5. wait

---

cy.intercept('/user', { fixture: 'user.json' }).as('getUserAPI');

cy.wait('@getUserAPI').then(({ response }) => {
    response...
})
  
cy.wait(5000)

주어진 값이 해결되거나, 시간이 지날 때까지 기다리게 할 수 있음. 

 

6. type

---

cy.get('[data-cy="input"]').type('Hello, World')

주로 input에 무언가를 입력하는 테스트를 할 때 사용

 

7. select

---

<select data-cy="select">
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

cy.get('[data-cy="select"]').select('apples').should('have.value', '456')

셀렉트박스의 option을 선택하는데 사용할 수 있음.

 

8. should

---

cy.get('.error').should('be.empty') // Assert that '.error' is empty
cy.contains('Login').should('be.visible') // Assert that el is visible
cy.wrap({ foo: 'bar' }).its('foo').should('eq', 'bar') // Assert the 'foo' property equals 'bar'

Assertions을 생성함. 예제처럼 요소가 어떤 상태인지를 설명하고 주장하는 것. 

should 사용 방법

 

9. click

---

cy.get('.btn').click() 
cy.focused().click() 
cy.contains('Welcome').click()

요소를 클릭하는데 사용함.

 

 

Hooks

before(() => {
  // root-level hook
  // 모든 테스트 전에 한 번 실행
})

beforeEach(() => {
  // root-level hook
  // 모든 테스트 블록 전에 실행
})

afterEach(() => {
  // 각 테스트 블록 이후에 실행
})

after(() => {
  // 모든 테스트가 완료되면 실행
})

describe('Hooks', () => {
  before(() => {
    // 블록의 모든 테스트 전에 한 번 실행
  })

  beforeEach(() => {
    // 블록의 각 테스트 전에 실행
  })

  afterEach(() => {
    // 블록의 각 테스트 후에 실행
  })

  after(() => {
    // 블록의 모든 테스트 후 한 번 실행
  })
})

 

상태를 정리할 때 after & afterEach를 사용하지 말고 테스트를 실행하기 전에 정리하라고 권장.

만약 상태를 정리하는 함수를 after & afterEach에 두고 테스트 중간에 cypress가 새로고침 될 경우 상태가 리셋되지 않아 
다음 테스트가 정상적으로 이루어지지 않을 수 있음. 

 

해당 내용은 아래 글 참고 

https://docs.cypress.io/guides/references/best-practices#Using-after-or-afterEach-hooks