Setting a text field that has a JQuery mask on it

Question

Using watir-webdriver, I am trying to set the value for a text field.

browser.text_field(:id, "phoneNumbers_value_input").set("5555551234")

When I run that command, I can see that watir found the field because the cursor is set on that field however no text is entered. I have also tried the send_keys and append commands but nothing seemed to work. No exception is thrown from these methods.

The only difference I could find between this field and the other fields on the page(which all work fine) is that it has this JQuery mask on it.

$(selector).mask("(999) 999-9999");

Any ideas on how to set the text field?

Edit:

Some more of the Javascript:

selector = '#' + id(field.id) + '_input';
if (field.format == 'phone') {
  $(selector).mask("(999) 999-9999");
}

HTML of the field:

<div id="phoneNumbers_value_form_item" class="form_item validated no_focus">
  <label for="phoneNumbers_value" class="form_label">phone</label>
  <input type="text" value="" name="phoneNumbers[][value]" id="phoneNumbers_value_input" class="text">
  <div class="tip">&nbsp;</div>
  <div class="tip_validating">

  </div>
  <div class="tip_error">

  </div>
</div>

Please provide relevant HTML or a link to the page (or similar one). — Željko Filipin, Jun 03 '11 at 07:33
@Željko http://digitalbush.com/projects/masked-input-plugin/#demo (though this is not my site) — juan2raid, Jun 03 '11 at 16:19
@juan2raid, I believe @Z is asking for the `` to your page, not the plug-in site :) p.s. I use this plug-in on a lot of projects... — pixelbobby, Jun 03 '11 at 16:44
@pixelbobby The site I provided has a demo of the fields. The phone number field on the site is exactly the same as my site. — juan2raid, Jun 03 '11 at 16:49
@juan2raid, yes but we have no idea what `selector` is in this case. We need to see more of _your_ code, buddy. — pixelbobby, Jun 03 '11 at 16:51
@pixelbobby I updated the question with the HTML of the field, friend. — juan2raid, Jun 03 '11 at 17:21
On the linked demo page, calling "b.text_field(:id => "phone").set("5555555555")" works fine for me. — jarib, Jun 04 '11 at 22:53
@jarib I tried it in IRB and the command worked fine but outside of IRB it still fails. — juan2raid, Jun 05 '11 at 17:06
When something works in IRB but not scripted, it is often a sign of a timing issue, the script might just need to pause a moment to let the client side code execute — Chuck van der Linden, Oct 07 '11 at 07:02

score 1 · Answer 1 · answered Jul 09 '13 at 09:42

The problem has to do with focusing on the text field. Even with a .click() somehow webdriver ends up with the cursor at the end if the input field (see issue 2377). Pressing the HOME key moves the cursor to the beginning and allows you to type in the input field, and still have the mask functionality.

In Java:

WebElement txtPhone = getDriver().findElement(By.id("phoneNumbers_value_input"));
txtPhone.sendKeys(org.openqa.selenium.Keys.HOME);
txtPhone.sendKeys(phoneNumber);

Chuck van der Linden · Accepted Answer · 2011-06-06T23:53:01.993

I don't see any element in the HTML you provided that would match the text input field being addressed in the ruby code at the top of your posting. e.g. there is nothing there with an ID of 'phone'

Based on the HTML in your question, I would expect the following to work

browser.text_field(:id, "phoneNumbers_value_input").set("5555551234")

Looking at the sample page you linked in the comments, when I use google chrome and the "Inspect Element" function on the input field with the ID of 'phone' I see that there are a number of event listeners associated with the field (blur, focus, input, keydown, keypress, unmask)

The 'focus' one gets my attention in particular, and seeing it there on that field makes me think that you might then need to first fire an event against the same element, such as the onfocus event, in order to activate the field, then try to set the value.

You'll notice that when you manipulate things manually, the field starts out blank, but as soon as it gets focus it displays the format for the input mask to the user, it may well be that this needs to happen first, before it see's any kind of input.

EDIT: In this case, based on feedback from the questioner, the answer turned out to be that they needed to first fire the 'unmask' event against the text field, and THEN .set the value they wanted, in order for things to work correctly when automating the testing. This doesn't exercise the field masking functionality, but then again I doubt the test mandate in this instance is to extensively test a 3rd party (JQuery) addin, and they are more concerned with the business logic etc in the back end, thus simply being able to set the value without the masking code getting in the way is what is needed.

I simplified the first line's variable names for clarity. After I made the edit that included the HTML, I forgot to change the id value to match the HTML. My code contains the correct id value. — juan2raid, Jun 03 '11 at 21:59
+1 This answer led me to the correct solution. Firing the "onfocus" event had no effect but the "unmask" made it work. The mask won't show however the field's value will be set. browser.text_field(:id, "phoneNumbers_value_input").fire_event("unmask") — juan2raid, Jun 03 '11 at 22:06
So did you have to fire unmask first, and then set the value, or set the value and then fire the unmask? — Chuck van der Linden, Jun 06 '11 at 06:28
Cool. OK I've edited the 'answer' to reflect that. If you can throw a checkmark on it (accept the answer) then the question will show up as answered and other folks with the same issue will be more rapidly guided to a working solution to the problem. — Chuck van der Linden, Jun 06 '11 at 23:55

Setting a text field that has a JQuery mask on it

2 Answers2

Linked