공부 정리 공부 정리

테스트/E2E 테스트 (Vue)

• E2E 테스트 - Headless 테스트 및 테스트 동영상 생성

  테스트/E2E 테스트 (Vue) 2021. 9. 15. 10:36

  E2E 테스트 - Headless 테스트 및 테스트 동영상 생성 - Headless Browser(헤드리스 브라우저)는 GUI 없는 웹 브라우저 - CLI를 통해 실행 1. /package.json 수정 ... "scripts": { ... "test:e2e": "cypress open", "test:e2e:headless": "cypress run" ... 2. npm run test:e2e:headless 실행 - /cypress/videos 폴더가 생성 - 해당 폴더 내에 테스트 동영상이 생성됨

  Read More
• E2E 테스트 - About 페이지 이동 시나리오 테스트

  테스트/E2E 테스트 (Vue) 2021. 9. 15. 07:57

  E2E 테스트 - About 페이지 이동 시나리오 테스트 1. /cypress/integration/moveAbout.test.js 생성 /** * 검색(메인) 페이지로 접근한 후, * Header About 네비게이션 버튼을 클릭, * About 페이지에서 정보를 확인 * 그리고 영화 상세 페이지로 이동한 후, * Header 사용자 로고를 클릭하면 * 다시 About 페이지에서 정보를 확인 */ describe('About 페이지 이동', () => { it('메인 페이지로 접근', () => { cy.visit('/') cy.get('header .nav-link.active') .contains('Search') }) it('About 페이지로 이동', () => { cy.get('header ...

  Read More
• E2E 테스트 - 영화 검색 시나리오 테스트

  테스트/E2E 테스트 (Vue) 2021. 9. 11. 20:27

  E2E 테스트 - 영화 검색 시나리오 테스트 1. /cypress/integration/searchMovie.test.js 생성 /** * 검색(메인) 페이지로 접근한 후, * 영화 제목을 'frozen'으로, 표시 개수를 30개로 입력, * 'Apply' 버튼을 클릭해 영화 목록을 검색 (검색 조건에 맞게 출력되는지 확인) * 영화 목록에서 'Frozen II' (겨울왕국2) 영화 아이템을 클릭하면, * 영화 상세 정보 페이지로 이동 * 상세 정보 페이지에서 해당 영화 정보를 확인 */ describe('영화 검색(겨울왕국2', () => { it('검색 페이지로 접근', () => { cy.visit('/') cy.get('header .nav-link.active') .contains('Search..

  Read More
• E2E 테스트 - 테스트 환경 구성

  테스트/E2E 테스트 (Vue) 2021. 9. 11. 02:38

  E2E 테스트 - 테스트 환경 구성 1. npm i -D cypress eslint-plugin-cypress 설치 2. package.json 수정 { ... "scripts": { ... "test:e2e": "cypress open" }, ... } 3. .eslintrc.js 수정 module.exports = { env: { ... 'cypress/globals': true }, plugins: [ 'cypress' ], ... } 첫 테스트 1. /cypress/integration/first.test.js 생성 describe('첫 번째 테스트', () => { // E2E(cypress) 테스트 it() = 단위 테스트 test() it('프로젝트 페이지 이동', () => { // E2E..

  Read More