내가 볼려고 만든 Cypress 간단 정리. Get, before, it, describe

 

 

1. describe

테스트를 구성하는 가장 큰 틀이다. Jest에서 테스트를 구성하는 방식과 동일하다.

 

describe('나의 테스트', {testIsolation: false}, () => {
	// 나의 테스트
})

🛑 testIsolation 옵션: 기본적으로 테스트는 테스트간 독립성을 보장해서 클린하게 유지해야 한다. 다만 해당 옵션을 false로 두면 테스트 간 독립성을 해제하고 describe 블럭 안의 테스트끼리는 연관성을 가지게 될 것이다.

 

 

2. it

describe 안에서 독립적으로 실행될 테스트 단위이다. it 블럭 안에서 한 기능에 대한 테스트를 수행하면 된다.

이 역시 Jest에서 테스트를 구성하는 방식과 동일하다.

 

it('나의 테스트 첫번째', () => {
	// 나의 테스트 첫번째
})

 

 

3. before, beforeEach

describe 안에서 사용되며 테스트 수행 전에 선행적으로 실행할 작업을 명시한다.

before는 전체 테스트 시작 전, beforeEach는 각각의 it 블럭 시작 전에 수행된다. 이 역시 jest와 같군.

 

describe('나의 테스트', {testIsolation: false}, () => {
    before(() => {
        cy.clearAllCookies()
        cy.clearAllLocalStorage()
        cy.clearAllSessionStorage()
    });

    beforeEach(() => {
        cy.visit('https://나의 테스트 페이지.com/')

        cy.get('body').then((body) => {
            if (body.find('.loginButton').length > 0) {
                cy.login() // commands에 로그인 동작이 정의되어 있다.
            } else {
                return
            }
        })
    })
    
    // 나의 테스트
})

 

위 테스트에 대해 간단히 설명하면,

- 전체 테스트 시작 전에 쿠키, 로컬 스토리지, 세션 스토리지를 전부 제거한다.

- 각 테스트 실행 전마다 로그인을 수행한다.

 

 

4. Get

get은 테스트할 컴포넌트 (태그)를 가져오는 함수이다. 방법에는 여러가지가 있다.

 

• id로 가져오기

cy.get('#my-button').click()

• name으로 가져오기

cy.get('input[name="myInput"]').type('TEST')

• class명으로 가져오기

cy.get('.my-class').type('TEST')

• 자손 선택자로 가져오기 (ul의 child인 li 중 첫번째 것을 가져옴)

cy.get('ul li:first').should('contain', 'TEST')

• 체크박스 가져오기

cy.get('[type="checkbox"]').check('VALUE1')

=> check 안에는 체크하고 싶은 checkbox의 value 를 넣는다.

 

• 라디오버튼 radio button 가져오기

cy.get('[type="radio"]').check('VALUE1')

=> check 안에는 체크하고 싶은 radio의 value 를 넣는다.\

 

• Select박스를 가져와 선택하기

cy.get('#my-select-box').select('value1');

 

 

---

 

 

천천히 더 정리를 해서 올려야 겠다.

기본적인 내용이지만 정리를 해두니 편안하다.