How to: Select Radio Option Button in iFrame Using CasperJS?
<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>