Cypress를 이용한 회원가입 폼 테스트 이전 1탄에서는 설치 후 간단한 테스트를 통해 Cypress를 살짝 맛보았다. 이번 2탄에서는 Cypress를 이용해 간단한 회원가입 폼을 테스트해보려고 한다. // Form.vue submit {{ email }} {{ password }} 디자인 프레임워크인 Vuetify를 사용중이며, Cypress에서 쉽게 가져오기 위해 data-cy 속성을 지정했다. 해당 속성을 통해 cy.get()으로 해당 요소를 가져올 수 있다. // form.spec.js describe('Form Test', () => { beforeEach(() => { cy.visit('/signup'); }); it('회원가입 폼 작성', () => { cy.get('[data-cy=ema..
✏️ Vuetify란 무엇일까? Vuetify는 UI Components로 편리하게 UI 셋팅을 할 수 있게 해준다. 원래 예전에는 Element UI를 종종 사용했었는데, UI Components의 장점은 편리하지만 단점은 커스텀하기가 조금 까다로울 수 있다는 것이다. Vuetify는 사용했다하기 민망할 정도로 잠깐 사용했기에, 이번에 사용해보며 경험해보려고 한다. ✏️ 설치 우선 Vue3 버전은 2021 3분기에 릴리즈될 예정이라고 하여, 현재는 Vue3 버전 이하에서 사용할 수 있다. 나는 Vue Cli로 Vue2 버전에서 설치를 진행했다. 문서에 기재된 설치 방법 (링크) vue add vuetify 위 명령어를 통해 설치를 진행하게 되면 프리셋을 선택하라는 게 나온다. 나는 Default로 진행..
- Total
- Today
- Yesterday
- 자바스크립트
- Store
- react query
- NUXT
- pagination
- vuetify
- 포트폴리오
- three.js
- Redux
- vue
- vue3
- Core Components
- 타입스크립트
- Cypress
- 호이스팅
- backend
- react native
- CORS
- typescript
- JS
- vuex
- vue.js
- react
- frontend
- react-query
- Front
- 퍼블리셔
- composition
- e2e
- pinia
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |