blocks|key|1266905|text|看看茉莉|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1266906|describe("Jasmine",+function()+{
++it("makes+testing+JavaScript+awesome!",+function()+{
++++expect(yourCode).toBeLotsBetter();
++});
});|code-block|syntax|javascript|1266907|http://pivotal.github.com/jasmine/|offset|length|1266908|https://github.com/pivotal/jasmine|1266909|Should_be+(原文如此)对红宝石爱好者来说非常熟悉|1266910|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|Y|0|0|0|Y|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|H]]|V|$5|R|S|T|A|$U|L]]]]

Check out jasmine

<pre><code>describe("Jasmine", function() {
 it("makes testing JavaScript awesome!", function() {
 expect(yourCode).toBeLotsBetter();
 });
});
</code></pre>

<a href="http://pivotal.github.com/jasmine/" rel="noreferrer">http://pivotal.github.com/jasmine/</a>

<a href="https://github.com/pivotal/jasmine" rel="noreferrer">https://github.com/pivotal/jasmine</a>

Should_be ( sic ) very familiar to a ruby person

blocks|key|3333565|text|你也可以看看Yadda。它不是像CucumberJS那样的独立测试框架，而是能够使用其他框架中类似小黄瓜的语法，如Mocha、Jasmine、CasperJS、僵尸、Qunit等。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3333566|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/acuminous/yadda^0|6|5|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You could also look at <a href="https://github.com/acuminous/yadda" rel="noreferrer">Yadda</a>. Rather than being a standalone test framework like CucumberJS, it enables to use a Gherkin like syntax from other frameworks like Mocha, Jasmine, CasperJS, Zombie, Qunit etc.

blocks|key|4933676|text|我会推荐茉莉，也可以看看Jasmine-species|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4933677|同样值得注意的是Kyuri+--它是一个用于javascript的小黄瓜(the+Cucumber+DSL)解析器，最初它针对的是Vows.js，但它也可以生成普通的旧javascript存根(然而，现在它仍然有很多but+)。|4933678|entityMap|0|LINK|mutability|MUTABLE|url|http://rudylattae.github.com/jasmine-species/|1|https://github.com/nodejitsu/kyuri^0|C|F|0|0|8|5|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

I'd second Jasmine, also take a look at <a href="http://rudylattae.github.com/jasmine-species/" rel="noreferrer">Jasmine-species</a>

Also of note is <a href="https://github.com/nodejitsu/kyuri" rel="noreferrer">Kyuri</a> -- It's a Gherkin (the Cucumber DSL) parser for javascript, originally it targeted Vows.js, but it also can generate plain old javascript stubs (however, it's still pretty buggy right now).

blocks|key|1267000|text|以下是node+wiki上列出的testing+frameworks列表。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1267001|cucumber-js看起来很有前途。以下是语法的示例：|1267002|要素源|style|BOLD|1267003|Feature:+Simple+maths
++In+order+to+do+maths
++As+a+developer
++I+want+to+increment+variables

++Scenario:+Increment+variable+once
++++Given+a+variable+set+to+1
++++When+I+increment+the+variable+by+1
++++Then+the+variable+should+contain+2|code-block|syntax|javascript|1267004|步骤定义|1267005|var+variable;

Given(/%5Ea+variable+set+to+(\d%2B)$/,+function(number,+callback)+{
++variable+=+parseInt(number);
++callback();
});

When(/%5EI+increment+the+variable+by+(\d%2B)$/,+function(number,+callback)+{
++variable+%2B=+parseInt(number);
++callback();
});

Then(/%5Ethe+variable+should+contain+(\d%2B)$/,+function(number,+callback)+{
++if+(variable+!=+parseInt(number))
++++throw(new+Error('Variable+should+contain+'%2Bnumber%2B'+but+it+contains+'%2Bvariable%2B'.'));
++callback();
});|1267006|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/joyent/node/wiki/modules#wiki-testing|1|https://github.com/cucumber/cucumber-js^0|G|I|0|0|0|B|1|0|0|3|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|F|3|G|5|6|7|1A|8|@$A|1B|B|1C|H|I]]|9|@]|C|$]]|$1|J|3|K|5|L|7|1D|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1E|8|@$A|1F|B|1G|H|I]]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1H|8|@]|9|@]|C|$M|N]]|$1|S|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

Here's a list of <a href="https://github.com/joyent/node/wiki/modules#wiki-testing" rel="noreferrer">testing frameworks</a> listed on the node wiki.

