设置一个带有 JQuery 掩码的文本字段 [英] Setting a text field that has a JQuery mask on it

问题描述

使用 watir-webdriver，我正在尝试设置文本字段的值.

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

当我运行该命令时，我可以看到 watir 找到了该字段，因为光标设置在该字段上，但是没有输入文本.我也尝试过 send_keys 和 append 命令，但似乎没有任何效果.这些方法不会抛出异常.

我发现这个字段和页面上的其他字段(一切正常)之间的唯一区别是它有这个 JQuery 掩码.

$(selector).mask("[phone]");

关于如何设置文本字段的任何想法?

更多的 Javascript:

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

字段的 HTML:

<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 class="tip_error">

解决方案

我在您提供的 HTML 中没有看到任何与您帖子顶部的 ruby​​ 代码中寻址的文本输入字段相匹配的元素.例如没有任何 ID 为电话"的内容

根据您问题中的 HTML，我希望以下内容能够正常工作

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

查看您在评论中链接的示例页面，当我使用谷歌浏览器和 ID 为电话"的输入字段上的检查元素"功能时，我看到有许多事件侦听器与字段(模糊、焦点、输入、按键、按键、取消屏蔽)

'focus' 尤其引起了我的注意，在那个领域看到它让我觉得你可能需要首先针对相同的元素触发一个事件，例如 onfocus 事件，以便激活字段，然后尝试设置值.

您会注意到，当您手动操作时，该字段一开始是空白的，但是一旦获得焦点，它就会向用户显示输入掩码的格式，这很可能需要首先发生，在它看到任何类型的输入之前.

在这种情况下，根据提问者的反馈，答案是他们需要首先针对文本字段触发 'unmask' 事件，然后 .set 他们想要的值，以便自动化测试时正常工作的事情.这并没有行使字段屏蔽功能，但是我再次怀疑这个实例中的测试任务是广泛测试第 3 方(JQuery)插件，他们更关心后端的业务逻辑等，因此很简单能够在没有屏蔽代码妨碍的情况下设置值是所需要的.

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("[phone]");

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("[phone]");
}

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>

解决方案

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.

这篇关于设置一个带有 JQuery 掩码的文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！