차이점이 뭐야?

JavaScript 전용

(Chrome 전용) - not anymore!

모카 전용

테스트 코드 자체가 앱 코드 자체와 함께 브라우저에서 실행되기 때문에 빠릅니다.

설정

설치 전제 조건

Node.js

터미널을 열고 node --version를 입력합니다. - 및 ?
노드를 찾지 못한 경우 설치Node

사이프러스 설치

NPM(JavaScript의 패키지 관리자)은 패키지를 테스트 코드와 동일한 폴더에 로컬로 설치합니다. 먼저 mkdir [foldername] 폴더입니다. 및 cd [foldername]를 입력합니다.
npm init -y를 실행하여 package.json 가져오기
여기에서 Cypress가 설치되어 있음을 등록할 수 있습니다.

설치npm install cypress실행 npx cypress open
이제 IDE에서 폴더를 찾을 수 있습니다. 하나는 많은 예제 테스트와의 통합입니다.

첫 번째 테스트

Not-todo-List Heroku & Strapi로 만들었습니다. 늦어서 죄송합니다. 백엔드를 위해 잠시만 기다려 주세요.

하지 말아야 할 두 가지 "먼지 투성이 창문에 그림 그리기"와 더 중요한 "사이프러스 연구 연기"를 추가해 보겠습니다.

통합 폴더로 이동하고 예제를 삭제합니다. 2. nottodoList.spec.js 파일을 만듭니다.

VS Code 자동 완성 지원의 경우 페이지 상단에 /// <reference types="cypress" />를 추가합니다.

it 함수 내에 테스트를 작성합니다.

/// <reference types="cypress" />
it('should navigate to the Not-Todo App', () => {
  cy.visit('https://aquin-todolist.netlify.app/')
})

실행 npx cypress open

it는 2개의 매개변수를 허용합니다. 문자열로 된 테스트 이름 및 테스트 코드가 포함된 콜백 함수입니다.

it는 객체cy + 방문 방법을 사용하여 페이지

를 방문합니다.

실패하도록 시도하십시오-좋은 오류 설명이 있습니다.

테스트 아래의 웹 사이트에서 작업을 완료하기 위해 목표를 조준하십시오.

IDE에서 과거


.type() 바로 뒤에 .get 명령을 추가합니다.



합격!!!

안정성을 위해 지연 추가

.get 함수에는 두 번째 매개변수 시간 제한이 있습니다. 입력을 받을 때까지 기다리도록 추가합니다.

cy.get('input', {timeout: 6000}).type('paint flowers on dusty windows')

추가를 클릭하여 Notodo를 목록에 추가합니다.

입력 받기

cy.visit()는 페이지가 200 상태 코드와 함께 text/html 콘텐츠를 보낼 것으로 예상합니다.

cy.request()는 원격 서버가 존재하고 응답을 제공할 것으로 예상합니다.

cy.contains()는 컨텐츠가 있는 요소가 결국 DOM에 존재할 것으로 예상합니다.

cy.get()은 요소가 결국 DOM에 존재할 것으로 예상합니다.

.find()는 또한 요소가 결국 DOM에 존재할 것으로 예상합니다.

.type() 은 요소가 결국 유형이 가능한 상태가 될 것으로 예상합니다.

.click()은 요소가 결국 실행 가능한 상태가 될 것으로 예상합니다.

.its()는 결국 현재 개체에서 속성을 찾을 것으로 예상합니다.

CSS 선택기

cy.get('textarea.post-body')

텍스트 콘텐츠

cy.contains("nichts überlegen")

요소와 상호 작용

cy.get('textarea.post-body').type('This is an excellent post.')

.type() - 입력을 입력합니다.

.blur() - 초점이 맞춰진 DOM 요소를 흐리게 만듭니다.

.focus() - DOM 요소에 초점을 맞춥니다.

.clear() - 입력 또는 텍스트 영역의 값을 지웁니다.

.check() - 확인란 또는 라디오를 선택합니다.

.uncheck() - 확인란을 선택 취소합니다.

.select() - 에서 를 선택합니다.

.dblclick() - DOM 요소를 두 번 클릭합니다.

.rightclick() - DOM 요소를 마우스 오른쪽 버튼으로 클릭합니다.

주장

  .should('have.class', 'active')
  .and('have.attr', 'href', '/users')