cyclope 다운로드 - cyclope 소스 코드 다운로드

cyclope

기타 소스코드

v2.7.1

다운로드

사이클롭

Cypress DOM 스냅샷 및 클라우드의 일관된 이미지 차이

블로그 게시물

테스트 실패 시 페이지 저장

비디오

Cyclope: Cypress 테스트가 실패할 경우 스타일과 함께 전체 페이지 저장
Cypress 테스트의 LocalStorage를 사용하여 초기 데이터 설정
드래그 항목 테스트
cy.session 명령 소개

코스 수업

Swag 매장 테스트

보너스 39: 테스트 실패 시 전체 HTML 페이지 저장

설치하다

이 플러그인을 프로젝트에 추가하세요. Cypress가 개발 종속성이라고 가정

 $ npm i -D cyclope# 또는 원사$ 원사를 선호하는 경우 -D cyclope 추가

지원 파일 또는 개별 사양 파일의 플러그인을 포함합니다.

 // cypress/support/index.js// https://github.com/bahmutov/cyclopeimport 'cyclope'

Cypress v10의 구성 파일에 플러그인 포함

 // cypress.config.jsconst { 정의구성 } = require('cypress')module.exports = 정의구성({
  e2e: {setupNodeEvents(on, config) { // https://github.com/bahmutov/cyclope require('cyclope/plugin')(on, config) // 변경된 내용과 함께 // 구성 개체를 반환하는 것이 중요합니다. 환경 변수는 구성을 반환합니다},
  },})

Cypress v9의 플러그인 파일에서 플러그인을 포함합니다.

플러그인 파일에서 플러그인을 포함합니다.

 // cypress/plugins/index.jsmodule.exports = (on, config) => {
  // https://github.com/bahmutov/cyclope
  require('사이클로프/플러그인')(on, config)

  // 구성 객체를 반환하는 것이 중요합니다.
  // 변경된 환경 변수를 사용하여
  반환 구성}

현재 페이지 저장

리소스를 포함하여 현재 웹 애플리케이션 페이지를 저장해야 하는 경우

 // cypress/integration/spec.jsit('페이지를 저장합니다', () => {
  // 일반적인 Cypress 명령
  cy.contains('.some-selector', 'some text').should('be.visible')// 앱이 원하는 상태에 도달하면// "page".savePage(' 폴더에 페이지를 저장합니다. 페이지')})

이미지, CSS 등의 모든 로컬 리소스는 로컬 파일로 저장해야 합니다. zip 아카이브를 만들 수 있습니다

 // .zip 확장자를 사용하여 폴더를 filecy.savePage('page.zip')으로 압축합니다.

zip을 저장할 때 함수는 파일 이름, 너비 및 높이 속성이 있는 객체를 생성합니다.

옵션

removeIframes (기본값은 false)는 저장하기 전에 페이지에서 모든 <iframe> 요소를 제거합니다.

 cy.savePage('name', {removeIframes: true })

ignoreFailedAssets (기본적으로 false)는 자산의 일부를 로드할 수 없는 경우 실패를 무시합니다.

 cy.savePage('name', {ignoreFailedAssets: true })

실패한 페이지 저장

이 모듈에는 테스트가 실패한 경우 페이지를 저장하는 유틸리티 기능이 포함되어 있습니다. 이 함수를 지원 파일에서 afterEach 후크로 사용할 수 있으므로 모든 테스트에 적용됩니다.

 // cypress/support/index.js// https://github.com/bahmutov/cyclopeimport { savePageIfTestFailed } from 'cyclope'afterEach(() => {
  savePageIfTestFailed()
  // 프로젝트의 자산 일부가 손상된 경우
  savePageIfTestFailed({ignoreFailedAssets: true })})

기본적으로 페이지는 비대화형 모드 cypress run 에서만 저장됩니다. cypress open 모드로 실행 중에도 페이지를 저장하고 싶다면 saveInteractive 옵션을 사용하세요.

 savePageIfTestFailed({ saveInteractive: true })

모든 페이지는 cypress/failed/<spec name>/<test name> 폴더에 저장됩니다.

팁: cypress/failed CI에 테스트 아티팩트로 저장하세요. 테스트가 실패하면 folder/index.html 다운로드하고 열어 실패 순간의 애플리케이션 구조를 검사합니다.

사이클롭

별칭 clope

외부 Cyclope 이미지 서비스를 사용하여 일관된 PNG 이미지를 생성합니다. Cypress를 실행할 때 CYCLOPE_SERVICE_URL 및 CYCLOPE_SERVICE_KEY 환경 변수가 필요합니다. 호버 지원

 cy.get('#theme-switcher').realHover().cyclope('hover-over-sun.png')// 생성된 "hover-over-sun.png" 이미지를 저장합니다.// Equivalentcy.get(' #테마 전환기').realHover()cy.clope()

Cyclope 서비스가 구성되지 않은 경우 DOM 업로드 및 이미지 생성을 건너뛰려면 Cypress 환경 옵션을 설정합니다(예: cypress.json 파일 사용).

 { "env": {"cyclope": { "skipUploadWithoutUrl": true}
  }
}

디버깅

환경 변수 DEBUG=cyclope 로 테스트를 실행하면 디버그 모듈을 사용하여 터미널에서 자세한 디버그 메시지를 활성화할 수 있습니다.

$ DEBUG=cyclope npx cypress run

예

todo-app-for-cyclope
스도쿠 모의 모듈

작은 글씨

@bahmutov
glebbahmutov.com
블로그
비디오
프레젠테이션
사이프러스.팁

라이센스: MIT - 코드로 무엇이든 할 수 있습니다. 하지만 작동하지 않더라도 저를 비난하지 마세요.

지원: 이 모듈에서 문제를 발견하면 이메일/트윗/Github에서 문제 공개

MIT 라이센스

본 소프트웨어 및 관련 문서 파일("소프트웨어")의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.

소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이든 묵시적이든 어떠한 종류의 보증 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 작성자나 저작권 보유자는 계약, 불법 행위 또는 기타 행위로 인해 소프트웨어나 사용 또는 기타 거래와 관련하여 발생하는 모든 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. 소프트웨어.

확장하다

추가 정보