Cucumber BDD浏览器测试--处理同名但CSS不同的按钮？

Question

说明：

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

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

实现这一步的步骤定义非常简单-只需让selenium用任何与按钮匹配的css-selector定位元素，然后让selenium单击它。

问题示例：

假设我们有3个页面，其中都有一个“Next”按钮，该按钮在每个页面上执行完全不同的操作，并且在DOM中的位置也完全不同。假设每个页面都有一个特性。在每个特性中，涉及“Next”按钮的场景如下所示：

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

问题是，在第一页，“Next”按钮可能由“.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();
});

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

但是怎样做才是正确的方法呢？

Answer 1

说你“点击提交按钮”是不好的小cucumber。你想写陈述句，陈述你在做什么，但不是你是如何做的。像“点击这个按钮”这样的祈使句不应该在你的测试设计中找到。我理解你的观点，即能够以不止一种方式做事，在这种情况下，这是一个重要的细节，但尽可能抽象。

你说你有三个next按钮，做三个完全不同的事情，在你的小cucumber里说出这些动作

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