Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Handling a javascript popup occurring on a keyup event

I have a text-field on a HTML page which checks whether you have entered a value between 1 to 365. If the user enters an invalid value like a non-numeric character or a value which does not fall inside the range, it shows a popup. I saw on the watir wiki that there is a select_no_wait method which is used to dismiss popups when you select an invalid value from the list.

What is a good way to handle a popup occurring on a keyup event? Do i need to proceed along the lines the way select_no_wait method is implemented or can we launch a different process which will dismiss the popups which might occur when the set method is called.

A sample example of the HTML file with a validate function in Javascript would be:

<html>
<head>
<script type="text/javascript">
var num = 0
function validate(e)
{
 var charPressed = String.fromCharCode(e.keyCode);
if(charPressed >= '0' && charPressed<= '9')
{
  num = parseInt(document.getElementById('foo').value);
   if ((document.getElementById('foo').value).length <= 3 && (num > 365 || num==0))
    alert ("Values can only be from to 1 to 365");
    }
  else
  {
  alert("Invalid character entered");
  document.getElementById('foo').value = "";
  }
}
</script>
</head>
<body>
<label id="code"> Sample </label>
<input type="text" id ="foo" onkeyup="validate(event)" maxLength="3"/>
</body>
</html>

I would really appreciate any pointers on this issue. Thanks in advance.

like image 479
chaitanya Avatar asked Nov 17 '11 08:11

chaitanya


1 Answers

For Watir:

There are some actions that currently wait for a pageload, such as .click, .select, because after such actions the page is often updated via a postback or form post. The _no_wait variant exists for those , as a way to tell the script to proceed without waiting for the page load to occur when a popup will be occurring.

Currently .set has no wait for page load logic (as far as I know anyway) and thus no _no_wait variant of the method. So you can probably just proceed straight from setting the value, to looking for the popup.

Note that if you don't see the popup after using .set, you may need to fire the 'onkeyup' event to trigger your client side scripting. Also be sure it's really a JS popup, there's lots of other ways of doing stuff that looks like the JS popups, but are really just things like divs etc.

Since this is a Javascript Popup, you should be able to get rid of it via code similar to the examples in the Watir Wiki

browser.javascript_dialog.button('OK').click


For Watir-Webdriver:

If you are using Watir-Webdriver then things are a bit different. I'm going into a bit more detail here because this info is not as easily available (yet)

Webdriver has an Alerts API, and Watir-Webdriver has an alerts helper which makes use of that, with a few different methods in it to deal with various styles of javascript popups. The methods are described in the RDoc for watir-webdriver look for 'alerthelper' under the main watir class. These are the examples given there.

require "watir-webdriver/extensions/alerts"   #add to require section at top of script)

browser.alert do
  browser.button(:value => "Alert").click
end #=> "the alert message"

browser.confirm(true) do
  browser.button(:value => "Confirm").click
end #=> "the confirm message"

browser.prompt("hello") do
  browser.button(:value => "Prompt").click
end #=> { :message => "foo", :default_value => "bar" }

Note that these examples are taken pretty much straight from the rspec tests for the alerthelper code. As such they may not make perfect sense to you without knowing this particular little detail. The click method inside the loop is the action that makes the alert appear. The test webpage has three buttons, with values Alert, Confirm, Prompt, which cause the popups to appear as the tests run against that page.

To use this stuff in your code, replace that middle line with whatever action in your script is causing the popup. For example in one of my scripts I click a button to delete the user's credit card, and there is a confirm dialog that pops up. So my code ends up looking like this (note this code is designed to work for both watir and watir-webdriver, $webdriver gets set to true or false depending on which is being used.

if $webdriver #watir-webdriver
  $browser.confirm(true) do
    $browser.div(:id => 'credit_cards').link(:text =>'Delete').click
  end 
else #watir
  $browser.div(:id => 'credit_cards').link(:text =>'Delete').click_no_wait
  $browser.javascript_dialog.button('OK').click
end

BTW the comment after 'end' in each of those examples? That's what you get back if you assign the output from the loop to a variable

confirm_message = browser.confirm(true) do
  browser.link(:text => "Add Lasers").click
end 

puts confirm_message
> "do you really want to put lasers on sharks?"
like image 104
Chuck van der Linden Avatar answered Sep 28 '22 00:09

Chuck van der Linden