Question

我正在尝试使用黄瓜进行浏览器测试，并且我第一次学习BDD测试 - 所以我是BDD的初学者。我遇到了一个问题，想知道解决它的最佳实践方法。

（我将它用于node.js webapp，所以它是cucumber.js和selenium WebDriverJS，但平台对于这个问题无关紧要）

说明

在Gherkin语法的教程中，您经常会看到点击特定页面上的按钮的示例，例如：

Given (something)
When I click the submit button
Then (something)

为这一步骤实现步骤定义非常简单 - 只需让selenium找到与css选择器匹配的元素，然后点击它就可以点击selenium。

问题：

但是，如果你在不同的页面上有不同的按钮，并且具有相同的＆＃34;人类可读的＆＃34; name（即黄瓜步骤文本中的相同名称），但必须由不同的css选择器定位？

您似乎无法拥有功能本地的步骤定义，但所有步骤定义都在所有功能之间共享。这意味着如果您创建一个步骤＆＃34;我单击提交按钮＆＃34;，如上所述，步骤定义必须用于测试整个webapp中具有提交按钮的所有页面。我不确定这样做的正确方法是什么。

问题：

处理此问题的最佳做法是什么？

问题示例：

假设我们有3个页面都有一个“下一个”按钮，它在每个页面上做了完全不同的事情，并且在DOM中完全不同。我们假设每个页面都有一个功能。在每个功能中，涉及“下一个”按钮的方案如下所示：

Given I am on page xyz
And ...
And I click the next button
And ...
When ...
Then ...

问题是，在第一页上，“下一步”按钮可能位于“.next-button”，第二页上可能是“#someContainer .btn.btn-primary”，第三页上“#assetButtons li：nth-child（3）”。如果我们对每个特征都有一个局部步骤定义，它们可能看起来像：

this.Given(/^I click the next button$/, function(callback) {
    this.driver.findElement(this.webdriver.By.css(”.next-button”).click();
    callback();
});

this.Given(/^I click the next button$/, function(callback) {
    this.driver.findElement(this.webdriver.By.css(”#someContainer .btn.btn-primary”).click();
    callback();
});

this.Given(/^I click the next button$/, function(callback) {
    this.driver.findElement(this.webdriver.By.css(”#assetButtons li:nth-child(3)”).click();
    callback();
});

但由于步骤定义对于所有功能都是全局的，并且您自然无法为同一个正则表达式创建两个步骤定义，因此我会单击下一个按钮＆＃34;需要知道我们所在的页面或该场景所指的“下一步”按钮。

我自己的一些想法： 可选阅读

可以使步骤名称不那么通用，并使它们也引用按钮所在的页面：＆＃34;我点击首页上的下一个按钮＆＃34;。这个问题是我们已经在场景中写过我们是在那个页面上，所以它是多余的。
可以为不同的“下一个”按钮组成不同的名称页面 - 如“首页下一页”和“搜索页面下一页”。
可以使步骤定义检测您当前所在的页面并使用不同的css选择器在页面上。（它可以查询硒例如，当前的URL，并查找要使用的css选择器，基于步骤中的按钮名称和当前页面。
可以在步骤文本中包含css选择器。但这并不是人类可读的，并且看起来不像BDD。
选择更高的抽象级别，您不必谈论按钮等，但是更高级别的动作，例如＆＃34;我转到搜索结果中的下一页＆＃34;。（似乎不是一般的好方法 - 通常是确切的步骤很重要，因为通常可以在不同的步骤中执行相同的操作方式，所有这些路径当然应该通过测试来运用。例如，如果你也可以通过按＆＃34; N＆＃34;来进入下一页。或者滑动，这只会测试其中一个案例（当然也可以包括步骤文本中的那些）。）

但是这样做的正确方法是什么？

Answer 1

说你“点击提交按钮”是一个糟糕的小黄瓜。你想写一个陈述句子来说明你在做什么，而不是你是怎么做的。在您的测试设计中不应找到诸如“点击此按钮”之类的命令句。我理解你指出能够以多种方式做事，在这种情况下，这是一个重要的细节，但尽可能抽象。

你声明你有三个下一个按钮可以做三件完全不同的事情，在你的小黄瓜中陈述这些动作

When I advance the image carousel
When I go to the next news page
When I view the next page of search results

至于不同的路径......

When I swipe to view the next page of search results
When I use the keyboard to view the next page of search results
When I click on the next link to view the next page of search results

现在我们可以把它变成一个stepdef，它有三个不同的动作。

黄瓜和小黄瓜的目的不是让你的场景变干，而是让它成为人类可读的，非程序员类型和生活文档的形式可以理解。如果你在那里有更多的单词，它将不会是世界末日（）

Answer 2

“声明性句子”实际上不是解决此问题的正确方法。有时我们确实想测试特定的按钮，文本，单选按钮等。因为它们是用户体验的一部分，甚至是用户接受标准的一部分。

例如，假设某天客户告诉您该功能很好。但是，他们希望更改某些Web元素的措词和/或操作它们的顺序。您如何测试它们？您必须处理细节。

实际上，使用Cucumber在不同的抽象级别进行测试只是正常现象。有些正在针对功能进行测试，而另一些正在针对详细的UI / UX进行测试。

Cucumber的创建者声称我不同意“ BDD Tool Cucumber不是测试工具”。如果不将Cucumber用于测试，则根本没有人会使用它。市场上有很多好的/更好的文档/通讯工具。

回到问题，我认为您的第三个选择是正确的

可以使步进定义检测您当前所在的页面并根据页面使用不同的CSS选择器。（它可以查询例如，当前网址的硒，以及查找要使用的css-selector，基于步骤中的按钮名称和当前页面）。

您无需检测您当前所在的页面，因为您已在上一步中指出了该信息

鉴于我在xyz页面上

您只需要在文本上下文中维护当前页面即可。

黄瓜BDD浏览器测试 - 处理具有相同名称但不同css的不同按钮？

2 个答案: