如何在动态完整日历中定位 Web 元素？答案

【问题标题】：How do I locate a web element in a dynamic full calendar?如何在动态完整日历中定位 Web 元素？
【发布时间】：2016-05-10 07:16:58
【问题描述】：

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

我想在我们网页上的完整日历中找到一天并双击它，然后会打开一个单独的面板来创建当天的班次。

我的问题是，当我使用 xpath（使用 Chrome 的 XPath Helper 插件检索）来定位完整日历中的某一天，然后尝试双击它时，没有任何反应。我已经在页面上的其他元素上尝试了 xpath，它们可以工作。我还在外部测试 url 上单独尝试了双击方法，它可以工作。我有一个睡眠方法来确保页面加载。据我的开发同事说，完整的日历是动态的。

所以问题一定是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>

【问题讨论】：

你的XPath 一切都错了 :)) 你应该使用相对的XPath 而不是绝对的。为目标元素提供html 代码示例
感谢您的回复，安德森。我要补充一点，我是自动化测试、webdriver 和 html 代码的新手。元素的html代码很长，不知道怎么全部复制到这里。我将检查相对 xpath 和绝对 xpath 之间的区别，看看我能学到什么。
您不需要整页 HTML 代码，只需要包含具有所需值的元素的表（div[@class='fc-content-skeleton'] 的代码及其子表）
获取HTML（在Firefox中）：右键单击元素->“检查元素”->选择代码示例行->CTRL+C
我在 macbook 上使用 Chrome，用 CMD+C 复制一行给我的不仅仅是一行。我尝试在“外部 html”中进行处理，看起来完整的日历代码开始了，但格式很糟糕。

标签： selenium xpath webdriver fullcalendar double-click

【解决方案1】：

Selenium WebDriver DatePicker Calendar (youtube)

或

How to handle Calendar in Selenium Webdriver

【讨论】：

这很好，但它似乎处理日期选择器而不是完整日历，所以恐怕它对我没有帮助。
使用相同的逻辑！获取月份，通用列表中的天数将其与您需要的内容进行比较，点击它等等......
当我导航到我的页面时，页面加载时已打开完整日历，显示当前月份。在我的测试用例中，我想总是双击第三行的第一天（对我来说是星期一）。测试用例不知道它是什么日期、月份或年份。那我还能像你的链接那样使用那个逻辑吗？
如果 driver.FindElement(By.Xpath("//div[@class='fc-content-skeleton']/table/tbody/tr/td[2]")).Click ();
在我的日历中点击一个空白的日子没有任何作用，它必须是双击。正如您在我帖子中的代码中看到的那样，我尝试这样做，但由于我的 xpath 代码错误，它不起作用。我认为关键是把它做好，然后它就会起作用。

【解决方案2】：

我看到 html 的结构相当好，并且我们可以利用一些有用的样式。我已经确认以下 CSS 定位器/选择器将唯一标识“第三行”的第一天（我假设您的意思是第三周）。

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 只是一个 sn-p。请确保它没有被包裹在 iframe 中。在这种情况下，您需要先切换到框架。

【讨论】：