如何在动态完整日历中找到Web元素?

时间:2016-05-10 07:16:58

标签: selenium xpath webdriver fullcalendar double-click

我的Selenium设置是Java / Eclipse / TestNG,我的驱动程序是Chrome。

我想在我们的网页上查看完整日历中的一天并双击它,这反过来会打开一个单独的面板以在当天创建一个班次。

我的问题是,当我使用xpath(使用Chrome的XPath Helper插件检索)在完整日历中找到某一天,然后尝试双击它时,没有任何反应。我已经在页面上的其他元素上尝试过xpath并且它们可以工作。我也在外部测试网址上单独尝试了doubleclick方法,它可以工作。我有一个睡眠方法来确保页面加载。根据我的开发同事的说法,完整的日历是动态的。

所以问题必定是xpath无法在日历中找到特定日期。有谁知道怎么解决这个问题? xpath定位器有问题吗?这是我的代码:

@Test
public void Userstory1() {
    //Navigate to url and double-click on Monday on row 3 in calendar
    driver.navigate().to(”company/url”);
    try {
        Thread.sleep(3000);
    }
    catch(Exception e) {
    }

    WebElement element = driver.findElement
            (By.xpath("/html/body/div[@id='wrapper']/div[@id='main-container']/div[@id='single-column-row']/div"
                    + "[@id='main-content']/div[@id='schedule-container']/div[@id='js-company-schedule-wrapper']/div"
                    + "[@id='js-company-schedule-calendar']/div[@class='fc-view-container']/div[@class='fc-view fc-month-view fc-basic-view']"
                    + "/table/tbody[@class='fc-body']/tr/td[@class='fc-widget-content']/div[@class='fc-day-grid-container']/div"
                    + "[@class='fc-day-grid']/div[@class='fc-row fc-week fc-widget-content'][3]/div[@class='fc-content-skeleton']/table/tbody/tr/td[2]"));

    Actions action = new Actions(driver).doubleClick(element);
    action.build().perform();
}

日历部分的HTML代码(抱歉格式不好,我不知道如何让它看起来更好):

<div id="js-company-schedule-calendar" class="fc fc-ltr fc-unthemed"><div class="fc-view-container"><div class="fc-view fc-month-view fc-basic-view"><table><thead class="fc-head"><tr><td class="fc-widget-header"><div class="fc-row fc-widget-header"><table><thead><tr><th class="fc-week-number fc-widget-header" style="width: 18px;"><span>v.</span></th><th class="fc-day-header fc-widget-header fc-mon">måndag</th><th class="fc-day-header fc-widget-header fc-tue">tisdag</th><th class="fc-day-header fc-widget-header fc-wed">onsdag</th><th class="fc-day-header fc-widget-header fc-thu">torsdag</th><th class="fc-day-header fc-widget-header fc-fri">fredag</th><th class="fc-day-header fc-widget-header fc-sat">lördag</th><th class="fc-day-header fc-widget-header fc-sun">söndag</th></tr></thead></table></div></td></tr></thead><tbody class="fc-body"><tr><td class="fc-widget-content"><div class="fc-day-grid-container"><div class="fc-day-grid"><div class="fc-row fc-week fc-widget-content"><div class="fc-bg"><table><tbody><tr><td class="fc-week-number fc-widget-content" style="width: 18px;"></td><td class="fc-day fc-widget-content fc-mon fc-other-month fc-past" data-date="2016-04-25"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-tue fc-other-month fc-past" data-date="2016-04-26"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-wed fc-other-month fc-past" data-date="2016-04-27"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-thu fc-other-month fc-past" data-date="2016-04-28"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-fri fc-other-month fc-past" data-date="2016-04-29"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sat fc-other-month fc-past" data-date="2016-04-30"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sun fc-past" data-date="2016-05-01"><span class="day-plus-shift">+</span></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-week-number" style="width: 18px;"><span>17</span></td><td class="fc-day-number fc-mon fc-other-month fc-past" data-date="2016-04-25">25</td><td class="fc-day-number fc-tue fc-other-month fc-past" data-date="2016-04-26">26</td><td class="fc-day-number fc-wed fc-other-month fc-past" data-date="2016-04-27">27</td><td class="fc-day-number fc-thu fc-other-month fc-past" data-date="2016-04-28">28</td><td class="fc-day-number fc-fri fc-other-month fc-past" data-date="2016-04-29">29</td><td class="fc-day-number fc-sat fc-other-month fc-past" data-date="2016-04-30">30</td><td class="fc-day-number fc-sun fc-past red-day" data-date="2016-05-01">1</td></tr></thead><tbody><tr><td class="fc-week-number" style="width:18px"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content"><div class="fc-bg"><table><tbody><tr><td class="fc-week-number fc-widget-content" style="width: 18px;"></td><td class="fc-day fc-widget-content fc-mon fc-past" data-date="2016-05-02"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-tue fc-past" data-date="2016-05-03"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-wed fc-past" data-date="2016-05-04"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-thu fc-past" data-date="2016-05-05"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-fri fc-past" data-date="2016-05-06"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sat fc-past" data-date="2016-05-07"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sun fc-past" data-date="2016-05-08"><span class="day-plus-shift">+</span></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-week-number" style="width: 18px;"><span>18</span></td><td class="fc-day-number fc-mon fc-past" data-date="2016-05-02">2</td><td class="fc-day-number fc-tue fc-past" data-date="2016-05-03">3</td><td class="fc-day-number fc-wed fc-past" data-date="2016-05-04">4</td><td class="fc-day-number fc-thu fc-past red-day" data-date="2016-05-05">5</td><td class="fc-day-number fc-fri fc-past" data-date="2016-05-06">6</td><td class="fc-day-number fc-sat fc-past" data-date="2016-05-07">7</td><td class="fc-day-number fc-sun fc-past red-day" data-date="2016-05-08">8</td></tr></thead><tbody><tr><td class="fc-week-number" style="width:18px"></td><td></td><td></td><td></td><td></td><td class="fc-event-container"><a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable shiftid_525_1 choose"><div class="fc-content"><span class="fc-time">10:00 - 22:00</span> <span class="fc-title">&nbsp;</span></div><div class="fc-content">
    Obemannat
