Cypress - 디버깅 연습 (4)
이번에는 Cypress 를 이용한 디버깅에 대해서 알아보도록 하겠습니다.
Cypress는 테스트를 이해하는데 도움이되는 다양한 디버깅 도구를 함께 제공합니다.
- 각 명령의 스냅샷 시간 여행
- page event에서 일어난 이슈 확인
- 각 명령에 대한 추가 출력
- 여러 명령 스냅샷 사이에서 앞뒤 이동
- 명령의 일시 정지 및 반복적 진행
- 숨겨진 요소나 여러 요소가 발견되면 시각화
1. 시간여행
마우스를 이용해 Cypress Test Runner의 CONTAINS 명령 로그를 클릭해 봅시다.
Cypress는 시간이 지남에 따라 해당 명령이 해결된 시점의 스냅샷을 자동으로 저장합니다. 사용자는 해당 명령어를 클릭하면 저장된 스냅샷으로 자동 이동할 수 있습니다. 또한, cy.contains() 는 페이지에서 DOM요소를 찾기 때문에 Cypress는 해당 요소를 강조 표시하고 페이지 상단으로 스크롤 됩니다.
click()이 발생하고, 해당 contains 의 요소가 가진 링크 URL로 이동됩니다. https://example.cypress.io/commands/actions
그러나 페이지가 이동하기 전 시점의 스냅샷을 가리키면 이전 URL로 이동합니다.
2. 스냅샷
CLICK 명령을 클릭해 봅시다.
자주색 핀으로 강조 표시가 됩니다. 이것은 주목할만한 세 가지 일을 합니다.
- 고정된 스냅샷
- 스냅샷을 고정했습니다. 다른 명령으로 마우스를 가져가도 변하지 않습니다.
- 이를 통해 스냅샷을 만들때 테스트중인 애플리케이션의 DOM을 수동으로 검사할 수 있습니다.
- 이벤트 히트 박스
- .click() 동작 명령이므로 이벤트가 발생한 좌표에 빨간색 히트 박스도 표시됩니다.
- 스냅샷 메뉴 패널
- 새로운 메뉴 패널도 있습니다. 일부 명령은 여러 스냅샷을 취합니다. 이전과 이후, 이제 이것들을 순환할 수 있습니다.
- 새로운 메뉴 패널도 있습니다. 일부 명령은 여러 스냅샷을 취합니다. 이전과 이후, 이제 이것들을 순환할 수 있습니다.
3. 오류
Cypress는 테스트 중에 오류가 발생하면 몇 가지 정보를 출력합니다.
- 오류 이름
- 오류 유형입니다 (예: Assertion Error, CypressError)
- 오류 메시지
- 일반적으로 무엇이 잘못되었는지 알려줍니다.
- 길이가 다를 수 있습니다. 길고 짧은 오류를 수정하는 방법을 정확하게 알려줍니다.
- 일부에서 관련 Cypress 설명서로 연결되는 Learn more 링크도 포함되어 있습니다.
- 자세히 알아보기
- 일부 오류 메시지에는 관련 Cypress 설명서로 이동하는 자세히 알아보기 링크가 포함되어 있습니다.
- 코드 프레임 파일
- 일반적으로 스택 추적의 맨 위 줄이며, 아래 코드 프레임에서 강조 표시된 파일, 줄 번호 및 열 번호를 보여줍니다.
- 이 링크를 클릭하면 선호하는 파일 오프너에서 파일이 열리고 이를 지원하는 편집기에서 행과 열이 강조 됩니다.
- 코드 프레임
- 관련 행과 열이 강조 표시된 상태에서 오류가 발생한 코드 스니펫을 보여줍니다.
- 스택 추적 보기
- 이 옵션을 클릭하면 스택 추적의 가시성이 전환됩니다.
- 스택 트레이스의 길이는 다양합니다. 파란색 파일 경로를 클릭하면 원하는 파일 오프너에서 파일이 열립니다.
- 콘솔로 인쇄 버튼
- DevTools 콘솔에 전체 오류를 인쇄하려면 이 번튼을 클릭하세요.
- 일반적으로 스택 추적에서 라인을 클릭하고 DevTools에서 파일을 열 수 있습니다.
4. 페이지 이벤트
페이지 이벤트라는 재미있는 로그도 있습니다. 아래 (PAGE LOAD) 에 대한 또 다른 항목 (NEW URL) 이 있습니다. 이들 중 어느 것도 우리가 발행한 명령이 아니었습니다. Cypress 자체는 중요한 이벤트가 발생할 때 애플리케이션에서 로그아웃 합니다. 이러한 것들은 다르게 보여집니다. (회색에 숫자가 없습니다)
Cypress는 다음에 대한 페이지 이벤트를 로그아웃 합니다.
- 네트워크 XHR 요청
- URL 해시 변경
- 페이지 로드
- 양섹 제출
5. 콘솔 출력
대화식 명령 외에도 콘솔에 추가 디버깅 정보를 출력합니다. 개발도구를 열고 Cypress Test Runner의 클래스 선택기 GET 을 클릭해 보세요.
콘솔에서 Cypress 출력시 추가 정보를 볼 수 있습니다.
- Command : 발급된 명령
- Yialded : 리턴되는 값
- Elements : 발견된 요소 수
- Selector : 우리가 사용한 선택 인수값
우리는 이것을 통해 반환된 것을 확장하고 각 개별 요소를 검사하거나, 요소 패널에서 마우스 오른쪽 단추를 클릭하여 검사할 수 도 있습니다.
6. 특수 명령
Cypress 에는 유용한 UI 뿐만 아니라 디버깅 작업 전용 명령도 있습니다.
예를들어
- cy.pause()
- cy.debug()
cy.pause() 명령어를 추가하고 저장해 봅시다.
describe('My First Test', () => {
it('clicking "type" shows the right headings', () => {
cy.visit('https://example.cypress.io')
cy.pause() // cy.pause() 를 click() 이전에 추가했습니다.
cy.contains('type').click()
cy.url().should('include', '/commands/actions')
cy.get('.action-email')
.type('fake@email.com')
.should('have.value', 'fake@email.com')
})
})
저장하면 Cypress 는 각 명령을 단계별로 진행할 수 있는 UI를 제공합니다.
마무리하며..
현재 작성된 항목들은 쉽게 설치 및 간단한 코드를 테스트할 수 있는 샘플로 구성되어있습니다.
좀더 자세한 정보는 Cypress 홈페이지에서 확인하시고 직접 연습 테스트를 진행하시기를 권장합니다.
[Cypress] : https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Cypress-Can-Be-Simple-Sometimes
Leave a comment