NightWatch.js를 사용한 JavaScript 기능 테스트

Eric Elliott는 JavaScript 테스트 : JavaScript 테스트 : 단위 테스트, 기능 테스트 및 통합 테스트에 관한 기사를 작성했습니다.이 테스트 유형 및 사용시기를 설명하는 단위 테스트, 기능 테스트 및 통합 테스트.

이 기사는 javaScript 기능 테스트를 자세히 살펴보고 NightWatch.js 라이브러리를 사용하여 시연합니다.

시작하기 전에 기능 테스트가 무엇인지, 왜 중요한지 검토해 봅시다. 간단히 말해서, 기능 테스트는 응용 프로그램이 사용자의 관점에서 예상대로 작동하도록 설계되었습니다.

우리는 단위 테스트 또는 통합 테스트와 같은 기술 테스트에 대해서는 이야기하지 않습니다. 여기서 목표는 사용자가 플랫폼에 로그인, 제품 구매 등과 같은 특정 시나리오를 원활하게 실행할 수 있도록하는 것입니다.

키 포인트

<.> nightwatch.js는 Node.js를 기반으로 한 엔드 투 엔드 테스트 프레임 워크입니다. 웹 브라우저 자동화 용 셀레늄에 의존하여 스크립트 시나리오를 작성한 다음 브라우저에서 자동으로 실행할 수 있습니다.

<..> nightwatch.js는 기계에 node.js를 설치해야하며 Java에서 실행되는 Selenium Webdriver 서버가 필요한 Selenium Webdriver API에 의존하므로 Java Development Kit (JDK 7)를 설치해야합니다. 사용자의 환경.).

nightwatch.js의 구성은 프로젝트의 루트에있는

파일 또는 파일에 배치 할 수 있습니다. 생산 환경. <.> nightwatch.js는 테스트 된 페이지 또는 페이지 스 니펫을 객체로 랩핑하여 기본 HTML 및 공통 구성을 추상화하여 시나리오를 단순화하고 테스트 스위트를 쉽게 유지 관리 할 수있는 페이지 객체 메소드를 지원합니다.

