CODEWITHSUNDEEP
javascriptruby-on-railsrubywatirwatir-webdriver
user2778359
user2778359

Reputation: 1

Using Watir to click on Radio Buttons with variable values

I'm getting in trouble while trying to click on Radio Button.

The HTML code is:

function radioButtonFormatter(el, oRecord, oColumn, oData) {
var checkFalse='checkFalse';
var check='check'     ;


el.innerHTML="<input type='radio' name='table-radiobutton' value='" + oData + "' onclick='disableButtons(this.checked, this.type)' />";        
}

I'd like to use something like:

browser.radio(:value => "oData").click

But it's not working...I also tried to use a piece of text as reference, but it didn't work as well.

Do you guys have any suggestion on how to perform it? Thanks a lot!

Upvotes: 0

Views: 1441

Answers (2)

7stud
7stud

Reputation: 48649

But it's not working

Yes. When a page defines a js function like this:

function radioButtonFormatter(el, oRecord, oColumn, oData) {
var checkFalse='checkFalse';
var check='check'     ;


el.innerHTML="<input type='radio' name='table-radiobutton' value='" + oData + "' onclick='disableButtons(this.checked, this.type)' />";        
}

...it does not cause the function to execute. If you executed this ruby program:

def greet
  puts 'hello'
end

...would you wonder why there was no output? Similarly, the radio button doesn't exist until you execute the js function.

Next, this:

browser.radio(:value => "oData").click

looks for a radio button with the attribute:

<radio value="oData" ...>

What you want is:

browser.radio(:value => oData).click

However, that means you have to create a variable called oData, and assign it a value:

oData = "something here"
browser.radio(:value => oData).click

Writing the variable name oData in a ruby program does not magically make it have the same value as a variable called oData in a javascript program.

Here are some things you can do:

3.htm:

<!DOCTYPE html>
<html>
<head>
<title>index.html</title>

<script type="text/javascript">

function disableButtons(x, y) {
  document.getElementById("disable-info").innerHTML = x + " " + y;
}

function radioButtonFormatter(el, oData) {
  var checkFalse='checkFalse';
  var check='check'     ;


  el.innerHTML="<input type='radio' name='table-radiobutton' value='" + oData + "' onclick='disableButtons(this.checked, this.type)' />";        
}

</script>

</head>
<body>
  <div>Hello world</div> 
  <div id="div1"></div>
  <div id="disable-info"</div>
</body>
</html>

. 

require 'watir-webdriver'

b = Watir::Browser.new :firefox

b.goto "http://localhost:8080/3.htm"

b.execute_script(
  "radioButtonFormatter(
    document.getElementById('div1'), 42
  )"
)

b.radio(:value => "42").click

Or, if the radioButtonFormatter() function is triggered by some event, you can fire that event with watir-webdriver:

<!DOCTYPE html>
<html>
<head>
<title>index.html</title>

<script type="text/javascript">

function disableButtons(x, y) {
  document.getElementById("disable-info").innerHTML = x + " " + y;
}

function radioButtonFormatter(el, oData) {
  var checkFalse='checkFalse';
  var check='check'     ;


  el.innerHTML="<input type='radio' name='table-radiobutton' value='" + oData + "' onclick='disableButtons(this.checked, this.type)' />";        
}

window.onload = function() {
  document.getElementById('greeting').onclick = function() {
    radioButtonFormatter(document.getElementById('div1'), 42);
  }
}

</script>

</head>
<body>
  <div id="greeting">Hello world</div> 
  <div id="div1"></div>
  <div id="disable-info"</div>

</body>
</html>

. 

require 'watir-webdriver'

b = Watir::Browser.new :firefox

b.goto "http://localhost:8080/3.htm"

b.div(id: "greeting").when_present.click  #This causes radioButtonFormatter() to execute
b.radio(value: "42").when_present.click

But that does not let you control the value of oData. You would have to look at the js to figure out what value of oData gets set, and then use that value in your ruby script.

Upvotes: 3

Minh Nguyen
Minh Nguyen

Reputation: 2039

Try this:

el.innerHTML="<input id='rad' type='radio' name='table-radiobutton' value='val' />radio";   
var rad = document.getElementById("rad");
rad.onclick=function(){
  alert('clicked');  
};

Demo: http://jsfiddle.net/TZTGT/

Upvotes: 0

Related Questions