<a href="https://github.com/cucumber/cucumber-js" rel="noreferrer">cucumber-js</a> looks promising. Here's a sample of the syntax:

Feature source

<pre><code>Feature: Simple maths
 In order to do maths
 As a developer
 I want to increment variables

 Scenario: Increment variable once
 Given a variable set to 1
 When I increment the variable by 1
 Then the variable should contain 2
</code></pre>

Step definitions

<pre><code>var variable;

Given(/^a variable set to (\d+)$/, function(number, callback) {
 variable = parseInt(number);
 callback();
});

When(/^I increment the variable by (\d+)$/, function(number, callback) {
 variable += parseInt(number);
 callback();
});

Then(/^the variable should contain (\d+)$/, function(number, callback) {
 if (variable != parseInt(number))
 throw(new Error('Variable should contain '+number+' but it contains '+variable+'.'));
 callback();
});
</code></pre>

blocks|key|3333687|text|我认为jasmine只是一个TDD框架，而不是BDD，因为它没有BDD框架所具有的两层抽象层：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3333688|3333689|，我们该怎么办？(通常在txt文件中)|ordered-list-item|3333690|我们如何做到这一点？(javascript中的可重用实现)|3333691|3333692|但这没关系，这是一个很好的起点。我也不喜欢重复发明轮子(使用基于txt的语言)。我发现了一个基于jasmine的BDD框架，对我来说这是一个完美的解决方案：https://github.com/DealerDotCom/karma-jasmine-cucumber。|offset|length|3333693|例如：|3333694|specs.js+(我们做什么)|3333695|feature('Calculator:+add')
++++.scenario('should+be+able+to+add+2+numbers+together')
++++++++.when('I+enter+"1"')
++++++++.and('I+add+"2"')
++++++++.then('I+should+get+"3"')
++++.scenario('should+be+able+to+add+to+a+result+of+a+previous+addition')
++++++++.given('I+added+"1"+and+"2"')
++++++++.when('I+add+"3"')
++++++++.then('I+should+get+"6"')|code-block|syntax|javascript|3333696|steps.js+(我们是如何做到的)|3333697|featureSteps('Calculator:')
++++.before(function(){
++++++++this.values+=+[];
++++++++this.total+=+null;
++++})
++++.given('I+added+"(.*)"+and+"(.*)"',+function(first,+second){
++++++++this.when('I+enter+"'+%2B+first+%2B+'"');
++++++++this.when('I+add+"'+%2B+second+%2B+'"');
++++})
++++.when('I+enter+"(.*)"',+function(val){
++++++++this.values.push(val+*+1);
++++})
++++.when('I+add+"(.*)"',+function(val){
++++++++this.values.push(val+*+1);
++++++++this.total+=+this.values[0]+%2B+this.values[1];
++++++++this.values+=+[this.total];
++++})
++++.then('I+should+get+"(.*)"',+function(val){
++++++++expect(this.total).toBe(val+*+1);
++++})|3333698|更新2016-02-16:|style|BOLD|3333699|经过几个月的BDD实践，我最终得到了基于txt的功能描述和ofc。和小黄瓜一起。我认为最好是在功能描述中写一些非常高的抽象级别，而不是我之前写到karma-jasmine-cucumber示例中的东西。根据我以前的例子，我现在更愿意写这样的东西：|3333700|++Scenario:+Addition+of+numbers
++++Given+I+have+multiple+numbers
++++When+I+add+these+numbers+together
++++Then+I+should+get+their+sum+as+result|3333701|这就是我目前喜欢的方式。我使用步骤定义来设置fixture和断言的值，但ofc。如果您愿意，您可以使用gherkin提供Examples：|CODE|3333702|++Scenario:+Addition+of+numbers
++++Given+I+have+<multiple+numbers>
++++When+I+add+these+numbers+together
++++Then+I+should+get+<their+sum>+as+result

++++Examples:
++++++++%7C+multiple+numbers+%7C+their+sum+%7C
++++++++%7C++++1,+2,+3,+6++++%7C+++++12++++%7C
++++++++%7C++++8,+5++++++++++%7C+++++13++++%7C
++++++++%7C++++5,+-10,+32++++%7C+++++27++++%7C|3333703|Cucumber将这3行转换为3种场景，例如：|3333704|++++Given+I+have+1,+2,+3,+6
++++When+I+add+these+numbers+together
++++Then+I+should+get+12+as+result|3333705|也许它更容易调试，但您必须为这些值编写解析器，例如，拆分"1，2，3，6“字符串并对这些值执行parseInt操作以获得numbers数组。我想你可以决定哪种方式对你更好。|3333706|高抽象级功能描述真正有趣的是，您可以编写多个不同的步骤定义。因此，例如，您可以测试两个不同的apis，它们做相同的事情，或者坚持计算器示例，您可以为多个用户界面(cli、webapplication等)编写e2e测试。或者，您可以编写一个简单的测试，它只测试域。无论如何，功能描述或多或少都是可重用的。|3333707|更新2016-04-15:|3333708|我决定在mocha中使用Yadda，而不是在jasmine中使用Cucumber。我也喜欢黄瓜和茉莉，但我认为Yadda和mocha更灵活。|3333709|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/DealerDotCom/karma-jasmine-cucumber|1|https://github.com/cucumber/gherkin|2|https://github.com/cucumber/cucumber-js|3|https://github.com/mochajs/mocha|4|https://github.com/acuminous/yadda|5|https://github.com/jasmine/jasmine|6^0|0|0|0|0|0|26|1I|0|0|0|0|0|0|0|0|D|0|0|0|1O|8|1F|7|1|0|0|0|8|2|0|0|0|0|0|D|0|4|5|3|C|5|4|M|7|5|W|8|6|0^^$0|@$1|2|3|4|5|6|7|27|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|29|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|2A|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|2C|8|@]|9|@$K|2D|L|2E|1|2F]]|A|$]]|$1|M|3|N|5|6|7|2G|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|2H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|2I|8|@]|9|@]|A|$T|U]]|$1|V|3|W|5|6|7|2J|8|@]|9|@]|A|$]]|$1|X|3|Y|5|S|7|2K|8|@]|9|@]|A|$T|U]]|$1|Z|3|10|5|6|7|2L|8|@$K|2M|L|2N|11|12]]|9|@]|A|$]]|$1|13|3|14|5|6|7|2O|8|@]|9|@]|A|$]]|$1|15|3|16|5|S|7|2P|8|@]|9|@]|A|$T|U]]|$1|17|3|18|5|6|7|2Q|8|@$K|2R|L|2S|11|19]]|9|@$K|2T|L|2U|1|2V]]|A|$]]|$1|1A|3|1B|5|S|7|2W|8|@]|9|@]|A|$T|U]]|$1|1C|3|1D|5|6|7|2X|8|@]|9|@$K|2Y|L|2Z|1|30]]|A|$]]|$1|1E|3|1F|5|S|7|31|8|@]|9|@]|A|$T|U]]|$1|1G|3|1H|5|6|7|32|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|6|7|33|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|34|8|@$K|35|L|36|11|12]]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|37|8|@]|9|@$K|38|L|39|1|3A]|$K|3B|L|3C|1|3D]|$K|3E|L|3F|1|3G]|$K|3H|L|3I|1|3J]]|A|$]]|$1|1O|3|-4|5|6|7|3K|8|@]|9|@]|A|$]]]|1P|$1Q|$5|1R|1S|1T|A|$1U|1V]]|1W|$5|1R|1S|1T|A|$1U|1X]]|1Y|$5|1R|1S|1T|A|$1U|1Z]]|20|$5|1R|1S|1T|A|$1U|21]]|22|$5|1R|1S|1T|A|$1U|23]]|24|$5|1R|1S|1T|A|$1U|25]]|26|$5|1R|1S|1T|A|$1U|1Z]]]]

I think jasmine is just a TDD framework, not a BDD, because it does not have the two layers of abstraction BDD frameworks have:

<ol>
<li>What do we do? (usually in txt files)</li>
<li>How do we do that? (reusable implementation in javascript)</li>
</ol>

But that's okay, it is a good starting point. I don't like reinventing the wheel (using a txt based language) either. I have found a BDD framework, which builds on jasmine, to me this was the perfect solution: <a href="https://github.com/DealerDotCom/karma-jasmine-cucumber" rel="nofollow">https://github.com/DealerDotCom/karma-jasmine-cucumber</a>

For example:

specs.js (what we do)

<pre><code>feature('Calculator: add')
 .scenario('should be able to add 2 numbers together')
 .when('I enter "1"')
 .and('I add "2"')
 .then('I should get "3"')
 .scenario('should be able to add to a result of a previous addition')
 .given('I added "1" and "2"')
 .when('I add "3"')
 .then('I should get "6"')
</code></pre>