</div>
<div class="fc-content">
    
    

    

    

    

    

    
</div></a></td><td></td><td></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content"><div class="fc-bg"><table><tbody><tr><td class="fc-week-number fc-widget-content" style="width: 18px;"></td><td class="fc-day fc-widget-content fc-mon fc-past" data-date="2016-05-09"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-tue fc-today fc-state-highlight" data-date="2016-05-10"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-wed fc-future" data-date="2016-05-11"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-thu fc-future" data-date="2016-05-12"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-fri fc-future" data-date="2016-05-13"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sat fc-future" data-date="2016-05-14"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sun fc-future" data-date="2016-05-15"><span class="day-plus-shift">+</span></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-week-number" style="width: 18px; background-color: rgb(255, 255, 255);"><span>19</span></td><td class="fc-day-number fc-mon fc-past" data-date="2016-05-09">9</td><td class="fc-day-number fc-tue fc-today fc-state-highlight" data-date="2016-05-10">Idag 10</td><td class="fc-day-number fc-wed fc-future" data-date="2016-05-11">11</td><td class="fc-day-number fc-thu fc-future" data-date="2016-05-12">12</td><td class="fc-day-number fc-fri fc-future" data-date="2016-05-13">13</td><td class="fc-day-number fc-sat fc-future" data-date="2016-05-14">14</td><td class="fc-day-number fc-sun fc-future red-day" data-date="2016-05-15">15</td></tr></thead><tbody><tr><td class="fc-week-number" style="width:18px"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content"><div class="fc-bg"><table><tbody><tr><td class="fc-week-number fc-widget-content" style="width: 18px;"></td><td class="fc-day fc-widget-content fc-mon fc-future" data-date="2016-05-16"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-tue fc-future" data-date="2016-05-17"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-wed fc-future" data-date="2016-05-18"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-thu fc-future" data-date="2016-05-19"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-fri fc-future" data-date="2016-05-20"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sat fc-future" data-date="2016-05-21"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sun fc-future" data-date="2016-05-22"><span class="day-plus-shift">+</span></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-week-number" style="width: 18px; background-color: rgb(255, 255, 255);"><span>20</span></td><td class="fc-day-number fc-mon fc-future" data-date="2016-05-16">16</td><td class="fc-day-number fc-tue fc-future" data-date="2016-05-17">17</td><td class="fc-day-number fc-wed fc-future" data-date="2016-05-18">18</td><td class="fc-day-number fc-thu fc-future" data-date="2016-05-19">19</td><td class="fc-day-number fc-fri fc-future" data-date="2016-05-20">20</td><td class="fc-day-number fc-sat fc-future" data-date="2016-05-21">21</td><td class="fc-day-number fc-sun fc-future red-day" data-date="2016-05-22">22</td></tr></thead><tbody><tr><td class="fc-week-number" style="width:18px"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content"><div class="fc-bg"><table><tbody><tr><td class="fc-week-number fc-widget-content" style="width: 18px;"></td><td class="fc-day fc-widget-content fc-mon fc-future" data-date="2016-05-23"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-tue fc-future" data-date="2016-05-24"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-wed fc-future" data-date="2016-05-25"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-thu fc-future" data-date="2016-05-26"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-fri fc-future" data-date="2016-05-27"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sat fc-future" data-date="2016-05-28"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sun fc-future" data-date="2016-05-29"><span class="day-plus-shift">+</span></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-week-number" style="width: 18px;"><span>21</span></td><td class="fc-day-number fc-mon fc-future" data-date="2016-05-23">23</td><td class="fc-day-number fc-tue fc-future" data-date="2016-05-24">24</td><td class="fc-day-number fc-wed fc-future" data-date="2016-05-25">25</td><td class="fc-day-number fc-thu fc-future" data-date="2016-05-26">26</td><td class="fc-day-number fc-fri fc-future" data-date="2016-05-27">27</td><td class="fc-day-number fc-sat fc-future" data-date="2016-05-28">28</td><td class="fc-day-number fc-sun fc-future red-day" data-date="2016-05-29">29</td></tr></thead><tbody><tr><td class="fc-week-number" style="width:18px"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content"><div class="fc-bg"><table><tbody><tr><td class="fc-week-number fc-widget-content" style="width: 18px;"></td><td class="fc-day fc-widget-content fc-mon fc-future" data-date="2016-05-30"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-tue fc-future" data-date="2016-05-31"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-wed fc-other-month fc-future" data-date="2016-06-01"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-thu fc-other-month fc-future" data-date="2016-06-02"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-fri fc-other-month fc-future" data-date="2016-06-03"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sat fc-other-month fc-future" data-date="2016-06-04"><span class="day-plus-shift">+</span></td><td class="fc-day fc-widget-content fc-sun fc-other-month fc-future" data-date="2016-06-05"><span class="day-plus-shift">+</span></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-week-number" style="width: 18px;"><span>22</span></td><td class="fc-day-number fc-mon fc-future" data-date="2016-05-30">30</td><td class="fc-day-number fc-tue fc-future" data-date="2016-05-31">31</td><td class="fc-day-number fc-wed fc-other-month fc-future" data-date="2016-06-01">1</td><td class="fc-day-number fc-thu fc-other-month fc-future" data-date="2016-06-02">2</td><td class="fc-day-number fc-fri fc-other-month fc-future" data-date="2016-06-03">3</td><td class="fc-day-number fc-sat fc-other-month fc-future" data-date="2016-06-04">4</td><td class="fc-day-number fc-sun fc-other-month fc-future red-day" data-date="2016-06-05">5</td></tr></thead><tbody><tr><td class="fc-week-number" style="width:18px"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div></div></div></td></tr></tbody></table></div></div>

    </div>

2 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

我看到html的结构相当合理,并且我们可以利用有用的样式。我已经确认以下CSS定位器/选择器将唯一地标识&#34;第三行的第一天&#34; (我假设你的意思是指第三周)。

div.fc-row.fc-week:nth-of-type(3) td.fc-day:nth-of-type(2)

这只是表格中的列。你需要用+实际双击跨度吗?将该范围添加到定位器:

div.fc-row.fc-week:nth-of-type(3) td.fc-day:nth-of-type(2) span.day-plus-shift

我对CSS路径比较熟悉,所以如果你愿意,我会留给你把它翻译成xpath。

请注意,HTML只是一个片段。请确保它没有包装在iframe中。在这种情况下,您需要先切换到相框。