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

Question

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

我正在思考如何让 nightwatchjs 单击第一个 non-disabled 选项（jQueryUI 显示为 link 在 td 元素中而不是 span).

<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>

所以我一直在玩 CSS 来尝试弄清楚 select 或者我可以用来 select 这个 [=44] 中的第一个 a =].我试过这些，但它们都抓住了 td 中的第一个 a，因为它是 parent 的第一个 child。

以下所有 select 所有 link：

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

我也试过更具体的：

.ui-datepicker-calendar tr td a:first-child
 ...

还是一样。

有什么想法吗？

Answer 1

您可以使用其中之一：

  $( 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());
  });

<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>

希望对您有所帮助

Answer 2

您可以尝试两种方式（使用 jQuery select 或）：

或者 select 第一个 td 具有 a - $(".ui-datepicker-calendar td:has(a):first()")

或

select第一个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 or here。

了解如何 nightwatch.js uses xPath here。

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

Trying to grab a specific element with css selector

html

css-selectors

nightwatch.js