Cypress로 E2E 테스트-01-소개

네트워크는 이미 진화했다.마지막으로 테스트도 마찬가지다.Cypress은 브라우저에서 실행되는 모든 내용에 대해 신속하고 간단하며 신뢰할 수 있는 테스트를 제공합니다.

소개


Cypress는 완벽한 엔드 투 엔드 테스트 환경을 제공합니다.지금까지는 단도직입적으로 테스트하는 것이 쉽지 않았다.개발자들이 증오하던 부분이지만 not anymore.Cypress는 설정, 작성, 실행, 디버깅 테스트를 간단하게 합니다.

누가 측백나무를 씁니까?

Cypress 사용자는 일반적으로 현대 자바스크립트 프레임워크를 이용하여 웹 응용 프로그램을 구축하는 개발자나 QA 엔지니어이다.
Cypress를 사용하면 모든 유형의 테스트를 작성할 수 있습니다.
  • 엔드 투 엔드 테스트
  • 통합 테스트
  • 단원 테스트
  • Cypress는 브라우저에서 실행되는 모든 내용을 테스트할 수 있습니다.

    측백나무는 무엇이 다릅니까?



  • Cypress는 셀렌을 사용하지 않습니다.


    구조가 완전히 다르다.대부분의 엔드 투 엔드 테스트 도구는 브라우저 밖에서 실행되고 네트워크에서 원격 명령을 실행합니다.측백나무는 정반대다.Cypress는 응용 프로그램과 같은 실행 순환에서 실행됩니다.Cypress 뒤에는 Node.js 서버 프로세스가 있습니다.측백나무와 노드.js 프로세스는 끊임없이 서로 통신하고 동기화하며 임무를 수행합니다.이 두 부분(프런트엔드와 백엔드)에 접근하면 응용 프로그램의 이벤트에 실시간으로 응답할 수 있고 브라우저 밖에서 더 높은 권한이 필요한 작업을 처리할 수 있습니다.

  • Cypress 테스트는 JavaScript로만 작성


    Cypress는 웹 브라우저에서 실행되는 모든 내용을 테스트합니다.Cypress를 둘러싼 모든 구조는 현대 자바스크립트 프레임워크를 더욱 잘 처리하기 위해 구축된 것이다.우리는 수백 개의 프로젝트가 최신 React, Angular, Vue, Elm 등 프레임워크를 사용한다.Cypress는 이전 서버에서 보여준 페이지나 응용 프로그램에도 적용됩니다.

  • 측백나무는 모든 기능을 하나로 모인다


    작성부터 테스트까지 다양한 도구의 협동 작업이 필요합니다.Cypress를 사용하면 한 도구에서 여러 도구를 얻을 수 있습니다.테스트 세트를 설정하기 위해 10개의 단독 도구와 라이브러리를 설치할 필요가 없습니다.우리는 당신이 이미 잘 알고 있을 수 있는 동종의 가장 좋은 도구를 채택하여 그것들이 틈새 없이 협동하여 일을 할 수 있도록 했다.

  • 개발자 및 QA 엔지니어를 위한 Cypress


    우리의 목표 중 하나는 테스트 구동의 개발을 끝까지 테스트하는 현실로 만드는 것이다.응용 프로그램을 구축할 때 Cypress를 사용할 때 최상의 상태입니다.우리는 당신에게 가능한 한 빨리 코드를 작성할 수 있는 능력을 부여합니다.

  • Cypress는 훨씬 빨리 달린다


    이러한 구조 개선은 처음으로 완전한 엔드 투 엔드 테스트를 통해 TDD를 실행하는 능력을 해제했다.Cypress의 구축으로 테스트와 개발이 동시에 진행될 수 있습니다.당신은 더욱 빨리 개발할 수 있으며, 동시에 테스트를 통해 전체 개발 과정을 구동할 수 있습니다.
  • 특징


  • 시간여행:


    네, 잘 들었어요.시간여행이 마침내 가능해졌다.Cypress는 snapshots을 테스트로 실행합니다.Command Log의 명령에 마우스를 올려 각 단계에서 발생하는 상황을 정확하게 확인합니다.

  • 실시간 다시 로드:


    테스트를 변경할 때마다 Cypress가 자동으로 다시 로드됩니다.응용 프로그램에서 실시간으로 실행되는 명령을 참조하십시오.

  • 자동 대기:


    테스트에 wait 또는 sleep을 추가하지 마십시오.Cypress는 명령과 단언을 자동으로 기다린 다음 계속합니다.더 이상 async 지옥은 없습니다.

  • 스파이, 스텁 및 시계:

    functions, server responses 또는 timers의 행위를 검증하고 제어합니다.당신이 좋아하는 단원 테스트 기능은 바로 당신의 손끝에 있습니다.

  • 네트워크 트래픽 제어:


    서버와 관련되지 않고 control, stubtest 에지 사례를 쉽게 처리할 수 있습니다.너는 마음대로 네트워크 데이터를 차단할 수 있다.

  • 화면 캡처 및 비디오:


    고장 시 자동으로 획득되는 screenshots을 보거나 videos에서 실행될 때 전체 테스트 세트의 CLI을 보십시오.

  • 브라우저 간 테스트:


    FirefoxChrome-family 브라우저(EdgeElectron 포함)에서 테스트를 로컬로 실행하고 연속 집적 파이프에서 가장 좋은 방식으로 실행합니다.

  • 설치 및 요구 사항


  • 시스템 요구 사항


  • 운영 체제


    Cypress는 컴퓨터에 설치된 데스크톱 응용 프로그램입니다.데스크톱 응용 프로그램은 다음 운영 체제를 지원합니다.

  • macOS: 10.9 이상(64비트만)

  • Linux: Ubuntu 12.04 이상, Fedora 21 및 Debian 8(64비트만)
  • Ubuntu/Debian의 경우
    
      sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
    
    
  • CentOS의 경우
    
      yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib
    
    
  • 창문: 7 이상

  • 노드회사 명


    Cypress를 설치하려면 npm을 사용하십시오.Node.js 10 or 12 and above

  • 설치 중


    다음과 같은 이유로 npm을 사용하여 Cypress를 설치하는 것이 좋습니다.
  • Cypress의 버전은 다른 종속성과 같습니다.

  • 이것은 연속 통합에서 Cypress를 실행하는 것을 간소화합니다.
    
      cd /your/project/path
      npm install cypress --save-dev
    
    
    또는 항상 yarn을 사용하여 설치할 수 있습니다.
    
      cd /your/project/path
      yarn add cypress --dev
    
    

  • 개방식 측백나무

    npm을 사용하여 설치하면 Cypress은 현재 ./node_modules 디렉터리에 설치되어 있으며, 2진 실행 파일은 ./node_modules/.bin에서 접근할 수 있습니다.
    이제 다음 방법 중 하나로 프로젝트 루트에서 Cypress을 열 수 있습니다.
  • npm bin 바로 가기 사용
    
      $(npm bin)/cypress open
    
    

  • npm 스크립트 추가package.json 파일에서:
    
      {
          "scripts": {
              "cypress:open": "cypress open"
          }
      }
    
    
    이제 다음과 같이 프로젝트 루트 디렉토리에서 명령을 호출할 수 있습니다.
    
      npm run cypress:open
    
    

  • 다른 옵션(예: yarn 또는 npx)을 사용하여 항상 Cypress를 열 수 있습니다.
    
      # using yarn
      yarn run cypress open
      # using yarn
      npx cypress open
    
    
  • 다음은 뭐예요?


    🎉 그렇습니다!현재 Cypress을 프로젝트의 테스트 프레임워크로 설정할 수 있습니다.이 시리즈의 다음 부분에서, 우리는 당신에게 Cypress 기술을 사용하여 테스트를 작성하고, 실행하고, 디버깅하는 것을 지도할 것입니다.만약 당신이 이 문장에 대해 어떤 생각이나 평론이 있다면, 평론을 발표해 주십시오.그 전에 건배합시다.🥳 🙌

    좋은 웹페이지 즐겨찾기