Question

I hope someone here can help me. Im using selenium to test a page that has an image which when click displays a calendar. I can get as far as clicking the image using

browser.click("//center/table/tbody/tr/td[1]/a/img")

I got the above path by using the Selenium IDE. The problem is once i click the above image the Selenium IDE does not record what i have clicked after the calendar is shown.

Here is the code for the image button

<INPUT size='8' CLASS="field-date" TYPE="text" NAME="endQtrDate" VALUE="01/10/2004" ID="endQtrDate" onBlur="this.value=validateFieldValue(this.value,'date_error','endQtrDate',this.form)" onFocus="this.select()" TITLE="Enter date in format dd/mm/yyyy" /> 
   <IMG ALIGN="absmiddle" ALT="Press to show calendar picker" NAME="calendarButton"  SRC="../images/buttons/small/calendar.gif" onClick="return showCalendar('endQtrDate', 'dd/MM/yyyy');" />

Unfortunately i cant see the code for the calendar after i click it. The only way i can see it is using the mozilla plugin “Firebug”. I managed to get the div layer of which the calendar is displayed.

<div class="calendar"
     style="position: absolute; display: none; left: 234px; top: 416px;">
<table cellspacing="0" cellpadding="0">
 <thead>
  <tr>
   <td colspan="1" class="button">-</td>
   <td colspan="6" class="title" style="cursor: move;">October,
   2004</td>
   <td colspan="1" class="button">×</td>
  </tr>
  <tr class="headrow">
   <td colspan="1" class="button">«</td>
   <td colspan="1" class="button">‹</td>
   <td colspan="4" class="button">Today</td>
   <td colspan="1" class="button">›</td>
   <td colspan="1" class="button">»</td>
  </tr>
  <tr class="daynames">
   <td class="name wn">wk</td>
   <td class="day name">Mon</td>
   <td class="day name">Tue</td>
   <td class="day name">Wed</td>
   <td class="day name">Thu</td>
   <td class="day name">Fri</td>
   <td class="name day weekend">Sat</td>
   <td class="name day weekend">Sun</td>
  </tr>
 </thead>
 <tbody>
  <tr class="daysrow">
   <td class="day wn">40</td>
   <td class="day">&nbsp;</td>
   <td class="day">&nbsp;</td>
   <td class="day">&nbsp;</td>
   <td class="day">&nbsp;</td>
   <td class="day">1</td>
   <td class="day weekend">2</td>
   <td class="day weekend">3</td>
  </tr>
  <tr class="daysrow">
   <td class="day wn">41</td>
   <td class="day">4</td>
   <td class="day">5</td>
   <td class="day">6</td>
   <td class="day">7</td>
   <td class="day">8</td>
   <td class="day weekend">9</td>
   <td class="day weekend">10</td>
  </tr>
  <tr class="daysrow">
   <td class="day wn">42</td>
   <td class="day">11</td>
   <td class="day">12</td>
   <td class="day">13</td>
   <td class="day">14</td>    
   <td class="selected day">15</td>
   <td class="day weekend">16</td>
   <td class="day weekend">17</td>
  </tr>
  <tr class="daysrow">
   <td class="day wn">43</td>
   <td class="day">18</td>
   <td class="day">19</td>
   <td class="day">20</td>
   <td class="day">21</td>
   <td class="day">22</td>
   <td class="day weekend">23</td>
   <td class="day weekend">24</td>
  </tr>
  <tr class="daysrow">
   <td class="day wn">44</td>
   <td class="day">25</td>
   <td class="day">26</td>
   <td class="day">27</td>
   <td class="day">28</td>
   <td class="day">29</td>
   <td class="day weekend">30</td>
   <td class="day weekend">31</td>
  </tr>
  <tr class="emptyrow">
   <td class="day wn">36</td>
   <td class="day">30</td>
   <td class="day">31</td>
   <td class="day">&nbsp;</td>
   <td class="day">&nbsp;</td>
   <td class="day">&nbsp;</td>
   <td class="day">&nbsp;</td>
   <td class="day">&nbsp;</td>
  </tr>
 </tbody>
 <tfoot>
  <tr class="footrow">
   <td colspan="8" class="ttip" style="cursor: move;">Select date</td>
  </tr>
 </tfoot>
</table>
<div class="combo" style="display: none;">
<div class="label">Jan</div>
<div class="label">Feb</div>
<div class="label">Mar</div>
<div class="label">Apr</div>
<div class="label">May</div>
<div class="label">Jun</div>
<div class="label">Jul</div>
<div class="label">Aug</div>
<div class="label">Sep</div>
<div class="label">Oct</div>
<div class="label">Nov</div>
<div class="label">Dec</div>
</div>
<div class="combo" style="display: none;">
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
</div>
</div>

If you look carefully you will see table cells for dates from 1 to 30th. How can i access these values using Selenium? I can use the IDE as it doesnt record anything when the calendar pops up.

The firebug has an option to display the xpath of any tag. I tried it on one of the td tags and it says this is the xpath.


/html/body/div/table/thead/tr[2]/td[3]


Can i use the above path to determine its value then click on it using selenium?

Thanks

Answer 1

To click on the image you can use click | calendarButton and that should load it up for you.

From there you will then need to click on items I would then use firebug to see the other items on the page.

Edit from extra info:

What you need to do then is use xpath=//td[@class="day" and text()="14"] for xpath or for css use css=td.day:contains('14')

The css route will be a lot quicker in browsers like Internet Explorer