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

Question

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

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

描述：

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

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

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

问题：

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

您似乎无法拥有功能本地的步骤定义，但所有步骤定义都在所有功能之间共享。这意味着如果您创建一个步骤“我单击提交按钮”，如上所述，步骤定义必须适用于测试整个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”李：第n个孩子（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();
});

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

---

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

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

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

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工具黄瓜不是测试工具”，我不同意。如果Cucumber不用于测试，那么根本就没有人会使用它。市场上有很多好的/更好的文档/通信工具。

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

可以使步骤定义检测您当前所在的页面，并根据页面使用不同的css选择器。 （例如，它可以查询selenium以获取当前URL，并根据步骤和当前页面中的按钮名称查找要使用的css选择器）。

您无需检测当前页面，因为您已在上一步中指明了该页面

鉴于我在页面xyz

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