Cucumber BDD 浏览器测试——处理名称相同但不同 css 的不同按钮？

Question

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

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

描述：

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

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

实现此步骤的步骤定义非常简单——只需让 selenium 使用任何 css-选择器恰好与按钮匹配的元素定位元素，然后让 selenium 单击它。

问题：

但是，如果不同页面上的不同按钮具有相同的 "human readable" 名称（即黄瓜步骤文本中的相同名称），但必须位于不同的 css-选择器？

您似乎不能拥有局部于特征的步骤定义，但所有步骤定义都在所有特征之间共享。这意味着如果您创建一个步骤 "I click the submit button"，如上所述，步骤定义必须用于测试整个 Web 应用程序中具有提交按钮的所有页面。我不太确定这样做的正确方法是什么。

问题：

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

问题示例：

假设我们有 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();
});

但是由于步骤定义对所有功能都是全局的，您自然不能为同一个正则表达式创建两个步骤定义，"I click the next button" 的步骤定义需要知道我们在哪个页面场景指的是哪个“下一步”按钮。

自己的一些想法： 选读

可以使步骤名称不那么通用，并使它们也引用按钮在哪个页面上："I click the next button on the front page"。这个问题是我们已经在场景中写了我们是在那个页面上，所以它是多余的。
可以为不同的“下一步”按钮起不同的名字页面——比如“下一个首页”和“下一个搜索页面”。
可以使步骤定义检测您当前所在的页面并使用不同的 css-选择器，具体取决于在页面上。（它可以查询硒例如，当前 URL，并查找要使用的 css-选择器，基于步骤和当前页面中的按钮名称）。
可以在步骤文本中包含 css-选择器。但这不是人类可读的，而且看起来不像 BDD 方式。
选择更高的抽象层次，你不谈的地方按钮等，但更高级别的操作，例如 "I go to the next page in the search results"。（总的来说似乎不是一个好方法——通常是准确的步骤很重要，因为相同的动作通常可以在不同的地方完成方式，所有这些路径当然应该通过测试来执行。例如，如果您还可以通过按 "N" 或滑动来转到下一页，这只会测试其中的一种情况（但当然也可以将其包含在步骤文本中）。）

但是正确的方法是什么？

Answer 1

说你"click on the submit button"是坏小黄瓜。你想写陈述句来说明你在做什么，而不是你是怎么做的。像 "click on this button" 这样的祈使句不应该出现在你的测试设计中。我理解你的意思是能够以不止一种方式做事，在这种情况下这是一个重要的细节，但要尽可能抽象。

你说你有三个下一个按钮来做三件完全不同的事情，在你的小黄瓜中说出这些动作

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，它绑定了三个不同的动作。

Cucumber 和 Gherkin 的目的不是让你的场景变干，而是让它变得人类可读，非程序员类型也可以理解，并且是一种动态文档形式。再多说几句就不是世界末日了()

Answer 2

"declarative sentence" 实际上不是解决这个问题的正确方法。有时我们确实想测试特定的按钮、文本、单选按钮等。因为它们是用户体验的一部分，甚至是用户接受标准的一部分。

例如，假设有一天客户告诉您功能很好。然而，他们想改变某些 Web 元素的措辞 and/or 来操纵它们。你如何测试它们？你要处理好细节。

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

进行测试

Cucumber 的创建者声称 "BDD Tool Cucumber is Not a Testing Tool" 我不同意。如果 Cucumber 不用于测试，那么根本就没有人会使用它。市场上有很多 good/better document/communication 工具。

回到问题，我觉得你的第三个选项差不多是对的

Could make the step-definition detect which page you are currently on and use different css-selectors depending on the page. (It could query selenium for the current URL, for example, and lookup which css-selector to use, based on both the button-name from the step and the current page).

您不需要检测您所在的当前页面，因为您已经在上一步中指出了它

Given I am on page xyz

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

Cucumber BDD 浏览器测试——处理名称相同但不同 css 的不同按钮？

Cucumber BDD browser testing – handling different buttons with same name but different css?

cucumber

bdd

gherkin

cucumberjs