| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
- vue-cli
- CloudFlare
- caching
- import.meta.env
- typeScript
- Testing
- CSS
- ViTE
- 선택자
- rendering
- msw
- 비동기
- e2e
- https
- web vital
- http3
- aws
- svelte
- vue
- Cypress
- api test
- csr
- SSR
- TLS
- JavaScript
- custom command
- QUIC
- vue3
- devtools
- ts error
- Today
- Total
목록custom command (2)
Develop Note by J.S.
[Cypress] Custom Command Test
Cypress의 Custom Commend를 활용한 Login, Logout Test 입니다. 1. Commend 등록 cypress/support/commonds.ts 파일과 cypress/support/index.d.ts 에 사용할 Custom Command를 정의합니다. // cypress/support/commands.ts file // 요소 가져오기 Cypress.Commands.add('dataCy', (selector) => { return cy.get(`[data-cy=${selector}]`); }); // 요소 접근 후 클릭 Cypress.Commands.add('actionClick', (selector) => { return cy.get(`[data-cy=${selector}]`)...
[Cypress] 선택자 & Custom Command
Cypress의 선택자의 경우 아래 이미지와 같은 방법이 있으며, Cypress 공식 문서에 따르면 변화의 가능성이 낮은 방법이 안전하다고 명시되어 있습니다 . Cypress 테스팅 코드 작성 시 자주 사용되는 기능을 Custome Command로 설정하여 코드를 효율적으로 작성 할 수 있습니다. Command 사용법에 대한 간단한 예제입니다. 1. cypress/support/command.ts // cy.get() Command등록 Cypress.Commands.add('dataCy', (selector) => { return cy.get(`[data-cy=${selector}]`) }) 2. cypress/support/e2e.ts import './commands' 3. cypress/suppor..