Question

我正在使用nightwatch.js，我正在尝试点击jQuery日期选择器ui上的按钮。显然，根据我将要运行测试的那一天，DatePicker UI会发生变化。

我正在尝试围绕如何让nightwatchjs点击第一个非禁用选项（jQueryUI在td元素中显示为链接而不是{{1} }）。

span

所以我一直在使用CSS来尝试找出我可以用来选择此表中第一个<table class="ui-datepicker-calendar"> <thead> <tr> ... Header </tr> </thead> <tbody> <tr> ... This entire row is disabled with td like this: <td class= "ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled class"> <span class="ui-state-default">6</span></td> </tr> <tr> <td class= "ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled class"> <span class="ui-state-default">7</span></td> <td class="ui-datepicker-unselectable ui-state-disabled class"><span class= "ui-state-default">8</span></td> <td class="ui-datepicker-unselectable ui-state-disabled class"><span class= "ui-state-default">9</span></td> <td class="ui-datepicker-unselectable ui-state-disabled class"><span class= "ui-state-default">10</span></td> <td class= "ui-datepicker-unselectable ui-state-disabled class ui-datepicker-today"> <span class="ui-state-default">11</span></td> // First instance of a clickable button that has an "a" element in it and this is the only one I want to grab: <td class="ui-datepicker-days-cell-over class" data-handler="selectDay" data-event="click" data-month="7" data-year="2016"><a class="ui-state-default" href="#">12</a></td> <td class= "ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled class"> <span class="ui-state-default">13</span></td> </tr> <tr> ... Another row </tr> <tr> ... Another row </tr> <tr> ... Another row </tr> </tbody>的选择器。我已经尝试了这些，但它都抓住a中的第一个a，因为它是该父母的第一个孩子。

以下所有选择所有链接：

td

我还尝试了一些更具体的内容：

a:first-child
a:first-of-type
a:nth-child(1)
a:nth-of-type(1)

还是一样。

有什么想法吗？

Answer 1

您可以使用以下方法之一：

＆＃13;

  $( function() {
    $('#datepicker').datepicker({
      minDate: new Date()
    });
    console.log($('#datepicker td.ui-datepicker-today a').text());
    console.log($('#datepicker td:not(.ui-datepicker-unselectable) a').first().text());
    console.log($('#datepicker td:not(.ui-datepicker-unselectable) a:not(.ui-state-highlight)').first().text());
  });

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
Date: <div id="datepicker"></div>

＆＃13;

希望有所帮助

Answer 2

您可以尝试这两种方式（使用jQuery选择器）：

选择具有td - a

的第一个$(".ui-datepicker-calendar td:has(a):first()")

OR

选择没有禁用类的第一个td - $(".ui-datepicker-calendar td:not(.ui-state-disabled):first()")

Example

Answer 3

经过几个小时的摆弄和研究后，我意识到使用CSS选择器并不是一种简单的方法。幸运的是，Nightwatch.js允许你使用xPath。

您可以在css或xpath之间轻松切换。以下代码完美无缺：

     ...
      .useXpath() // Switch to xPath
      .click('(//div[@id="ui-datepicker-div"]/table[@class="ui-datepicker-calendar"]/tbody/tr/td/a)[1]')
      .useCss() // then back to css
     ...

xPath提供了更丰富，但更复杂的选择方法。这是使用xPath比使用css选择器更好的一个完美的例子。

详细了解xPath here或here。

了解nightwatch.js如何使用xPath here。

尝试使用css选择器获取特定元素

3 个答案: