테스트
내가 볼려고 만든 Cypress 간단 정리. Get, before, it, describe
개형이
2023. 9. 25. 16:16
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');
천천히 더 정리를 해서 올려야 겠다.
기본적인 내용이지만 정리를 해두니 편안하다.