datepickerselenium-ide

Date entry using Selenium IDE

I am working on automating a web application using IDE. I am stuck at date entry. Upon entering date through automated script (typing the date instead of picking from calendar), the calendar pop-up appears and does not close after proceeding to another areas of application. I have around 6 date entries in one screen and all the calendars appear open while script runs which looks odd. Now, when the script is stopped, and when I click anywhere on screen, the entered dates get wiped out and text-box appears blank. This is preventing script to proceed to further screens throwing validation messages for dates. However, when I enter the dates manually and proceed to other areas, the calendar pop-ups get closed and dates are saved in the text box.

Note: Picking the date instead of typing does not work as well as it requires many clicks to scroll to get months and years, particularly if past dates are to be chosen.

How can I proceed with dates getting saved and calendar pop-up closed after every date entry.

Thanks.

Solution

  • The answer to this question depends hugely on the calendar plugin you have used.

    To recreate your issue I have used this date-picker in Semantic UI front-end framework (Semantic UI is neat, do check it too:)).

    Anyways, to get more clarity on what is happening, I would also suggest installing Firebug and Firepath plugins on your mozilla browser.

    Assuming you have done this installation, your life should be simple now. In my case, a popup comes up which is nothing but a date table with links. So I do the following:

    1. First I click on the input box to open the popup. I locate the input box in my Firepath plugin. See the screenshot below:The input box selected in Firepath with popup highlighted Note: The highlighted area is my popup which is currently hidden, I still haven't clicked the input box!
    2. Next, I search the Firepath to locate the date I wish to pick up. Suppose I wish to pick 1st February as my date as shown below in red circle: Date I want to pick using selenium So I need to locate the element in the date table corresponding to this date which is basically a table element as shown below: Firepath of the date i wish to pick using selenium
    3. Next, I need the x-path of this date element in the table so I can perform a click action using the Selenium IDE. To get the x-path all I do is right click on the element as shown below: click on td of the corresponding date
    4. Now with all this information, I do the following: First I use click command to click on the input box and then use clickAt function to click the table element corresponding to the preferred date. The popup appears on click command on the input box and the popup disappears after the clickAt command on the desired date. The code is as below: The final Selenium IDE window

    Note: This is as per the date picker I chose to replicate your problem, if you wish I can do it on your use case too, but you will have to share the complete html of your page for me to help you!

    I have tried my best to lay it down simply, however if you still can't understand anything and need help, do share the source code of your page or query on a particular point in the comments.

    The jsbin code is as follows:

    $('#example1').calendar();
$('#example2').calendar({
  type: 'date'
});
$('#example3').calendar({
  type: 'time'
});
$('#rangestart').calendar({
  type: 'date',
  endCalendar: $('#rangeend')
});
$('#rangeend').calendar({
  type: 'date',
  startCalendar: $('#rangestart')
});
$('#example4').calendar({
  startMode: 'year'
});
$('#example5').calendar();
$('#example6').calendar({
  ampm: false,
  type: 'time'
});
$('#example7').calendar({
  type: 'month'
});
$('#example8').calendar({
  type: 'year'
});
$('#example9').calendar();
$('#example10').calendar({
  on: 'hover'
});
var today = new Date();
$('#example11').calendar({
  minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5),
  maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5)
});
$('#example12').calendar({
  monthFirst: false
});
$('#example13').calendar({
  monthFirst: false,
  formatter: {
    date: function (date, settings) {
      if (!date) return '';
      var day = date.getDate();
      var month = date.getMonth() + 1;
      var year = date.getFullYear();
      return day + '/' + month + '/' + year;
    }
  }
});
$('#example14').calendar({
  inline: true
});
$('#example15').calendar();
    <!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="ui container">
  <h1>Calendar examples</h1>
  
  <h3>Input</h3>
  <div class="ui calendar" id="example1">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date/Time">
    </div>
  </div>
  <br/>
    
  <h3>Date only</h3>
  <div class="ui calendar" id="example2">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date">
    </div>
  </div>
  <br/>
    
  <h3>Time only</h3>
  <div class="ui calendar" id="example3">
    <div class="ui input left icon">
      <i class="time icon"></i>
      <input type="text" placeholder="Time">
    </div>
  </div>
  <br/>
    
  <h3>Range</h3>
  <div class="ui form">
    <div class="two fields">
      <div class="field">
        <label>Start date</label>
        <div class="ui calendar" id="rangestart">
          <div class="ui input left icon">
            <i class="calendar icon"></i>
            <input type="text" placeholder="Start">
          </div>
        </div>
      </div>
      <div class="field">
        <label>End date</label>
        <div class="ui calendar" id="rangeend">
          <div class="ui input left icon">
            <i class="calendar icon"></i>
            <input type="text" placeholder="End">
          </div>
        </div>
      </div>
    </div>
  </div>
  <br/>
  
  <h3>Year first</h3>
  <div class="ui calendar" id="example4">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date/Time">
    </div>
  </div>
  <br/>
    
  <h3>Initial value</h3>
  <div class="ui calendar" id="example5">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date" value="5/30/2015 3pm">
    </div>
  </div>
  <br/>
    
  <h3>24-hour</h3>
  <div class="ui calendar" id="example6">
    <div class="ui input left icon">
      <i class="time icon"></i>
      <input type="text" placeholder="Time">
    </div>
  </div>
  <br/>
    
  <h3>Month and year</h3>
  <div class="ui calendar" id="example7">
    <div class="ui input left icon">
      <i class="time icon"></i>
      <input type="text" placeholder="Time">
    </div>
  </div>
  <br/>
    
  <h3>Year only</h3>
  <div class="ui calendar" id="example8">
    <div class="ui input left icon">
      <i class="time icon"></i>
      <input type="text" placeholder="Time">
    </div>
  </div>
  <br/>
  
  <h3>Button</h3>
  <div class="ui calendar" id="example9">
    <div class="ui button">Select date</div>
  </div>
  <br/>
  
  <h3>Hover</h3>
  <div class="ui calendar" id="example10">
    <div class="ui button">Hover me</div>
  </div>
  <br/>
  
  <h3>Min/Max date</h3>
  <div class="ui calendar" id="example11">
    <div class="ui input">
      <input type="text" placeholder="Date">
    </div>
  </div>
  <br/>
  
  <h3>Day first</h3>
  <div class="ui calendar" id="example12">
    <div class="ui input">
      <input type="text" placeholder="Date">
    </div>
  </div>
  <br/>
  
  <h3>Custom format</h3>
  <div class="ui calendar" id="example13">
    <div class="ui input">
      <input type="text" placeholder="Date">
    </div>
  </div>
  <br/>
  
  <h3>Inline</h3>
  <div class="ui calendar" id="example14">
  </div>
  <br/>
  
  <h3>Implicit inline (no popup activator)</h3>
  <div class="ui calendar" id="example15">
  </div>
  <br/>
    
  </div>
</body>
</html>