Wie finde ich ein Webelement in einem dynamischen Vollkalender?

Question

Meine Selen Setup ist Java/Eclipse/TestNG und mein Treiber ist Chrome.

Ich mag einen Tag in einem fullcalendar auf unserer Webseite finden und es doppelklicken, was wiederum ein separates Panel öffnet an diesem Tag eine Verschiebung zu erstellen.

Mein Problem ist, dass, wenn ich Xpath (mit XPath Helper-Plugin für Chrome abgerufen) zu einem bestimmten Tag in einem vollständigen Kalender suchen und dann versuchen, einen Doppelklick darauf, passiert nichts. Ich habe xpaths auf anderen Elementen auf der Seite ausprobiert und sie funktionieren. Ich habe auch die doubleclick-Methode separat auf einer externen Test-URL versucht, und es funktioniert. Ich habe eine Schlafmethode, um sicherzustellen, dass die Seite geladen wird. Laut meinem Entwicklerkollegen ist der vollständige Kalender dynamisch.

So muss das Problem, dass XPath sein kann den spezifischen Tag im Kalender nicht gefunden werden. Weiß jemand, wie man das schafft? Ist mit dem XPath-Locator etwas nicht in Ordnung? Hier ist mein Code:

@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-Code von Kalenderteil (sorry über das schlechte Format, ich weiß nicht, wie es besser machen erscheinen):

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

Answer 1

Selenium WebDriver DatePicker Calendar (youtube)

oder

How to handle Calendar in Selenium Webdriver

Answer 2

Ich sehe, dass der HTML-Code ziemlich gut strukturiert ist, und dass es nützliche Stile gibt, die wir nutzen können. Ich habe bestätigt, dass der folgende CSS-Locator/Selektor den ersten Tag der "dritten Zeile" eindeutig identifiziert (wobei ich annehme, dass Sie die dritte Woche meinen).

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

Das ist nur die Spalte in der Tabelle. Müssen Sie tatsächlich auf den Bereich mit dem + doppelklicken? fügen Sie diese Spanne auf den Locator:

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

Ich bin mehr vertraut mit CSS Pfade, also werde ich überlasse es Ihnen, dies zu übersetzen, um XPath, wenn Sie das wollen.

Hinweis, ist die HTML nur ein Ausschnitt. Bitte vergewissern Sie sich, dass es nicht in einem Iframe eingeschlossen ist. In diesem Fall müssen Sie zuerst zum Rahmen wechseln.