黄瓜BDD浏览器测试–处理名称相同但CSS不同的不同按钮？

Question

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

（我正在将它用于node.js Web应用程序，因此它是cucumber.js和Selenium WebDriverJS，但是该平台对于该问题无关紧要）

描述：

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

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

实现此步骤的步骤定义非常简单–只需让selenium使用与按钮匹配的css-selector来定位元素，然后让selenium单击它即可。

问题：

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

似乎您不能具有局部于要素的阶梯定义，但所有阶梯定义在所有要素之间共享。这意味着，如上所述，如果您创建步骤“我单击提交按钮”，则该步骤定义必须适用于测试整个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();
});

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

---

我的一些想法： 可选阅读

• 可以使步骤名的通用性降低，并使它们也引用按钮所在的页面：“我单击首页上的下一个按钮”。问题是我们已经在该页面上的场景中编写了代码，因此这是多余的。
• 可以为不同页面上的“下一页”按钮组成不同的名称，例如“下一页”和“下一页搜索”。
• 可以使逐步定义检测您当前在哪个页面上，并根据页面使用不同的css选择器。（例如，它可以根据步骤和当前页面中的按钮名称，在selenium中查询当前URL，并查找要使用的css-selector。）
• 可以在步骤文本本身中包含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。

黄瓜和小黄瓜的目的不是使您的情况变干，而是使之易于阅读，可以被非程序员类型和居住文档形式理解。如果您还有其他一些话，那将不会是世界的尽头（）