>웹 프론트엔드 >JS 튜토리얼 >Selenium Webdriver 및 Mocha로 JavaScript를 테스트하는 방법

Selenium Webdriver 및 Mocha로 JavaScript를 테스트하는 방법

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌원래의
2025-02-16 13:21:09440검색

How to Test Your JavaScript with Selenium WebDriver and Mocha

코어 포인트

<.> mocha.js는 node.js를 기반으로하는 기능이 풍부한 JavaScript 테스트 프레임 워크로, Selenium Webdriver 3 및 NodeJS와 함께 JavaScript 기능 테스트를 작성하는 데 사용할 수 있습니다. 이를 위해서는 NodeJS 및 JavaScript 프로그래밍 언어의 기본 사항에 익숙해야합니다.

Mocha는 테스트 코드 및 테스트 케이스 모듈에 테스트 코드를 구축하기위한 API를 제공하여 실행 및 보고서 생성을 가능하게합니다. 테스트 스위트 셋업 및 파열 기능뿐만 아니라 테스트 사례 설정 및 분해 기능을 지원합니다.
    Selenium Webdriver는 웹 브라우저를 제어하고 사용자 동작을 시뮬레이션하며 Mochajs와 통합 될 수있는 라이브러리입니다. 브라우저를 제어하기 위해 "바인딩"이라는 특정 언어 라이브러리 API를 제공합니다.
  • Mocha와 함께 사용되는 비동기 함수는 예상치 못한 결과를 피하기 위해 올바르게 처리해야합니다. 이것은 "완료"기능을 콜백 체인에 전달하거나 약속을 반환하여 수행 할 수 있습니다.
  • WebDriverio, Protractor 및 CodesEptjs와 같은 다른 프레임 워크는 사용자를위한 일부 구성을 숨기고 더 나은 스크립팅 경험을 위해 향상된 약속 처리를 제공하는 래퍼 솔루션을 제공합니다.
  • 이 기사는 원래 TestProject에 게시되었습니다.
  • JavaScript에서 기능 테스트를 작성하려면이 튜토리얼은 UI 자동화 엔지니어에게 Selenium Webdriver 3, Mocha 및 Nodejs를 사용하여 JavaScript 테스트를위한 완벽한 구조화 된 참조 자료를 제공합니다.
  • JavaScript는 오늘날 유비쿼터스 웹 언어로 과거의 "악명 높은"과거를 극복하는 것처럼 보이며 고객뿐만 아니라 서버에게도 더 안정적인 플랫폼이되었습니다. Mocha.js (또는 Mocha for Short)는 Node.js를 기반으로하는 기능이 풍부한 JavaScript 테스트 프레임 워크입니다.
  • 참고 :이 JavaScript 자습서를 배우려면 Nodejs 및 JavaScript 프로그래밍 언어의 기본 사항에 익숙해야합니다.
  • 튜토리얼 개요 :
  • 모카 테스트 빌드

소개 설치 chai Assertion 모듈 설치 테스트 스위트 및 테스트 케이스 구조 mocha 로 테스트를 구축합니다 Mocha를 실행하는 테스트 스위트 및 테스트 케이스 비동기 테스트 코드의 동기화 관리

JavaScript Selenium 3 API를 사용하여 Mochajs 와 통합됩니다

셀레늄 소개 셀레늄 설치 WebDriver Construct Mochajs를 Selenium webdriver 3 와 통합합니다

사용 된 버전 :

    <: :> 노드 버전 : 6.10.1 (lts) <: :> 모카 : 2.5.3
  • WebDriverJS : 3.3.0
  • mocha 로 테스트를 구축합니다
Mocha 소개 앞에서 언급했듯이 Mocha는 노드에서 테스트를 실행하는 JavaScript 테스트 프레임 워크입니다. Mocha는 노드 패키지 (NPM을 통해) 형태로 제공되므로 Node의 표준 "Assert"기능을 Chaijs와 같은 어설 션 라이브러리로 바꿀 수 있습니다. 또한 Mocha는 프론트 엔드 및 단위 테스트 자동화의 트렌드 연구에서 언급 한 또 다른 인기있는 테스트 자동화 프레임 워크 인 Jasmine과 유사한 몇 가지 구성 요소를 가지고 있습니다.
    Mocha는 테스트 코드를 테스트 스위트 및 테스트 케이스 모듈에 실행 한 다음 테스트 보고서를 생성하는 방법을 지정하는 API를 제공합니다. Mocha는 두 가지 작동 모드의 명령 줄 (CLI) 또는 프로그래밍 (Mocha API)을 제공합니다.
  1. 설치 mocha

    CLI에서 Mocha를 사용하려면 Node.js로 전체적으로 설치해야합니다.

  2. chai Assertion 모듈 설치
테스트 스위트 및 테스트 케이스 구조 Mocha에서 테스트 스위트는 콜백 함수를 수락하는 "설명"키워드로 정의됩니다. 테스트 스위트에는 하위/내부 테스트 스위트가 포함되어 있으며 자체 하위 테스트 스위트 등을 포함 할 수 있습니다. 테스트 케이스는 콜백 함수를 수용하고 테스트 코드를 포함하는 "IT"기능으로 표시됩니다. Mocha는 테스트 스위트 설정 및 테스트 케이스 설정 기능을 지원합니다. "이전"은 테스트 스위트 설정을 의미하는 반면 "전"는 테스트 케이스 설정을 의미합니다. "Earch"는 실제로 제품군의 모든 사용 사례에 대한 일반적인 설정이며 각 유스 케이스 전에 실행됩니다.

설정과 마찬가지로 Mocha는 테스트 스위트 및 테스트 케이스 분해 기능을 지원합니다. "After"는 테스트 스위트 분해를 의미하며 "Afterach"는 테스트 사례 분해를 의미하며,이 두 기능은 각각 테스트 스위트와 각 테스트 케이스 이후에 실행됩니다.

테스트 _suite.js와 같은 테스트 스위트를 "호스팅"하고 다음을 작성하는 파일을 만듭니다

실행 모카 테스트 스위트 및 테스트 케이스 Mocha는 세 가지 테스트 실행 방법을 지원합니다. 전체 테스트 스위트 파일, "GREP"모드로 필터링 된 테스트 및 디렉토리 트리 GREP 필터링 의 테스트 검색 (재귀 옵션)이 지원됩니다. 전체 테스트 스위트 파일을 실행하십시오 :

특정 테스트 스위트 파일에서 특정 제품군 또는 테스트를 실행하십시오.

키트를 선택하면 모든 하위 키트 및/또는 테스트가 수행됩니다.

디렉토리 트리에서 재귀 적으로 검색하여 특정 제품군 또는 테스트 파일을 실행하십시오.
<code>npm install -g mocha</code>

확장에 대한 CLI 옵션 :

비동기 테스트 코드의 동기화 관리 Mocha와 함께 비동기 기능을 사용하고 올바르게 처리되지 않으면 대처에 어려움이있을 수 있습니다. 테스트 사례 (예 : HTTP 요청, 파일, 셀레늄 등)에서 비동기 코드를 사용하려면 다음 지침을 따라 예기치 않은 결과를 극복하십시오.
  1. 완료 함수
  2. 테스트 함수 (IT)에서 완료 함수를 콜백 체인으로 전달해야합니다. 이는 마지막 단계 후에 실행되도록합니다.
다음 예제는 완료 된 함수를 강조합니다. 이 경우 테스트 기능의 끝에서 3 초 타임 아웃이 발생합니다.

약속으로 돌아 가기

반환 약속은 비동기 함수를 사용할 때 Mocha가 모든 코드 라인을 실행하도록하는 또 다른 방법입니다 (이 경우 "완료"기능은 필요하지 않습니다.)
<code>npm install -g mocha</code>
  1. JavaScript Selenium 3 Mochajs와의 통합

셀레늄 소개 셀레늄은 웹 브라우저를 제어하고 사용자 동작을 시뮬레이션하는 라이브러리입니다. 보다 구체적으로, Selenium은 사용자에게 "Binding"이라는 특정 언어 라이브러리 API를 제공합니다. "바인딩"은 클라이언트 역할을하여 중간 구성 요소에 대한 요청을 수행하고 궁극적으로 브라우저를 제어하기위한 서버 역할을합니다.

셀레늄 API 또는 바인딩은 이제 모든 인기있는 개발 언어로 존재합니다. 모든 언어 구현은 이제 API 기능 명명 규칙의 일관성을 유지하는 데 동의합니다.
<code>npm install --save chai</code>
중간 구성 요소는 실제 웹 드라이버, 각 셀레늄 패키지에서 로컬로 발견 된 셀레늄-스탠다 론-서버와 공급 업체의 기본 브라우저 제어 드라이버 (Mozilla의 Geckodriver, Chrome의 Chromedriver 등) 일 수 있습니다. 또한 Selenium Webdriver는 "JSONWIRED 프로토콜"을 통해 브라우저 드라이버와 통신하고 W3C 웹 표준이됩니다.
    셀레늄 설치 우리는 셀레늄과 모 차즈의 통합을 탐구하기 전에 셀레늄과 노드 즈 구현에 대해 빠르게 배울 것입니다.
  1. JavaScript의 Selenium API (또는 Selenium JavaScript 바인딩)를 사용하려면 해당 모듈을 설치해야합니다.

    이 시점에서 JavaScript Selenium webdriver를 WebDriverJS (NPM은 아님)라고도 할 수 있습니다. WebDriveJS는 다른 라이브러리/모듈 (예 : WebDriverio, Protractor 등)과 다릅니다. Selenium-Webdriver는 공식 오픈 소스 기본 JavaScript Selenium 라이브러리이며, 다른 라이브러리는 WebDriverJS API 위에 구축 된 래퍼 라이브러리/프레임 워크이며 가용성 및 유지 보수를 향상 시킨다고 주장합니다.

    nodejs 코드에서 모듈은 다음과 같은 방식으로 사용됩니다.
  2. WebDriver Construct 셀레늄을 사용할 수 있으려면 해당 "웹 드라이버"객체를 구축 한 다음 브라우저를 제어해야합니다. 아래에서는 "Builder"패턴을 사용하여 여러 기능을 연결하여 WebDriver 객체를 구축하는 방법을 알 수 있습니다.
옵션이있는 빌더

위 코드에서, 우리는 forbrowser () 메소드가 Firefox를 명시 적으로 설정하더라도 여러 브라우저의 구성을 집계하는 WebDriver 객체를 성공적으로 구축했습니다.

사용자는 런타임에 Selenium_browser 환경 변수를 설정하여 원하는 브라우저를 설정할 수 있습니다. 브라우저 속성에는 테스트중인 브라우저에 따라 여러 유형의 정보가 포함될 수 있습니다. 예를 들어, Mozilla의 속성에서 다음과 같이 필요한 "프로파일"구성을 설정할 수 있습니다.

그런 다음 위의 건축업자 스 니펫에서 우리는 다음을 추가 할 수 있습니다 :

<code>npm install -g mocha</code>
특징이있는 빌더 Selenium Webdriver JavaScript API 문서는 웹 드라이버를 구축하는 몇 가지 방법을 설명합니다. 또 다른 가능한 접근법은 필요한 모든 드라이버 구성을 기능하도록 설정하는 것입니다.

는 정전 기능이 완료된 후 설정이 설정되면 구성을 덮어 쓸 것입니다 (예 : 프록시 구성).

셀레늄 웹 드라이버 제어 흐름 및 약속 관리 <code>npm install --save chai</code> 셀레늄 웹 드라이버는 JavaScript와 Nodejs가 비동기 원리를 기반으로하기 때문에 비슷하게 동작합니다. 콜백 피라미드를 피하고 테스트 엔지니어가 스크립팅 경험 및 코드 가독성 및 유지 관리를 향상시키기 위해 셀레늄 웹 드라이버 객체에는 "ControlFlow"를 사용하는 약속 관리자가 포함되어 있습니다. "ControlFlow"는 비동기 WebDriver 명령 실행을 담당하는 클래스입니다.

실제로, 각 명령은 드라이버 객체에서 실행되며 약속을 반환합니다. 구문 분석 된 약속 값을 처리 할 필요가 없다면 다음과 같이 다음 명령을 "그런 다음"에 둥지로 묶을 필요가 없습니다.

JavaScript 테스트를위한 팁 Selenium Webdriver 및 Mocha

드라이버는 약속 객체가 아닌 웹 드라이버 객체입니다 driver.getTitle () 또는 driver.get (url) 또는 기타 셀레늄 명령이 약속 객체를 반환합니다!

<code class="language-javascript">describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    it("Test-1", function(){

        // 测试代码
        // 断言

    });

    it("Test-2", function(){

        // 测试代码
        // 断言

    });

    it("Test-3", function(){

        // 测试代码
        // 断言

    });

});</code>
이것은 우리가 다음을 수행 할 수 있음을 의미합니다

또한 드라이버 자체가 비동기식이기 때문에 다음 작업은 작동하지 않습니다.

참고 : 제목은 실제 구문 분석 값이 아니라 약속 대상입니다.

