试图抓住一个特定的元素与CSS选择器

我使用nightwatch.js，并试图点击日期选择器用户界面的按钮为jQuery。显然，根据我要运行测试的日期，DatePicker UI会发生变化。试图抓住一个特定的元素与CSS选择器

我想包裹我的头怎样得到nightwatchjs点击第一个非禁用选项（jQueryUI作为链接在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，试图找出我可以用什么选择器选择该表中的第一个a。我试过这些，但是它们都抓住td中的第一个a，因为它是该父母的第一个孩子。

以下所有选择的所有环节：

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

我也试着更具体一点：

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

还是一样。

任何想法？

来源

2016-08-12 Philll_t

我喜欢简单的提及jQuery会导致每个人都建议使用jQuery选择器，即使正在使用的库*不是jQuery *。 AFAIK Nightwatch不支持jQuery选择器或插入Sizzle作为选择器引擎... – BoltClock

Nightwatch是否提供了一种在特定DOM元素上执行命令的方法？如果是这样你可以使用jQuery来选择正确的元素并将其底层DOM实例传递给Nightwatch。否则，你最好的选择是XPath。 – BoltClock

你检查了答案吗？它是否提供了您正在寻找的解决方案？ – Dekel

几个经过摆弄时间和研究的我意识到，有没有这样做的一个简单的方法使用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。

来源

2016-08-17 04:06:24

您可以使用下列操作之一：

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

希望它可以帮助

来源

2016-08-12 03:21:13 Dekel

你可以尝试做这两种方法（使用jQuery选择）：

或者选择第一个td，它有一个a - $(".ui-datepicker-calendar td:has(a):first()")

选择第一td没有残疾类别 - $(".ui-datepicker-calendar td:not(.ui-state-disabled):first()")

Example

来源

2016-08-12 03:46:53 tewathia

试图抓住一个特定的元素与CSS选择器

回答

相关问题