Behat CSS 选择器在 chrome 中工作，而不是在 Firefox 中答案

【问题标题】：Behat CSS selectors work in chrome, not in firefoxBehat CSS 选择器在 chrome 中工作，而不是在 Firefox 中
【发布时间】：2016-09-15 18:42:48
【问题描述】：

我刚刚开始使用 Behat 和 Selenium。我正在为网站进行测试自动化，但我遇到了一些 CSS 选择器在 Chrome 中工作但在 Firefox 中找不到的问题。

例如，我在 Behat 中有这个：

然后我按“.topmember-resultList .resultListItem .resultListInteractions div:nth-child(1)”

'Ipress' 方法使用选择器搜索元素并单击它。

正如我所说，它在 Chrome 中运行良好，但在 Firefox 中测试失败，因为找不到该元素。似乎只有当我使用 nth-child 时才会发生。但是 afaik，Firefox (48.0) 也应该支持它。

【问题讨论】：

您是否在两个浏览器中手动检查过？元素的显示可能不同。如果可能，请提供完整的堆栈跟踪。
理论上使用很多这样的选择器并没有错，但您也可以考虑更简单的测试。例如：“我应该看到 x”，然后是“然后我按 x”，放弃所有选择器。只需使用您希望在链接/按钮中看到的文本/内容。
奇怪的是，我似乎已经通过将 nth-child 转换为 nth-of-type 来解决它。这同样适用，在 Firefox 中也是如此。尽管两个浏览器中的元素相同。不知道为什么，但我很好。

标签： css selenium firefox behat

【解决方案1】：

这是我们所有人在尝试将代码从 chrome 测试回收到 firefox 测试时发现的一个大问题。

您可以尝试以下方法：

创建一个抽象上下文，您可以在其中将所有没有冲突的方法/步骤放入测试中。然后，您可以创建两个从抽象类扩展的上下文，一个用于 chrome，一个用于 Firefox。这样，您可以对两种浏览器使用相同的方法，但每个浏览器中的代码不同。（您需要在 behat.yml 文件中区分浏览器上下文定义）在 chrome 上下文中，您可以使用您的工作 cssSelector 放置您的原始方法。在 Firefox 中，创建相同的方法，但使用适用于 Firefox 的 CssSelector。或者使用 Xpath 选择器，它在 firefox 中也是一个很好的解决方案。

希望对你有帮助。

【讨论】：