Mochajs Selenium Webdriver 일반적으로 말하면, 셀레늄 웹 드라이버는 일반적인 nodejs 스크립트에 사용되기 때문에 mochajs와 통합 될 수 있습니다. 그러나 Mocha는 Done ()을 호출하거나 약속을 반환하기 전에 비동기 기능이 언제 완료되는지 알지 못하므로 매우 신중하게 처리해야합니다.

약속 기반 셀레늄 명령은 자동으로 등록되어 웹 드라이버 명령이 올바른 순서로 실행되고 약속을 반환해야합니다.

다음 코드는 (이전, 전, Aftereach) 또는 테스트 케이스 본문을 보여줍니다.
<code class="language-bash">mocha /path/to/test_suite.js</code>

다음은 수행됩니다 :


    "my_service"의 브라우저 페이지를로드합니다 id "username"가있는 텍스트 필드를 찾으십시오 "my_username"가 포함 된 id "username"으로 텍스트 필드를 채우십시오 페이지 제목을 검색하고 "my_title"와 동일하는지 확인하십시오. <ex> 웹 드라이버 종료 및 브라우저 창이 닫힙니다. 브라우저 프로세스가 종료됩니다. <li> </li> <web web> 셀레늄 웹 드라이버 지원 Mochajs <av av> 셀레늄 웹 드라이버와 모카를 사용하여 JavaScript 테스트를 수행하기 위해 WebDriver는 테스트 개체를 사용하여 MOCHAJS 테스트 기능 (이전, IT 등)을 마무리하여 Mochajs의 사용을 홍보합니다. 이것은 WebDriver의 사용에 대한 인식을 제공하는 범위를 만듭니다. 그러므로 약속을 돌려 줄 필요가 없습니다. <li> <correspond> 먼저 해당 모듈을로드해야합니다 </correspond> </li> <a> 모든 모카 기능은 다음과 같이 시작합니다 <li> <.> 등. 그런 다음 위의 코드는 다음과 같이 완전히 다시 작성됩니다 </.> </li> 결론 <li> </li> 이 튜토리얼에서는 Selenium Webdriver 및 Mochajs를 사용하여 JavaScript 테스트를 경험할 수있는 기회가 있습니다. 우리는 다른 프로그래밍 언어 바인딩과 비교하여 Nodejs, Mochajs 및 Selenium Webdriver의 비동기 특성으로 인해 큰 차이가 있다는 것을 기억해야합니다. <li> <we> 우리가 약속을 생성하는 모든 함수 (Custom Test Library 기능 또는 Mochajs 후크/테스트 케이스)에서 약속을 계속 반환하는 한 Mocha는 올바른 순서로이를 실행합니다. </we> </li> <ework> WebDriverio, Protractor 및 CodesEptjs와 같은 다른 프레임 워크는 사용자를위한 구성을 숨기고 더 나은 스크립팅 경험을위한 향상된 약속 처리를 제공 할 수있는 래퍼 솔루션을 제공하여 많은 테스트 자동화 전문가가이를 유용 할 수 있습니다. </ework></a></av></web></ex>
Selenium WebDriver 및 Mocha 로 JavaScript 테스트에 대한 FAQS (FAQS) JavaScript 테스트를 위해 Selenium Webdriver를 설정하는 방법은 무엇입니까?

JavaScript 테스트를 위해 Selenium Webdriver 설정에는 여러 단계가 포함됩니다. 먼저 시스템에 node.js 및 npm (노드 패키지 관리자)을 설치해야합니다. 설치가 완료되면 NPM을 사용하여 NPM을 설치하여 Selenium-Webdriver를 설치하여 Selenium Webdriver를 설치할 수 있습니다. 또한 Chromedriver for Chrome의 브라우저 드라이버를 설치해야합니다. Chromedriver는 Chromedriver를 실행하여 수행 할 수 있습니다. 이러한 설치가 완료되면 Selenium Webdriver를 사용하여 JavaScript로 테스트 스크립트를 작성하기 시작할 수 있습니다.

Mocha는 무엇이며 왜 Selenium Webdriver와 함께 사용합니까?

Mocha는 테스트 사례를 작성하고 구성하는 간단하고 유연한 방법을 제공하는 인기있는 JavaScript 테스트 프레임 워크입니다. 비동기 테스트와 같은 기능을 제공하기 때문에 Selenium Webdriver와 함께 사용됩니다. 이는 네트워크 요청 및 브라우저 작업과 같은 지연된 작업을 처리하는 데 중요합니다. Mocha는 또한 간결하고 명확한 구문을 제공하여 테스트 사례를 쉽게 작성하고 이해할 수 있도록합니다.

