Testing a click in an input field followed by text selection

Question

I implemented the following behavior for the input field: if the user clicks on the field, he will set all the input value as a choice;

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

Now I'm not quite sure how to test this behavior. The rough idea is to invoke a click, and then check the field selection. But, unfortunately, I have no idea how to select the current input selection.

Any advice regarding a testing approach for the described behavior is appreciated!

Answer 1

Right after you just pick up the beginning and end of the selection, and if the beginning is at 0 and the end is at the input length, then everything will be selected.

$('.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'>

Run code

Answer 2

capybara page.evaluate_script javascript . -

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

, .