Dealing with dynamic dropdowns with CasperJS

In my experiment with CasperJS to extract the data from an aspx page, I faced some issues with dynamic drop-down. What happened is that there can be 2-3 dropdowns box that depend on each other e.g. User selects a category in dropdown1 , an AJAX request is triggered to create and populate sub-categories in dropdown2.

My first reaction to this problem is to use Chrome Network Tool to capture the POST request when the form is submitted to find out all the parameters. Then, I attempt to simulate this by filling the form with all the parameters:

  1.  this.fill('form[action="somewebsite.aspx"]', 
  2.              { 
  3.                          ddlFromPlace: '4',
  4.                  selectFSP: '0',
  5.                  selectTP: '12',
  6.                  selectTSP: '0' ,
  7.                  rad2Way: '2 Ways',
  8.                  ddlDepartureDay: '26',
  9.                  ddlDepartureYearMonth: '9#2012' ,
  10.                  AMPM_field: 'Any',
  11.                  ddlReturnDay: '27',
  12.                  ddlReturnYearMonth: '9#2012',
  13.                  AMPM_field_return: 'Any',
  14.                  ddlCoachCompanies: '0',
  15.                  nopax_field: '1'            
  16.              }, true);

Unfortunately, this does not work initially as there is an onchange javascript in each of the dropdown:

  1.  <select name="ddlFromPlace" id="ddlFromPlace" class="wide" onchange="calldropdown2Script()">
  2.      .......
  3.  </select>

The fill function actually attempts to change the values for all of the dropdowns which trigger various AJAX requests which inteferes with each other.

To resolve this, I need to simulate the actually clicking of each of the dropdown with waitForSelector:

  1.  casper.start(url, function() {
  2.   
  3.      // select the first drop down (from location)
  4.   
  5.      this.fill('form[action="somewebsite.aspx"]', 
  6.      { 
  7.          ddlFromPlace: '4' 
  8.      }, false); // false mean that just click on this dropdown without submitting
  9.  });
  10.   
  11.  casper.waitForSelector('select#selectTP', function() {
  12.      console.log("SelectTP loaded");
  13.   
  14.      // fill the next dropdown
  15.      this.fill('form[action="somewebsite.aspx"]', 
  16.      { 
  17.          selectTP: '12' 
  18.      }, false);
  19.  });
  20.   
  21.  // fill in the next dropdowns
  22.  // ......
  23.   
  24.  // finally submit the form
  25.  casper.then(function() {
  26.   
  27.      this.evaluate(function() {
  28.          document.querySelector('form[action="somewebsite.aspx"] input[type="submit"]').click();
  29.      });
  30.   
  31.  });

Problem Solved ! :)

comments powered by Disqus