Selenium Webdriver 및 Mocha를 사용하여 기본 테스트 사례를 작성하는 방법은 무엇입니까?

Selenium Webdriver 및 Mocha를 사용한 기본 테스트 사례 작성에는 새로운 JavaScript 파일 작성 및 Mocha Secipt 및 IT 블록에서 테스트 케이스 작성이 포함됩니다. 이 블록에서는 Selenium Webdriver의 API를 사용하여 웹 페이지 탐색, 요소와 상호 작용 및 속성 확인과 같은 브라우저와 상호 작용할 수 있습니다. 기본 예는 다음과 같습니다.

테스트 사례에서 비동기 작업을 처리하는 방법은 무엇입니까?

테스트 사례에서 JavaScript의 Async/Await 구문을 사용하여 비동기 작업을 처리 할 수 ​​있습니다. 이를 통해 비동기 코드를 동기식으로 쓸 수 있으므로 읽고 이해하기 쉽습니다. Selenium Webdriver와 관련하여 웹 페이지로 탐색, 요소와 상호 작용하는 것과 같은 작업은 비동기식이며 비동기/대기를 사용하여 처리 할 수 ​​있습니다.
<code>npm install -g mocha</code>
Mocha를 사용하여 테스트 케이스를 실행하는 방법은 무엇입니까?

Mocha와 함께 테스트 케이스를 실행하려면 Mocha 명령을 사용하고 테스트 파일로가는 경로를 사용할 수 있습니다. 예를 들어, 테스트 파일이 test.js라는 이름이 지정되면 mocha test.js의 명령을 사용하여 실행할 수 있습니다. Mocha는이 파일에서 모든 테스트 케이스를 자동으로 찾아 실행합니다.

테스트 사례에서 어설 션을 사용하는 방법은 무엇입니까?

테스트 사례의 어설 션은 특정 조건이 충족되었는지 확인하는 데 사용될 수 있습니다. 예를 들어, 웹 페이지의 제목이 검색을 수행 한 후 기대치를 충족한다고 주장 할 수 있습니다. 어설 션은 JavaScript의 내장 Assert 모듈 또는 Chai와 같은 타사 라이브러리를 사용하여 작성할 수 있습니다.

테스트 사례에서 오류를 처리하는 방법은 무엇입니까?

JavaScript Try/Catch 구문은 테스트 케이스의 오류를 처리하는 데 사용될 수 있습니다. 이를 통해 테스트 사례 실행 중에 발생하는 오류를 캡처하고 예를 들어 오류를 기록하고 테스트 케이스에 실패하여 적절하게 처리 할 수 ​​있습니다.

웹 페이지의 요소와 상호 작용하는 방법은 무엇입니까?

셀레늄 웹 드라이버의 API를 사용하여 웹 페이지의 요소와 상호 작용할 수 있습니다. 여기에는 요소를 클릭하고 입력 필드의 입력 및 요소 속성을 읽는 것이 포함됩니다. 이러한 작업은 Driver.FindElement 메소드를 사용하여 수행되며, 상호 작용할 수있는 WebElement 객체를 반환합니다.

테스트 사례에서 조건을 기다리는 방법은 무엇입니까?

셀레늄 웹 드라이버 드라이버를 사용하여 테스트 케이스에서 조건을 기다릴 수 있습니다. 이 방법은 조건부 및 선택적 시간 초과를 사용하며 조건이 충족되거나 시간 초과에 도달 할 때까지 기다립니다. Will.titleis와 같은 조건을 생성하여 웹 페이지의 제목이 값이 될 때까지 대기 할 수 있습니다.

다른 브라우저에서 테스트 케이스를 실행하는 방법은 무엇입니까?

웹 드라이버 인스턴스를 만들 때 브라우저를 지정하여 다른 브라우저에서 테스트 케이스를 실행할 수 있습니다. 예를 들어, New Builder (). Forbrowser ( 'Firefox')를 사용하여 Firefox에서 테스트 케이스를 실행하거나 New Builder (). Forbrowser ( 'Chrome')를 사용하여 Chrome에서 실행할 수 있습니다. 작동하려면 적절한 브라우저 드라이버를 설치해야합니다.

위 내용은 Selenium Webdriver 및 Mocha로 JavaScript를 테스트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.