title: How to: Select Radio Option Button in iFrame Using CasperJS?
body: <p>I am new to JavaScript, new to CasperJS, etc. However, I have watched a couple of YouTube videos and worked through some examples using CasperJS. From this vantage I thought I had a fairly good grasp of the basics and was ready for my first project, which I am currently now stuck on. <em>How to click a radio option button?</em></p>
  <p>I do not know if it is something unique to the site I am working with or some additional holes in my understanding, but nothing I try seems to work. I would greatly appreciate any input; I have been stumbling in the dark for far to long...</p>
  <p>Since I am new to this, I will give details in case there are some things I have done wrong, or should consider doing etc. Thanks!</p>
  <h1>The Problem</h1>
  <p>When I open the site URL: <a href="http://www.ddbst.com/unifacga.html" rel="nofollow noreferrer">http://www.ddbst.com/unifacga.html</a> I am greeted by four options:
  <a href="https://i.stack.imgur.com/bw0Sv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bw0Sv.png" alt="enter image description here" /></a>
  So I right-click on the control and use DevTools to get information on the elements:</p>
  <pre><code>&lt;input name=&quot;selection&quot; value=&quot;Upload&quot; id=&quot;ID1&quot; type=&quot;radio&quot; onclick=&quot;this.form.submit()&quot;&gt;
  &lt;input name=&quot;selection&quot; value=&quot;MolinspirationJME&quot; id=&quot;ID2&quot; type=&quot;radio&quot; onclick=&quot;this.form.submit()&quot;&gt;
  &lt;input name=&quot;selection&quot; value=&quot;Insert&quot; id=&quot;ID3&quot; type=&quot;radio&quot; onclick=&quot;this.form.submit()&quot;&gt;
  enter code here
  &lt;input name=&quot;selection&quot; value=&quot;DDBSearch&quot; id=&quot;ID4&quot; type=&quot;radio&quot; checked=&quot;checked&quot; onclick=&quot;this.form.submit()&quot;&gt;
  </code></pre>
  <p>Here I am interested in <strong>DDBSearch</strong> (option no. 4). I have yet to do an example with radio buttons, and I originally thought that I could just do somehting like e.g. value=true, but then I see that value is actually a text string, so I click on the button to see what its active state looks like:</p>
  <pre><code>&lt;input name=&quot;selection&quot; value=&quot;DDBSearch&quot; id=&quot;ID4&quot; type=&quot;radio&quot; checked=&quot;checked&quot; onclick=&quot;this.form.submit()&quot;&gt;
  </code></pre>
  <p>So I know that I need to somehow activate the property <em>checked</em>, but I have been unable to do so by XPath, ID, Name, etc. Not knowing what the problem was I tried to report more error information using other examples from the web.</p>
  <h1>Casper Constructor Options</h1>
  <p>I setup my casper object as follows:</p>
  <pre><code>var casper = require(&quot;casper&quot;).create({
      logLevel:&quot;debug&quot;,
      verbose:true,               // log messages will be printed out to the console
      pageSettings:{              // the WebPage instance used by Casper will use these settings.
          loadImages: false,      
          loadPlugins: false,
          webSecurityEnabled: false
      },
          onDie: function(){
              console.log(&quot;Script complete.&quot;);
          },
          // Display message every time any page successfully initializes:
          onPageInitialized: function(){
              console.log(&quot;\rPage initialized.\r&quot;);
          },
      waitTimeout: 10000,
      stepTimeout: 10000,
          onWaitTimeout: function(){ // invoked when you are waiting for an element to be visible, e.g. after clicking a button, and waitTimeout has been exceeded.
              this.echo(&quot;** Wait-TimeOut **&quot;);
          },
          onStepTimeout: function(){ // NOT REALLY SURE WHAT THIS IS USED FOR ???
              this.echo(&quot;** Step-TimeOut **&quot;);
          }
  });
  </code></pre>
  <p>Trying to catch additional error information by using code like e.g.</p>
  <pre><code>casper.on('remote.message', log);
  casper.on('error', logError);
  casper.on('complete.error', logError);
  casper.on('page.error', logError);
  </code></pre>
  <p>Requiring additional functions:</p>
  <pre><code>function log(msg){
      console.log(&quot;\r&quot;);
      console.log('Remote msg&gt;: ', msg);
      console.log(&quot;----------------------------------------------------&quot;,&quot;\r&quot;);
  }
  
  function logError(msg,traceback){
      console.log(&quot;\r&quot;);
      console.log(msg);
      console.log(traceback);
      console.log(&quot;----------------------------------------------------&quot;,&quot;\r&quot;);
  }
  </code></pre>
  <p>Not really sure where I got this from, or how it really works, but it looked like it should report additional error information, so I went for broke.</p>
  <h1>Verify Page Structure</h1>
  <p>I read somewhere that you should verify the structure of the page first, so I based it on the form <em>opeform</em>, which the radio options are contained within. At this point I also noticed that the additional input fields that I am really tring to get to (after option no. 4 is selected) are just hidden on the page--<em>not sure if this is important or not?</em></p>
  <p>Seems to me that it would be easier to work with the hidden elements of the form; thereby, bypassing the radio option issue that I am currently having? (Just a thought burning in the background for now..)</p>
  <pre><code>&lt;form name=&quot;opeform&quot; method=&quot;post&quot; action=&quot;http://ddbonline.ddbst.com/OnlinePropertyEstimation/OnlineUNIFACGroupAssignmentSA.exe&quot;&gt;
  &lt;hr&gt;
  &lt;table border=&quot;0&quot; style=&quot;white-space: nowrap; font-size:10pt;width: 560px; text-align: left;&quot; cellpadding=&quot;2&quot; cellspacing=&quot;2&quot;&gt;
  &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;
  &lt;h3&gt;Input Method&lt;/h3&gt;&lt;input name=&quot;selection&quot; value=&quot;Upload&quot; id=&quot;ID1&quot; type=&quot;radio&quot; onclick=&quot;this.form.submit()&quot;&gt;&lt;b&gt;Upload&lt;/b&gt; a Mol- or CTC-file directly from your hard drive&lt;br&gt;
  &lt;input name=&quot;selection&quot; value=&quot;MolinspirationJME&quot; id=&quot;ID2&quot; type=&quot;radio&quot; onclick=&quot;this.form.submit()&quot;&gt;&lt;b&gt;Molinspiration JME&lt;/b&gt; allows to draw and edit molecules (Java required)&lt;br&gt;
  &lt;input name=&quot;selection&quot; value=&quot;Insert&quot; id=&quot;ID3&quot; type=&quot;radio&quot; onclick=&quot;this.form.submit()&quot;&gt;&lt;b&gt;Insert&lt;/b&gt; the content of a Molfile in a textfield&lt;br&gt;
  &lt;input name=&quot;selection&quot; value=&quot;DDBSearch&quot; id=&quot;ID4&quot; type=&quot;radio&quot; onclick=&quot;this.form.submit()&quot;&gt;&lt;b&gt;DDB Search&lt;/b&gt; (retrieves a structure from the chemical structure database ChemDB)&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;input type=&quot;hidden&quot; id=&quot;ID9&quot; name=&quot;molstruct&quot; value=&quot;&quot;&gt;
  &lt;/form&gt;
  </code></pre>
  <p>So I use the CasperJS assert system to make sure that the form <em>opeform</em>is in place before continuing:</p>
  <pre><code>var selector = &quot;#unifacga&quot;;
  casper.then(function(){
      console.log(&quot;\r&gt;&gt;&gt; Check if the element exists.&quot;);
      console.log(&quot;&gt;&gt;&gt; If the element does not exist, the test (i.e. our script) will fail, otherwise it will simply continue.\r&quot;);
      this.waitForSelector(selector,
          function pass () {
              this.capture(&quot;open.png&quot;);
              console.log(&quot;\r&quot;,&quot;&gt;&gt;&gt; Element found&quot;);
              console.log(&quot;1: &quot;,this.evaluate(function(sel){return !!document.querySelector(sel)},selector));
              console.log(&quot;2: &quot;,this.evaluate(function(sel){return document.querySelector(sel).textContent;},selector));
              console.log(&quot;&gt;&gt;&gt; Continue.&quot;,&quot;\r&quot;);
          },
          function fail () {
              this.capture(&quot;fail.png&quot;);
              this.die(&quot;&gt;&gt;&gt; Did not load element... something is wrong T_T&quot;,&quot;\r&quot;);
          }
      );
  });
  </code></pre>
  <p>Up to this point everything is roses an sunshine...</p>
  <h1>Try No.1 - Radio Option Select by XPATH</h1>
  <p>I first tried using XPath, because this is what a lot of examples use for clicking buttons:</p>
  <pre><code>var x = require(&quot;casper&quot;).selectXPath;
  // //*[@id=&quot;ID4&quot;] is the XPath statement.
  // input type that has the attribute id as radio.
  casper.thenClick(x('//*[@id=&quot;ID4&quot;]'));
  casper.wait(5000).then(function(){
      casper.capture(&quot;option_sel4.png&quot;);
  });
  casper.run();
  </code></pre>
  <p>For which I get an error like:
  <a href="https://i.stack.imgur.com/zDfup.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zDfup.png" alt="enter image description here" /></a>
  It says nonexistant selector, but the syntax looks right (as far as I can tell), and the ID is most definately &quot;ID4&quot; (as shown above from DevTools).</p>
  <h1>Try No.2 - Radio Option Select by ID (and Name)</h1>
  <p>So I next tried to work with the object by ID (and name):</p>
  <pre><code>casper.evaluate(function(){
      document.getElementById(&quot;ID4&quot;).checked=true;
  });
  casper.run();
  </code></pre>
  <p>Now I get a different error:
  <a href="https://i.stack.imgur.com/xZt7Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xZt7Z.png" alt="enter image description here" /></a>
  So now I get a type error. Looks like the getElementByID method as I have used it may not return the object or something? Any other variation like e.g. getElementByName results in similar errors...</p>
  <h1>Try No.3 - Casper.Click</h1>
  <p>I also tried CasperJS.click:</p>
  <pre><code>casper.then(function() {
    this.click('input[id=&quot;ID4&quot;][checked=&quot;checked&quot;]');
  });
  casper.run();
  </code></pre>
  <p>Which results in another error like XPath:
  <a href="https://i.stack.imgur.com/WP2vK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WP2vK.png" alt="enter image description here" /></a></p>
  <h1>In Conclusion</h1>
  <p>I am not sure how to resolve the issue. Seems like everything I try to select radio option 4 results in some type of error; however, I do not know enough about JavaScript and CasperJS to troubleshoot any furhter than I already have. Other solutions that I have tried from online, so far, have not worked for me. Any help would be greately appretiated.</p>