使用结果文本选择测试输入字段中的单击

Posted 2023-03-16

【中文标题】使用结果文本选择测试输入字段中的单击

【英文标题】：Testing click in input field with resulting text selection

【发布时间】：2015-09-23 20:09:29

【问题描述】：

我为输入字段实现了以下行为：如果用户单击该字段，它将把整个输入值设置为选择；

$('.my_div input').on('click', function(event)
    this.setSelectionRange(0, this.value.length);
  
);

现在我不太确定如何测试这种行为。粗略的想法是触发 单击 ，然后检查字段的选择。但不幸的是，我不知道如何选择当前的输入选择。

欢迎任何有关描述行为的测试方法的提示！

【问题讨论】：

当您说测试时，您的意思是如何检查整个文本是否被选中或究竟是什么？

是的，我的验收测试应该涵盖预期的结果，所以我想测试如果用户点击了该字段，则输入字段中的整个文本都被选中

$(this).val() 将为您提供输入的当前值。

也许你使用了错误的工具集和错误的层来测试这个？茶匙怎么样？那是我的 2 美分

【参考方案1】：

使用 capybara，您可以使用 page.evaluate_script 执行一些 javascript 并返回结果。像

page.evaluate_script("[$('.my_div input')[0].startSelection,$('.my_div input')[0].endSelection]")

应该返回一个数组，其中包含您可以验证的开始和结束选择位置。

【参考方案2】：

在刚刚抓住选择的开始和结束之后，如果开始在 0 并且结束在输入长度，那么所有东西都被选中。

$('.my_div input').on('click', function(event)
    this.setSelectionRange(0, this.value.length);

    var start = event.target.selectionStart;
    var end = event.target.selectionEnd;
    if(start==0 && end==$(this).val().length)
        console.log('everything is selected');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='my_div'>
  <input type='text'>
  </div>
<input type='text'>

【讨论】：

感谢您的 sniplet，但我需要一个可以集成到我的验收测试套件中的解决方案，该套件从行为角度检查这一点（在无头浏览器中模拟用户），所以实际脚本添加了这个功能应该保持不变

您可以将这 4 行移到 $('input').on('select',function(event)//move those lines here);