Nightwatch 无法通过 css id 或类选择器定位元素答案

【问题标题】：Nightwatch can't locate element via css id or class selectorsNightwatch 无法通过 css id 或类选择器定位元素
【发布时间】：2021-04-04 07:52:11
【问题描述】：

我们正在使用 Nightwatch 来自动化我们的一些 UI 测试。当前的一些测试相当脆弱，主要与奇怪的 CSS 选择器有关，我正在尝试简化它们。但是一些我希望能够使用的简单 CSS 选择器，其实不然。

我试图找到这个嵌套很深的<a>标签：

<a class="btn btn-quote btn-crm" href="/crm/" id="btnEndSession" style="display: inline-block;">End Session</a>

下面是一些有效的代码：

.waitForElementVisible('#quoteSummary > div > div > div > div > a:nth-child(2)', 1000)
.click('#quoteSummary > div > div > div > div > a:nth-child(2)')

但这是一个讨厌的 CSS 选择器，我想用这个替换它：

.waitForElementVisible('#btnEndSession', 1000)
.click('#btnEndSession')

由于我感兴趣的<a> 元素实际上具有btnEndSession 的ID，因此看起来应该可以。但它没有：nightwatch 错误并出现“等待元素可见 10000 毫秒时超时”消息之一。

我也试过了：

.waitForElementVisible('.btn-crm', 10000)
.waitForElementVisible('a[id=btnEndSession]', 10000)
.waitForElementVisible('a#btnEndSession', 10000)

但那些也不起作用。知道为什么这些更简单的选择器没有拾取元素吗？

编辑：

好的，奇怪的是，这行得通：

.waitForElementVisible('a.btn-crm', 1000)

但是，在同一个测试中，寻找这个元素：

<select class="custom-form-control crm-result-visit select-hidden" id="crm-result-visit" name="crmResultVisit">
    <option value=" ">Select</option>
    <option value="Not Home">Not Home</option>
</select>

所有这些不同的选择器都找不到元素：

.waitForElementVisible('select.crm-result-visit', 10000)
.waitForElementVisible('select#crm-result-visit', 10000)
.waitForElementVisible('#crm-result-visit', 10000)
.waitForElementVisible('.crm-result-visit', 10000)
.waitForElementVisible('select[id=crm-result-visit]', 10000)

我有点不情愿地得出这样的结论，即 nightwatch 中的 CSS 选择器支持非常有问题。

FWIW，我们使用的是 nightwatch 0.6.7 版本。

【问题讨论】：

a#btnEndSession 有效吗？从未使用过 Nightwatch.js，但我倾向于认为它也有问题。
好问题。不幸的是，在我上面的两个测试用例中，该语法也失败了。
让这件事如此有趣的是错误消息的性质——它表明 CSS 选择器解析器正在解析选择器，这就是它对关闭的选择器/元素所做的事情。
不管怎样，我们最终放弃了 Nightwatch：这样的问题太多了，没有解决方案。我们开始通过其 C# 绑定直接使用 Selenium，并且效果要好得多。
只是想我会插话 - 自 0.6.x 以来，Nightwatch 已经走过了 long 的道路，我在使用 id 或 class 选择器以上述方式调用时没有任何麻烦.如果调查 TA，非常值得一试：)

标签： javascript css-selectors nightwatch.js

【解决方案1】：

不管怎样，我们最终放弃了 Nightwatch，直接使用 Selenium（在我们的例子中是 C#），它似乎没有这些问题，并且更好地集成到我们的其他环境中。不是一个很好的答案，但我不再有这个问题了:-)。

【讨论】：

你是直接从c#调用Java api吗？
我们正在使用 C# 版本的 Selenium，可直接从该页面下载：seleniumhq.org/download。不确定它是如何在幕后实现的，但我不认为它只是调用 Java 的 C# 绑定：我的印象是它是原生 C# 实现。效果很好。

【解决方案2】：

我刚刚开始使用 NightWatch JS ，我正在使用 nightwatch v0.6.7 。以下代码对我来说工作正常

  module.exports = { 
  '1. test' : function (browser) {
    browser
      .url('<your url>')
      .waitForElementVisible('select[id=crm-result-visit]',1000)
      .click('select[id=crm-result-visit]');
  }
};

【讨论】：

【解决方案3】：

尝试在您的操作之前明确设置 CSS 选择器：

browser.useCss();

browser.waitForElementVisible('.btn-crm', 10000);

【讨论】：