设置一个带有 JQuery 掩码的文本字段

发布于 2024-11-13 10:16:28 字数 1052 浏览 4 评论 0原文

使用 watir-webdriver,我尝试设置文本字段的值。

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

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

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

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

关于如何设置文本字段有什么想法吗?

编辑:

更多 Javascript: HTML:

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

该字段的

<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>

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"> </div>
  <div class="tip_validating">

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

  </div>
</div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

勿忘心安 2024-11-20 10:16:28

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

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

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

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

“焦点”尤其引起了我的注意,并且在那里看到它field 让我认为您可能需要首先针对同一元素触发一个事件(例如 onfocus 事件)才能激活该字段,然后尝试设置该值。

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

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

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.

2024-11-20 10:16:28

问题与关注文本字段有关。即使使用 .click() ,如果输入字段(请参阅 问题 2377)。按 HOME 键将光标移至开头并允许您在输入字段中键入内容,并且仍然具有屏蔽功能。

在爪哇中:

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

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);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文