<..> cucumber.js 설정에는 NPM을 통해 모듈 설치, 기능 파일 및 단계 정의를 찾도록 구성하고 선택적으로 Grunt 또는 Gulp와 같은 빌드 스크립트 또는 작업 러너에 통합하는 것이 포함됩니다. 이 기사는 간단한 주장을 사용하여 이러한 작업의 정확성을 확인하기 위해 추가 및 곱셈을위한 Gherkin 시나리오를 설정하는 기본 오이 테스트 예제를 제공합니다. 이 기사는 또한 비동기 테스트 지원, 매개 변수화 된 테스트를위한 시나리오 개요 및 테스트 기능을 향상시키기위한 전제 조건 및 후 조약을 설정하기위한 후크와 같은 Cucumber.js의 고급 기능을 간략하게 설명합니다.
- bdd와 tdd 의 차이
는 주로 테스트의 구조 및 쓰기 방법에 반영됩니다. TDD에서는 개발자가 코드를 작성하여 작성, 유지 및 이해합니다. 다른 사람들은 읽기 테스트가 전혀 필요하지 않을 수 있으며, 완전히 괜찮습니다. 그러나 BDD에서는 기능을 작성하는 개발자보다 더 많은 사람들이 테스트를 이해해야합니다. 많은 이해 관계자들은 QA 직원, 제품 분석가, 영업 담당자 및 심지어 고위 경영진과 같은 제품이 올바르게 작동하는지 여부를 걱정합니다. 이는 이상적으로 BDD 테스트가 제품을 이해하는 사람이라면 누구나 이해할 수있는 방식으로 작성해야 함을 의미합니다. 차이점은 다음과 같습니다. - 및 :
const assert = require('assert'); const webdriver = require('selenium-webdriver'); const browser = new webdriver.Builder() .usingServer() .withCapabilities({'browserName': 'chrome' }) .build(); browser.get('http://en.wikipedia.org/wiki/Wiki'); browser.findElements(webdriver.By.css('[href^="/wiki/"]')) .then(function(links){ assert.equal(19, links.length); // 假设的数字 browser.quit(); });
이 두 테스트는 동일하지만, 하나는 자연 언어를 읽을 수 있고 다른 하나는 자바 스크립트와 셀레늄을 아는 사람들에 의해서만 이해됩니다. 이 기사에서는 Cucumber.js 프레임 워크를 사용하여 JavaScript 프로젝트에서 BDD 테스트를 구현하는 방법을 보여 주므로 제품이 이러한 수준의 테스트를 통해 혜택을 볼 수 있습니다.오이/gherkin이란 무엇입니까?
오이는 행동 중심 개발을위한 테스트 프레임 워크입니다. 이를 통해 Gherkin 형식으로 테스트를 정의하고 코드에 바인딩 하여이 Gherkins를 실행할 수 있습니다. Gherkin은 오이 테스트를 작성하는 데 사용되는 도메인 별 언어 (DSL)입니다. 이를 통해 인간이 읽을 수있는 형식의 테스트 스크립트를 작성하여 제품 개발의 모든 이해 관계자와 공유 할 수 있습니다. Gherkin 파일은 Gherkin 언어로 작성된 테스트가 포함 된 파일입니다. 이 파일에는 일반적으로 .feature 파일 확장자가 있습니다. 이 Gherkin 파일의 내용은 일반적으로 "Gherkin"이라고합니다.gherkin
Gherkin 정의 테스트에는 특징 및
시나리오의 개념이 있습니다. 이들은 다른 테스트 프레임 워크에서 테스트 스위트 및 테스트 사례와 유사하며 테스트를 구조화하는 명확한 방법을 제공합니다. 시나리오는 별도의 테스트 일뿐입니다. 응용 프로그램의 한 측면 만 테스트해야합니다. 기능은 관련 시나리오 세트입니다. 따라서 응용 프로그램의 많은 관련 측면을 테스트합니다. 이상적으로 Gherkin 파일의 기능은 응용 프로그램의 기능과 밀접하게 매핑됩니다. 각 Gherkin 파일에는 기능이 포함되어 있으며 각 기능에는 하나 이상의 시나리오가 포함되어 있습니다. 그런 다음 장면은 단계로 구성되며 특정 순서로 배열됩니다.주어진
-이 단계는 테스트가 실행되기 전에 초기 상태를 설정하는 데 사용됩니다. 시기 -이 단계는 실제로 수행 될 테스트입니다 그런 다음 -이 단계는 테스트 결과를 주장하는 데 사용됩니다 이상적으로는 각 시나리오는 별도의 테스트 사례 여야하므로시기의 수를 매우 작게 유지해야합니다. 단계는 완전히 선택 사항입니다. 예를 들어, 아무것도 설정할 필요가 없다면 주어진 단계가 없을 수 있습니다. Gherkin 파일은 읽기 쉬운 제품 개발과 관련된 사람에게 도움이되도록 설계되었습니다. 여기에는 비 기술적 인 사람들이 포함되므로 Gherkin 파일은 항상 기술 언어보다는 비즈니스 언어로 작성되어야합니다. 예를 들어, 단일 UI 구성 요소를 참조하지 않고 테스트하려는 제품 개념을 설명합니다. Gherkin 테스트 예 다음은 google의 cucumber.js에 대한 Gherkin 예제입니다.
우리는이 테스트가 어떻게 해야하는지, 어떻게 해야하는지 알려주는 것을 즉시 알 수 있습니다. 누구나 이해할 수있는 언어로 작성되었으며, 최종 제품이 어떻게 조정하든 상관없이 가장 잘 유지 될 가능성이 높습니다. Google은 UI를 완전히 변경하기로 결정할 수 있지만 기능이 동등한 한 Gherkin은 여전히 정확합니다. 오이 위키에서 주어진 것에 대해 더 많이 읽을 수 있습니다. cucumber.js Gherkin 형식으로 테스트 케이스를 작성한 후에는 실행 방법이 필요합니다. JavaScript 세계에는 cucumber.js라는 모듈이 있습니다. Cucumber.js가 Gherkin 파일에 정의 된 다양한 단계에 연결할 수있는 JavaScript 코드를 정의 할 수 있습니다. 그런 다음 Gherkin 파일을로드하고 올바른 순서로 각 단계와 관련된 JavaScript 코드를 실행하여 테스트를 실행합니다. 예를 들어, 위의 예에는 다음 단계가 있습니다. 이러한 모든 의미에 대해 너무 걱정하지 마십시오. 나중에 자세히 설명 할 것입니다. 그러나 본질적으로 Cucumber.js 프레임 워크가 코드를 Gherkin 파일의 단계에 바인딩하는 데 사용할 수있는 몇 가지 방법을 정의합니다. const assert = require('assert'); const webdriver = require('selenium-webdriver'); const browser = new webdriver.Builder() .usingServer() .withCapabilities({'browserName': 'chrome' }) .build(); browser.get('http://en.wikipedia.org/wiki/Wiki'); browser.findElements(webdriver.By.css('[href^="/wiki/"]')) .then(function(links){ assert.equal(19, links.length); // 假设的数字 browser.quit(); });
(다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다)
빌드에 cucumber.js를 포함하십시오 빌드에 cucumber.js를 포함시키고, 오이 모듈을 빌드에 추가하고 실행하도록 구성하십시오. 첫 번째 단계는 다음과 같습니다. 두 번째 단계는 빌드를 수행하는 방법에 따라 다릅니다. 수동으로 실행하십시오
오이를 수동으로 실행하는 것은 비교적 쉽고, 다음 솔루션이 자동으로 동일하게 수행 할 수있는 방법이므로 먼저 수행 할 수 있는지 확인하는 것이 가장 좋습니다. 설치 후 실행 파일은 Given I have opened a Web Browser When I load the Wikipedia article on "Wiki" Then I have "19" Wiki Links
플래그는 오이가 자동으로 테스트를 위해로드 할 JavaScript 파일을 포함하는 디렉토리입니다. 흥미로운 다른 징후도 있습니다. 도움이되는 텍스트를 읽으십시오. 이 디렉토리는 재귀 적으로 스캔하므로 상황에 따라 얕거나 깊은 파일을 둥지 할 수 있습니다.
npm 스크립트오이를 수동으로 실행 한 후 NPM 스크립트로 빌드에 추가하는 것은 간단한 경우입니다. 다음과 같이 다음 명령 (NPM이 귀하를 위해 처리 할 수 있으므로 자격을 갖춘 경로 없음)을 추가하십시오.
완료되면 실행할 수 있습니다 이전과 같이 오이 테스트를 수행합니다. grunt
./node_modules/.bin/cucumber.js
cucumber.js 테스트를 수행하기 위해 Grunt 플러그인이 있습니다. 불행히도, 그것은 구식이며 최신 버전의 cucumber.js에서는 작동하지 않으므로 사용하면 많은 개선 사항을 놓칠 것입니다. 대신, 내가 선호하는 방식은 단순히 Grunt-Shell 플러그인을 사용하여 위와 동일한 방식으로 명령을 실행하는 것입니다. 설치 후 구성하기 만하면 다음 플러그인 구성을 gruntfile.js에 추가하겠습니다. 이제, 이전과 같이 const assert = require('assert'); const webdriver = require('selenium-webdriver'); const browser = new webdriver.Builder() .usingServer() .withCapabilities({'browserName': 'chrome' }) .build(); browser.get('http://en.wikipedia.org/wiki/Wiki'); browser.findElements(webdriver.By.css('[href^="/wiki/"]')) .then(function(links){ assert.equal(19, links.length); // 假设的数字 browser.quit(); });
gulp
grunt shell:cucumber
Gulp는 기존 플러그인이 구식이며 구형 버전의 오이 도구를 사용하기 때문에 Grunt와 정확히 동일합니다. 다시 말하지만, Gulp-Shell 모듈을 사용하여 다른 시나리오와 마찬가지로 cucumber.js 명령을 실행할 수 있습니다. 그것을 설정하는 것은 간단합니다 : 이제, 이전과 같이 를 실행하여 테스트를 수행 할 수 있습니다. 첫 번째 오이 테스트 이 기사의 모든 코드 예제는 Github에서 찾을 수 있습니다. Given I have opened a Web Browser When I load the Wikipedia article on "Wiki" Then I have "19" Wiki Links
이제 오이를 실행하는 방법을 알았으므로 실제로 테스트를 작성합시다. 이 예에서는 시스템의 작동 방식을 보여주기 위해 매우 인공적인 일을 할 것입니다. 실제로 테스트중인 코드를 직접 호출하거나 HTTP API가 서비스 실행에 전화를 걸거나 셀레늄을 제어하여 웹 브라우저를 구동하여 응용 프로그램을 테스트하는 등 복잡한 작업을 수행합니다. 우리의 간단한 예는 수학이 여전히 유효하다는 것을 증명할 것입니다. 추가와 곱셈의 두 가지 특성이 있습니다. 먼저 설정하겠습니다. gulp cucumber
테스트 수행 방법은 전적으로 귀하에게 달려 있습니다. 이 예에서는 단순성을 위해 수동으로 수행합니다. 실제 프로젝트에서는 위의 옵션 중 하나를 사용하여 빌드에 통합됩니다. 이제 첫 번째 실제 기능을 쓰자. 이것은
(다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다): 에 배치됩니다 매우 간단하고 읽기가 매우 쉽습니다. 그것은 우리에게 어떻게 해야하는지 말하지 않고 정확히 우리에게 무엇을하고 있는지 알려줍니다. 시도해 봅시다 : 그런 다음 첫 번째 단계 파일을 작성해 봅시다. 오이 출력이 말한대로 단계를 구현하면 유용한 일이 없지만 출력을 분류합니다. 이것은
: 에 배치됩니다 const assert = require('assert'); const webdriver = require('selenium-webdriver'); const browser = new webdriver.Builder() .usingServer() .withCapabilities({'browserName': 'chrome' }) .build(); browser.get('http://en.wikipedia.org/wiki/Wiki'); browser.findElements(webdriver.By.css('[href^="/wiki/"]')) .then(function(links){ assert.equal(19, links.length); // 假设的数字 browser.quit(); });
Hook는 Cucumber.js의 방법으로 다양한 상황에 사용될 코드를 제공 할 수 있습니다. 이 모든 것이 다루어 지지만 기본적으로 오이가 직접 호출 할 코드를 작성하려면이 블록 중 하나에 있어야합니다. 여기서 샘플 코드는 세 가지 다른 단계 (각 주어진마다 하나)를 정의합니다. 각 블록은 속성 파일의 단계와 일치하는 문자열 (또는 필요한 경우 정규 표현식)과 해당 단계가 일치 할 때 실행되는 함수를 제공합니다. 자리 표시자는 단계 문자열에 배치 할 수 있으며 (또는 정규 표현식을 사용하는 경우 대신 캡처 표현식을 사용할 수 있으며, 이러한 자리 표시자는 추출하여 기능에 대한 인수로 제공됩니다. 이렇게하면 실제로는 아무것도하지 않고 더 깨끗한 출력을 제공합니다.(다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다)
defineSupportCode
이제 모든 것이 작동하도록합시다. 단계 정의에서 코드를 구현하면됩니다. 우리는 또한 독서를 더 쉽게하기 위해 일종의 분류를 할 것입니다. 이는 비동기 작업을 수행하지 않기 때문에 실제로 콜백 매개 변수의 필요성을 제거합니다. 그 후, 우리의 는 다음과 같이 보일 것입니다 execute 다음과 같이 보입니다 (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다) 그게 다야, 우리는 수학이 정확하다는 것을 증명하는 테스트 스위트를 확장하기가 매우 쉬웠다. 운동으로, 뺄셈을 지원하기 위해 확장하려고하는 이유는 무엇입니까? 문제가 있으면 의견에 도움을 요청할 수 있습니다.
(다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체되며 일부 장은 병합되고 단순화됩니다)steps/maths.js
더 많은 고급 cucumber.js 팁모두 좋지만 오이는 우리의 삶을 더 편하게 만들기 위해 더 진보 된 일을 할 수 있습니다. Given I have opened a Web Browser When I load the Wikipedia article on "Wiki" Then I have "19" Wiki Links
비동기 단계 정의지금까지 우리는 동기화 단계 정의 만 작성했습니다. 그러나 JavaScript 세계에서는 일반적으로 충분하지 않습니다. JavaScript의 많은 것들이 비동기식이어야하므로 처리 할 방법이 필요합니다. 고맙게도 Cucumber.js는 선호도에 따라이를 다루는 몇 가지 내장 방법이 있습니다. 비동기 단계를 처리하는보다 전통적인 JavaScript 메소드 인 위에서 제안한 방법은 콜백 기능을 사용합니다. 단계 정의에 콜백 함수가 마지막 매개 변수로서 있어야한다고 지정하면이 콜백이 트리거 된 후에 만 단계가 완료되는 것으로 간주됩니다. 이 경우 콜백이 인수로 트리거되면 오류로 간주되며 단계가 실패합니다. 매개 변수없이 트리거되면 단계는 성공적인 것으로 간주됩니다. 그러나 콜백이 전혀 트리거되지 않으면 프레임 워크가 결국 시간이 걸리고 단계에 실패합니다. 이야기의 의미? 콜백 매개 변수를 수락하는 경우 호출하십시오. 예를 들어, 콜백을 사용한 HTTP API 호출의 단계 정의는 다음과 같습니다. 응답에서 콜백을 사용하기 때문에 요청을 사용하여 작성됩니다. 더 선호되는 또 다른 방법은 유형을 반환하는 것입니다. 단계에서 약속을 반환하면 약속이 완료 될 때만 단계가 완료된 것으로 간주됩니다. 약속이 거부되면, 약속이 이행되면, 단계는 성공할 것입니다. 또는 반환 한 콘텐츠가 약속이 아닌 경우 단계는 즉시 성공적인 것으로 간주됩니다. 여기에는 정의되지 않은 또는 널 반환이 포함됩니다. 즉, 단계 실행 중 약속을 반환 해야하는지 여부를 선택할 수 있으며 프레임 워크가 필요에 따라 조정됩니다. 예를 들어, 약속을 사용하여 HTTP API 호출을위한 단계 정의는 다음과 같습니다. 이것은 Fetch API를 사용하여 작성됩니다. 응답에 대한 약속을 반환하기 때문입니다. (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체되며 일부 장은 병합되고 단순화됩니다) 기능 배경, 장면 개요, 데이터 테이블 및 후크 기능 (전, 후, Beforestep, AfterSp, AfterStep 등) 및 이벤트 처리 메커니즘과 같은 이러한 고급 기능은 테스트 효율성과 수상성을 크게 향상시킬 수 있습니다. 이러한 기능을 합리적으로 사용하면 BDD 테스트를보다 간결하고 쉽게 작성할 수 있습니다. 객체는 다른 단계 정의 사이에 데이터와 상태를 공유하여 테스트 로직을 단순화 할 수 있습니다. (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다) 요약
행동 중심 개발은 제품이 올바른 행동을 보장하는 훌륭한 방법이며, 오이는 도구로서 제품의 모든 이해 관계자가 읽고 이해하고 쓸 수 있도록이를 달성하는 매우 강력한 방법입니다. 행동 테스트. 이 기사는 오이가 할 수있는 일에 대한 피부를 다루므로 그 힘을 이해하기 위해 직접 시도해 보는 것이 좋습니다. 오이는 또한 매우 활발한 커뮤니티를 보유하고 있으며 메일 링리스트와 Gitter 채널이 필요한 경우 도움을받을 수있는 좋은 방법입니다. 이미 오이를 사용하고 있습니까? 이 기사에서 시도해 보도록 권장합니까? 어느 쪽이든, 나는 아래 의견에서 당신을 듣고 싶습니다. 이 기사는 Jani Hartikainen이 동료 검토했습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewers에게 감사합니다! (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다) 오이와 gherkin을 사용하여 JavaScript의 BDD에 대한 FAQ
(다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다)
위 내용은 JavaScript의 BDD : Cucumber와 Gherkin을 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

10 재미있는 jQuery 게임 플러그인 웹 사이트를보다 매력적으로 만들고 사용자 끈적함을 향상시킵니다! Flash는 여전히 캐주얼 웹 게임을 개발하기위한 최고의 소프트웨어이지만 JQuery는 놀라운 효과를 만들 수 있으며 Pure Action Flash 게임과 비교할 수는 없지만 경우에 따라 브라우저에서 예기치 않은 재미를 가질 수 있습니다. jQuery tic 발가락 게임 게임 프로그래밍의 "Hello World"에는 이제 jQuery 버전이 있습니다. 소스 코드 jQuery Crazy Word Composition 게임 이것은 반은 반은 게임이며, 단어의 맥락을 알지 못해 이상한 결과를 얻을 수 있습니다. 소스 코드 jQuery 광산 청소 게임

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

이 튜토리얼은 jQuery를 사용하여 매혹적인 시차 배경 효과를 만드는 방법을 보여줍니다. 우리는 멋진 시각적 깊이를 만드는 계층화 된 이미지가있는 헤더 배너를 만들 것입니다. 업데이트 된 플러그인은 jQuery 1.6.4 이상에서 작동합니다. 다운로드

이 기사에서는 jQuery 및 Ajax를 사용하여 5 초마다 DIV의 컨텐츠를 자동으로 새로 고치는 방법을 보여줍니다. 이 예제는 RSS 피드의 최신 블로그 게시물을 마지막 새로 고침 타임 스탬프와 함께 가져오고 표시합니다. 로딩 이미지는 선택 사항입니다

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

Matter.js는 JavaScript로 작성된 2D 강성 신체 물리 엔진입니다. 이 라이브러리를 사용하면 브라우저에서 2D 물리학을 쉽게 시뮬레이션 할 수 있습니다. 그것은 단단한 몸체를 생성하고 질량, 면적 또는 밀도와 같은 물리적 특성을 할당하는 능력과 같은 많은 기능을 제공합니다. 중력 마찰과 같은 다양한 유형의 충돌 및 힘을 시뮬레이션 할 수도 있습니다. Matter.js는 모든 주류 브라우저를 지원합니다. 또한, 터치를 감지하고 반응이 좋기 때문에 모바일 장치에 적합합니다. 이러한 모든 기능을 사용하면 엔진 사용 방법을 배울 수있는 시간이 필요합니다. 이는 물리 기반 2D 게임 또는 시뮬레이션을 쉽게 만들 수 있습니다. 이 튜토리얼에서는 설치 및 사용을 포함한이 라이브러리의 기본 사항을 다루고


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!

VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

WebStorm Mac 버전
유용한 JavaScript 개발 도구

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