• nightwatch.js 소개 <..> nightwatch.js는 node.js를 기반으로 한 엔드 투 엔드 테스트 프레임 워크로 설명합니다. 웹 브라우저의 자동화를 용이하게하도록 설계된 프로젝트 인 Selenium에 의존합니다.
사용자 친화적 인 구문을 사용하여 NightWatch.js는 시나리오를 "스크립트"한 다음 브라우저에서 자동으로 실행할 수 있습니다 (반드시 비 헤드가 필요하지는 않음).
• 설치 나이트 워치
NightWatch 자체는 node.js 모듈이므로 컴퓨터에 node.js를 설치해야합니다. 가장 쉬운 방법은 NVM과 같은 버전 관리자를 사용하는 것입니다. NightWatch는 NPM에 배포되므로 다른 모듈을 설치하는 것처럼 설치할 수 있습니다. 로 전역으로 설치하거나 를 사용하여 현재 프로젝트에 설치하십시오.
• nightwatch.json Nightwatch는 Selenium Webdriver API에 의존하므로 Selenium WebDriver 서버가 필요합니다. Java에서 실행되므로 환경에 Java Development Kit (JDK 7)도 설치해야합니다. Oracle 웹 사이트에서 JDK를 다운로드 할 수 있습니다. nightwatch.conf.js 다운로드 및 설치가 완료된 후

  를 사용하여 시스템에서 Java를 사용할 수 있는지 확인할 수 있습니다. 마지막 단계는 셀레늄 다운로드 페이지에서 항아리로 패키지 된 셀레늄 독립형 서버를 다운로드하는 것입니다. 프로젝트의 java -version 폴더에 넣는 것이 좋습니다. bin

  좋아요, 이제 준비되었습니다. 시작합시다.

  npm install --save-dev nightwatch

  <<> 구성 NightWatch

  <🎜 🎜> 당신이 상상할 수 있듯이, Nightwatch에는 많은 구성이 있습니다. 다행히 시작하기 위해 모든 것을 알 필요는 없습니다. 구성은 프로젝트의 루트 디렉토리에

  파일 또는 파일에 배치 할 수 있습니다. 후자는 더 유연하고 주석을 추가 할 수 있으므로 후자를 사용하는 것이 좋습니다.

  <<> 참고 : 구성 파일이 작은 구성 객체로 분할되면 개인적으로 읽기가 더 쉽다고 생각하며 JSON 파일은이를 허용하지 않습니다. nightwatch.json <<> <,>이 경우, 우리는 테스트가 특정 셀레늄 구성 및 특정 테스트 설정을 사용하여 nightwatch.conf.js 폴더에있을 것이라고 NightWatch에 알려줍니다. 하나씩 봅시다 :

  <code>your_project/
  |
  |– bin/
  |   |– selenium-server-standalone-2.53.1.jar
  |
  `– package.json</code>

  이 구성 객체를 사용하면 셀레늄이

  에서 실행하도록 지시합니다. 또한 폴더에 다운로드하고 저장 한 셀레늄 서버를 사용하여 자동으로 시작해야합니다. <🎜 🎜> <<> 참고 :보다 고급 사용량을 보려면 모든 셀레늄 옵션 목록을 확인하십시오.

  <<> 실제 테스트 설정을 계속하십시오

  tests NightWatch의 <🎜 옵션은 키가 각 환경의 이름 인 객체를 다른 구성 객체에 매핑하는 객체를 기대합니다. 이 경우, 우리는 사용자 정의 환경을 설정하지 않았으므로 (아직 아님) 기본 환경을 사용합니다. 나중에 준비 또는 생산 테스트 환경을 가질 수 있습니다.

  환경 구성에서는 NightWatch를 열 수있는 URL (예 : 준비 환경의 URL이 다를 것입니다)과 테스트를 실행하는 데 사용해야하는 브라우저를 알려줍니다.

  var SELENIUM_CONFIGURATION = {
    start_process: true,
    server_path: 'bin/selenium-server-standalone-2.53.0.jar',
    host: '127.0.0.1',
    port: 4444
  };
  
  var FIREFOX_CONFIGURATION = {
    browserName: 'firefox',
    javascriptEnabled: true,
    acceptSslCerts: true
  };
  
  var DEFAULT_CONFIGURATION = {
    launch_url: 'http://localhost',
    selenium_port: 4444,
    selenium_host: 'localhost',
    desiredCapabilities: FIREFOX_CONFIGURATION
  };
  
  var ENVIRONMENTS = {
    default: DEFAULT_CONFIGURATION
  };
  
  module.exports = {
    src_folders: ['tests'],
    selenium: SELENIUM_CONFIGURATION,
    test_settings: ENVIRONMENTS
  };

  <<> 참고 :보다 고급 사용을 보려면 모든 테스트 옵션 목록을 확인하십시오. 127.0.0.1:4444 <<> bin <,>이 경우 Firefox를 사용하고 JavaScript를 활성화하며 SSL 인증서를 수락합니다. 한 걸음 더 나아가 특정 브라우저 버전 (<🎜 🎜> 사용) 또는 운영 체제 (<🎜 🎜> 사용)를 지정할 수 있습니다.

  <🎜 🎜> <<> 참고 :보다 고급 사용량을 보려면 모든 기능 옵션 목록을 확인하십시오.

  <<> 알겠습니다. 이제 올바른 구성이 있습니다. 첫 번째 테스트를 작성할 시간입니다! <🎜 🎜> <<> 밤 나이트 워치 테스트 작성 <🎜 🎜> 테스트의 경우 이메일 필드, 비밀번호 필드 및 제출 버튼이있는

  에 위치한 로그인 페이지를 고려할 것입니다. 양식을 제출 한 후 사용자는 "뉴스 피드"를 표시하는 페이지로 리디렉션해야합니다.

  구성에서 테스트가 <🎜 🎜>라는 폴더에 위치하도록 지정합니다. 이 <<폴더와 <🎜 🎜>라는 파일을 만들어 봅시다.

  tests 이 파일은 시나리오를 설명하는 객체를 내 보냅니다. 각 키 (여러가있는 경우)는 테스트 이름이며 수행 할 단계가 포함 된 함수에 매핑됩니다. tests login.js

  테스트 함수는 장면을 설명하는 데 필요한 API를 제공하는 객체를 노출시킵니다. 가장 먼저해야 할 일은 로그인 URL로 이동하는 것입니다. 그런 다음 필드를 채우고 버튼을 누릅니다. 마지막으로 "뉴스 피드"텍스트를 볼 수 있는지 확인하십시오.

  npm install --save-dev nightwatch

  <🎜 🎜> <<> 참고 : 항상

  를 사용하여 셀레늄 세션이 올바르게 닫히도록 명령 목록을 종료하십시오.

  <code>your_project/
  |
  |– bin/
  |   |– selenium-server-standalone-2.53.1.jar
  |
  `– package.json</code>

  <<> 이것은 매우 간단합니다! 이제 테스트를 실행하여 작동하는지 확인할 수 있습니다.

  이것은 우리에게 다음과 같은 결과를 제공해야합니다 : <🎜 🎜>

  <<>

  var SELENIUM_CONFIGURATION = {
    start_process: true,
    server_path: 'bin/selenium-server-standalone-2.53.0.jar',
    host: '127.0.0.1',
    port: 4444
  };
  
  var FIREFOX_CONFIGURATION = {
    browserName: 'firefox',
    javascriptEnabled: true,
    acceptSslCerts: true
  };
  
  var DEFAULT_CONFIGURATION = {
    launch_url: 'http://localhost',
    selenium_port: 4444,
    selenium_host: 'localhost',
    desiredCapabilities: FIREFOX_CONFIGURATION
  };
  
  var ENVIRONMENTS = {
    default: DEFAULT_CONFIGURATION
  };
  
  module.exports = {
    src_folders: ['tests'],
    selenium: SELENIUM_CONFIGURATION,
    test_settings: ENVIRONMENTS
  };

  <<> 참고 : Firefox 47의 출시로 Firefoxdriver의 확장 기반 버전이 작동을 멈췄습니다. 이것은 Firefox 47.1 및 Selenium 2.53.1에서 고정되었습니다. 다른 브라우저를 사용하여 테스트를 실행하려면 프로젝트의 위키를 확인하십시오. <<> 우리가 할 수있는 마지막 일은 매일 나이트 워치 바이너리에 액세스하지 않는 것입니다. .end() <<> 야간 워치 테스트 향상

  <🎜 🎜> 많은 기능 테스트를 통해 많은 중복 정보가 발생하여 유지 보수가 이루어집니다 (예, 테스트 스위트에도 유지 보수가 필요합니다). 이를 방지하기 위해

  페이지 객체 <🎜 🎜>를 사용할 수 있습니다.

  <-to> 엔드 투 엔드 테스트 세계에서 페이지 객체 접근 방식은 페이지 (또는 페이지 조각)를 객체로 감싸는 인기 패턴입니다. 목표는 시나리오를 단순화하기 위해 기본 HTML 및 공통 구성을 추상화하는 것입니다.

  var SELENIUM_CONFIGURATION = {
    start_process: true,
    server_path: 'bin/selenium-server-standalone-2.53.0.jar',
    host: '127.0.0.1',
    port: 4444
  };

  운 좋게도 NightWatch는 페이지 객체를 쉽게 처리 할 수있는 방법이 있습니다. 가장 먼저해야 할 일은 구성에 <🎜 옵션을 추가하는 것입니다. 그러나 가 의미가 있다고 생각합니다.
  이제이 폴더에서

  파일을 만들 수 있습니다. 파일 이름은이 파일에 지정된 모든 구성을 검색하기위한 키로 사용되므로 의미있는 이름을 제공하는 것이 좋습니다. <,>이 파일에서는 향후 시나리오를보다 쉽게 ​​작성할 수 있도록 우호적 인 이름을 가진 URL과 별칭을 지정합니다.

  하드 코딩 URL이 없습니다. 대신, 우리는 환경 구성에 정의 된 옵션에 의존합니다. 이런 식으로, 우리의 페이지 객체는 컨텍스트가 없으며 환경에 관계없이 작동합니다. 페이지 객체를 사용하기 위해 테스트를 수정하는 것은 이제 매우 간단합니다. 먼저 페이지 객체에서 클라이언트를 통해 페이지를 검색해야합니다. 각 페이지 객체는 페이지 객체 파일 이름 (예 : <🎜 🎜>)의 이름을 따서 명명 된 함수로 노출됩니다.

  그런 다음 CSS 선택기를 별칭으로 교체하고 <🎜 🎜> 기호로 접두어를 교체하여 사용자 정의 이름을 참조하고 있음을 나타냅니다. 그게 다야. login()

  <<> 페이지가 아닌 클라이언트 자체의 세션을 종료하는 방법에 주목하십시오. @ <<> 여러 환경 사용 <🎜 🎜> <<>

  npm install --save-dev nightwatch

  다른 환경에서 기능 테스트를 실행할 수있는 능력은 로컬 작업이 사용자 경로를 깨지 않거나 스테이징 및 생산 환경이 동일한 방식으로 작동하도록하는 데 매우 유용합니다.

  특정 환경에서 테스트를 실행하려면 CLI에서 옵션을 사용할 수 있습니다. 이 옵션을 생략하면 기본 환경 (이미 구성 중)이 사용됩니다. 구성에 스테이징 환경을 추가하겠습니다.

  이제 테스트를 실행할 때 옵션은 환경에 따라 다릅니다.

  <🎜 🎜> <<> 요약
  이 모든 것을 요약합시다. NightWatch.js는 엔드 투 엔드 기능 테스트를 작성하기위한 JavaScript 프레임 워크입니다. Selenium Webdriver API에 의존하며 다른 브라우저를 자동으로 실행할 수 있습니다.
  테스트 작성에는 주로 일반적인 사용자 시나리오를 정의하는 것이 포함됩니다. 이를 위해 간단하지만 매우 완전한 API가 있습니다. --env 여기에서 나는 당신에게 그것을 남겨두고 가장 큰 프로젝트에 대한 기능 테스트를 시작하여 사용자 기능을 다시는 절대로 깨뜨리지 않도록 권장합니다!

  <<> nightwatch.js faq (faq) <🎜 🎜> <🎜 🎜>

  JavaScript 테스트에서 NightWatch.js의 주요 목적은 무엇입니까?

  <..> nightwatch.js는 Node.js에 작성된 강력하고 사용하기 쉬운 웹 응용 프로그램 및 웹 사이트 테스트 솔루션입니다. 지속적인 통합을 설정하고 자동 테스트를 작성하는 프로세스를 단순화합니다. Nightwatch.js는 Node.js 단위 테스트를 작성하는 데 사용될 수도 있습니다. 테스트를 신속하게 작성할 수있는 깨끗한 구문을 제공하며 내장 명령 줄 테스트 러너가있어 순차적으로 또는 병렬, 그룹화 또는 독립형 테스트를 실행할 수 있습니다.

  <code>your_project/
  |
  |– bin/
  |   |– selenium-server-standalone-2.53.1.jar
  |
  `– package.json</code>

  NightWatch.js는 다른 JavaScript 테스트 프레임 워크와 어떻게 비교됩니까?

  <..> nightwatch.js는 단순성과 사용 편의성 때문에 눈에 띄게됩니다. 그것은 간결하고 명확한 구문을 가지고있어 쓰기 테스트를 덜 복잡하게 만듭니다. 다른 테스트 프레임 워크와 달리 NightWatch.js에는 테스트 러너가 제공되므로 다른 도구가 필요하지 않습니다. 또한 CSS 및 XPATH SELECTORS를 지원하므로 웹 페이지에서 다른 유형의 요소를 처리 할 때보다 보편적입니다. launch_url NightWatch.js는 엔드 투 엔드 테스트에 사용될 수 있습니까?

  예, NightWatch.js는 엔드 투 엔드 테스트를위한 훌륭한 도구입니다. 웹 응용 프로그램과 사용자의 상호 작용을 시뮬레이션하는 테스트를 작성하여 모든 구성 요소가 예상대로 함께 작동하도록합니다. NightWatch.js를 사용하면 양식 제출, 페이지 탐색 및 복잡한 프로세스와 같은 다양한 시나리오를 시뮬레이션 할 수 있습니다.

  var SELENIUM_CONFIGURATION = {
    start_process: true,
    server_path: 'bin/selenium-server-standalone-2.53.0.jar',
    host: '127.0.0.1',
    port: 4444
  };
  
  var FIREFOX_CONFIGURATION = {
    browserName: 'firefox',
    javascriptEnabled: true,
    acceptSslCerts: true
  };
  
  var DEFAULT_CONFIGURATION = {
    launch_url: 'http://localhost',
    selenium_port: 4444,
    selenium_host: 'localhost',
    desiredCapabilities: FIREFOX_CONFIGURATION
  };
  
  var ENVIRONMENTS = {
    default: DEFAULT_CONFIGURATION
  };
  
  module.exports = {
    src_folders: ['tests'],
    selenium: SELENIUM_CONFIGURATION,
    test_settings: ENVIRONMENTS
  };

  비동기 테스트를 처리하는 방법은 무엇입니까?

  <..> nightwatch.js는 간단한 콜백 메커니즘을 사용하여 비동기 테스트를 처리합니다. nightwatch.js의 각 테스트 명령은 정의 된 순서로 비동기로 실행됩니다. 테스트 러너는 다음 명령을 계속하기 전에 각 명령이 완료되기를 기다립니다. 이렇게하면 모든 명령이 비동기이더라도 올바른 순서로 실행되도록합니다.

  다른 테스트 라이브러리와 함께 NightWatch.js를 사용할 수 있습니까?

  예, NightWatch.js는 다른 테스트 라이브러리와 함께 사용할 수 있습니다. Mocha, Jasmine 및 Qunit과 같은 다른 라이브러리와 완벽하게 작동하도록 설계되었습니다. 이를 통해 여러 테스트 라이브러리를 활용하여 웹 애플리케이션을위한 포괄적 인 테스트 스위트를 만들 수 있습니다.

  내 프로젝트에 대한 NightWatch.js를 설정하는 방법은 무엇입니까?

  nightwatch.js 설정에는 여러 단계가 포함됩니다. 먼저 컴퓨터에 node.js 및 npm을 설치해야합니다. 그런 다음 NPM을 사용하여 NightWatch.js를 설치할 수 있습니다. 설치가 완료된 후에는 테스트 설정 및 옵션을 지정하는 NightWatch.js에 대한 구성 파일을 작성해야합니다. 그런 다음 테스트 작성을 시작할 수 있습니다.

  나이트 워치 .js는 크로스 브라우저 테스트에 사용될 수 있습니까?

  예, NightWatch.js는 크로스 브라우저 테스트를 지원합니다. 자동 브라우저를위한 도구 인 Selenium Webdriver와 완벽하게 통합됩니다. 즉, NightWatch.js를 사용하여 여러 브라우저에서 실행할 수있는 테스트를 작성하여 웹 애플리케이션이 다른 플랫폼에서 올바르게 작동하는지 확인할 수 있습니다.

  nightwatch.js에서 테스트를 디버그하는 방법?

  <..> nightwatch.js는 몇 가지 디버깅 테스트 옵션을 제공합니다. Node.js에서 내장 디버거를 사용하거나 Chrome DevTools와 같은 외부 도구를 사용할 수 있습니다. NightWatch.js는 또한 세부 오류 메시지와 스택 추적을 제공하여 테스트가 실패 할 때 문제를 쉽게 식별하고 수정할 수 있도록합니다.

  모바일 테스트에 nightwatch.js를 사용할 수 있습니까?

  NightWatch.js는 주로 웹 테스트에 사용되지만 인기있는 모바일 테스트 프레임 워크 인 Appium과 통합하여 모바일 테스트에도 사용할 수 있습니다. 이를 통해 웹 테스트와 동일한 구문 및 도구를 사용하여 모바일 응용 프로그램에 대한 테스트를 작성할 수 있습니다.

  nightwatch.js를 사용하여 테스트를 병렬로 실행하는 방법은 무엇입니까?

  <..> nightwatch.js는 기본적으로 병렬 테스트 실행을 지원합니다. 구성 파일에서 병렬로 실행할 테스트를 지정할 수 있습니다. 테스트를 실행할 때 NightWatch.js는 여러 작업자 프로그램에 테스트를 자동으로 할당하여 전체 테스트 실행 시간을 가속화합니다.

  출력은 원래 이미지 형식 및 배치를 유지하면서 원래의 의미를 보존하면서 흐름과 가독성을 향상시키기 위해 해석 및 재구성되었습니다.

위 내용은 NightWatch.js를 사용한 JavaScript 기능 테스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!