steps.js (how we do it)

<pre><code>featureSteps('Calculator:')
 .before(function(){
 this.values = [];
 this.total = null;
 })
 .given('I added "(.*)" and "(.*)"', function(first, second){
 this.when('I enter "' + first + '"');
 this.when('I add "' + second + '"');
 })
 .when('I enter "(.*)"', function(val){
 this.values.push(val * 1);
 })
 .when('I add "(.*)"', function(val){
 this.values.push(val * 1);
 this.total = this.values[0] + this.values[1];
 this.values = [this.total];
 })
 .then('I should get "(.*)"', function(val){
 expect(this.total).toBe(val * 1);
 })
</code></pre>

Update 2016-02-16: 

After a few months of practice with BDD I ended up with txt based feature descriptions and ofc. with gherkin. I think it is better to write something really high abstraction level into the feature descriptions instead of what I previously wrote into my karma-jasmine-cucumber example. By my old example I would rather write something like this nowadays:

<pre><code> Scenario: Addition of numbers
 Given I have multiple numbers
 When I add these numbers together
 Then I should get their sum as result
</code></pre>

This is how I like it currently. I use to let the step definitions to set the values of the fixtures and the assertions, but ofc. you can give <code>Examples</code> with <a href="https://github.com/cucumber/gherkin" rel="nofollow">gherkin</a> if you want:

<pre><code> Scenario: Addition of numbers
 Given I have &lt;multiple numbers&gt;
 When I add these numbers together
 Then I should get &lt;their sum&gt; as result

 Examples:
 | multiple numbers | their sum |
 | 1, 2, 3, 6 | 12 |
 | 8, 5 | 13 |
 | 5, -10, 32 | 27 |
</code></pre>

<a href="https://github.com/cucumber/cucumber-js" rel="nofollow">Cucumber</a> translates these 3 rows to 3 scenarios, e.g:

<pre><code> Given I have 1, 2, 3, 6
 When I add these numbers together
 Then I should get 12 as result
</code></pre>

Maybe it is somewhat easier to debug, but you have to write parser for these values, for example split the "1, 2, 3, 6" string and parseInt the values to get the numbers array. I think you can decide which way is better for you.

What is really interesting with high abstraction level feature descriptions, that you can write multiple different step definitions. So for example you can test 2 different apis, which do the same thing, or to stick with the calculator example, you can write e2e tests for multiple user interfaces (cli, webapplication, etc.) or you can write a simple test, which tests the domain only. Anyways the feature descriptions are more or less reusable.

Update 2016-04-15:

I decided to use <a href="https://github.com/acuminous/yadda" rel="nofollow">Yadda</a> with <a href="https://github.com/mochajs/mocha" rel="nofollow">mocha</a> instead of <a href="https://github.com/cucumber/cucumber-js" rel="nofollow">Cucumber</a> with <a href="https://github.com/jasmine/jasmine" rel="nofollow">jasmine</a>. I liked Cucumber and jasmine too, but I think Yadda and mocha are more flexible.

blocks|key|1983520|text|现在有了karma-cucumberjs，它可以在真正的浏览器和PhantomJS中进行黄瓜测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1983521|https://github.com/s9tpepper/karma-cucumberjs|offset|length|1983522|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|19|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

There's now karma-cucumberjs which can do Cucumber testing in real browsers as well as PhantomJS.

<a href="https://github.com/s9tpepper/karma-cucumberjs" rel="nofollow">https://github.com/s9tpepper/karma-cucumberjs</a>

blocks|key|1983566|text|我可以推荐使用WebdriverIO+%2B+CucumberJS的BDD方法，如果你正在使用Jira，你也可以通过Jira+Xray管理你的测试需求，也可以尝试使用Sauce+Labs进行云测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1983567|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I can recommend BDD approach with WebdriverIO + CucumberJS, also if you are using Jira you can manage your tests with requirements via Jira Xray and also try cloud testing with Sauce Labs.

On the server side we have Rspec/Cucumber for BDD development (ruby) vowsjs (node.js)

Is there a BDD frameworks to use on web browsers (not qUnit or YUI test since these are only for TDD)?

BDD framework for the frontend?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在服务器端，我们有Rspec/Cucumber for BDD development (ruby) vowsjs (node.js)有没有可以在web浏览器上使用的BDD框架(不是qUnit或YUI测试，因为它们只用于测试驱动程序)？

问前端的BDD框架？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问前端的BDD框架？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问前端的BDD框架？
EN