Geb - Selenium Input focus with datepicker - grails

Since upgrading to Geb 0.12.2 and Selenium 2.48.2, I cant get the following to work:
$("form").validOn(dateString)
I have tried variations like:
$("input",name:"validOn").value(dateString)
and
$("form").validOn << Keys.chord(Keys.CONTROL, "a")
$("form").validOn << Keys.chord(Keys.DELETE)
if(date){
$("form").validOn << date
}
The element I am trying to set is using a jquery datepicker:
<form class="form-inline">
<label>Valid On:</label>
<input size="10" type="text" id="datepicker-validOn" name="validOn" value="${validOn}">
...
</form>
..
..
<r:script type="text/javascript">
$("#datepicker-validOn").datepicker({
format:"${session.sessionPreferences?.globalDatepickerFormat}"
});
...
The datepicker is opened which means that selecting the field works, but the string value is not placed inside the input field. I suspect that this has to do with the focus moving to the datepicker, but have not found a way to fix it. I tried having two .value(dateString) hoping that the second will return focus to the field but this has not worked. Also, the original html is not altered by the datepicker.
I am using firefox 33.1.1
This only happens on headless environment, using Hudson with Xvfb to run the functional tests. Running locally on desktop with same version of firefox works as expected, using this format : $("input",name:"validOn").value(dateString)
Any suggestions?

Changing the resolution for Xvfb from 1024x1024x24 to 1600x1200x24 has fixed the issue.. Not sure how this could affect the element focusing, but apparently it does.

Related

How to use Select2 with Inputmask

I am trying to create a Select2 box with InputMask to insert IP addresses and add them as tags.
If I use any of the libraries on its own, it works like a charm but both together results in strange behavior.
When I type in numbers, the mask is not filled but rather it seems to expand.
I changed the type of the select2 <input class=“select2-search__field“> from search to text. The Inputmask library makes this necessary, but it should not cause errors because the types are functionally identical.
I created a Fiddle to show the behavior: Fiddle
HTML:
<select multiple id="sel1" style="width:100%"></select>
JS:
$("#sel1")
.select2({
tags: true
})
.on("select2:open", function () {
$(".select2-search__field")
.attr("type","text")
.inputmask({alias: "ip", greedy: false});
})
In my local example I changed the library to support search and the behavior is the same.
Am I missing something?
There is a bad news for you if you MUST use version 4.0.5.
Fixed in jsfiddle by downgrading select2 to version 4.0.2
The main thing is version <= 4.0.2
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.js
Tried 4.0.3 onwards up to 4.0.6-rc.1 but no luck.
Opened up issue select2#5216 with select2.
I did a slight change but that has nothing to do with the problem itself.
$('.select2-search__field').attr('type', 'text');
$('.select2-search__field').attr('style', 'width: 10em;');
$('.select2-search__field')
.inputmask({
alias: 'ip'
});

MVC Datalist is not working on prod server but works on Dev

I have an application that uses a datalist that works in the Dev environment but returns a blank field with no lookup in the Production environment. I want to use datalist extensively as it easily provides an auto complete facility but cannot until it works in Production.
Dev is MVC VS 2010 on IE 11.0 under Win7 and it scores 302 in the HTML5Test.
Production is IE 11.0 on Server 2012 R2 Standard reported as Win8.1 and scores 312 in the HTML5Test.
After much comparing, checking, trying, inspecting and reviewing I have found the source of the issue that stops datalist working.
MVC View Code in Index.cshtml
This is the eventual experimental code trying to isolate the issue:
#model IEnumerable<CRM_MVC.Models.BranchDiary>
#{
Layout = null;
}
<body>
<div>
<lable>Enter TV Series Name </label>
<input type="text" id="tv" name="series" list="tvseries" autofocus>
<datalist id="tvseries">
<option value="Heroes">
<option value="Lost">
<option value="Fringe">
<option value="CriminalMinds">
<option value="CSIMiami">
</datalist>
<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</div>
</body>
Internet Explorer session showing Index.cshtml
The field should provide an autocomplete dropdown but doesn’t.
The Inspect screen shows that <datalist id=tv> is wrongly terminated by /datalist on the same line and after the option list /datalist wrongly has //datalist appearing after it.
When right click Edit HTML is selected for the Div, the original HTML correctly has the first datalist tag with no /datalist and the option list is correctly terminated at the end by the /datalist tag.
What can be done to stop the extras being added to so that it might work the same on Production as on Dev?
What resolved this was unchecking Display intranet sites in Compatibility View in IE Tools-> Compatibility View Settings.
Thanks to Mr Lister for this suggestion.
I will need to check to see if globally changing this setting affects anything else but it makes autocomplete work now as expected and required. Thanks again to Mr Lister for the assistance.

attach_file isn't working the right way with capybara-webkit

I'm trying to attach some files to this input:
<input type="file" name="image" multiple="" accept="image/*">
My code, that is working when I use selenium driver, is:
attach_file('image', File.absolute_path('../pictures/pic1.JPG'))
attach_file('image', File.absolute_path('../pictures/pic2.JPG'))
attach_file('image', File.absolute_path('../pictures/pic3.JPG'))
The problems come when I use capybara-webkit: as the input is hidden and some elements overlaps it, I need to change some css properties:
page.execute_script("$('input[name=image]').css('opacity','1')")
page.execute_script("$('input[name=image]').css('position','fixed')")
page.execute_script("$('input[name=image]').css('top','620px')")
And even if the test passes, the pictures aren't uploading the right way. If I use page.save_screenshot('after_upload.png') to see what's happening:
Expected result (and result when using selenium driver) ->
Actual result when using capybara-webkit ->
I just found a "fix": put a sleep(3) after each image upload!

Using special characters und id of jQuery UI selectmenu

when using special charactes like . or / in id's for a jQuery UI selectmenu I do get JS syntax errors when clicking on one of the options in the open menu.
I know that in jQuery I would need to escape the special characters, but this code seems to be deep inside the lib itself.
Not sure if I miss something before I report a bug so I would like to get hints!
I'm using jQueryUI version 1.11.1 with jquery 1.11.1 but tried other versions starting from 1.10 in this fiddle
<select name=".speed/" id=".speed/" class="sm">
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
The error message (in chrome console) is:
Uncaught Error: Syntax error, unrecognized expression: .ui-selectmenu-menu, #.speed/-button
jquery-1.10.1.js:1924
TIA
You can use the name attribute or document.getElementById() to get an Id that you can't use as a jQuery selector:
var elt = $(document.getElementById(".speed/"));
var elt = $("[name='.speed/']");
If the errors are generated by the library itself this won't really help much. However you could try replacing the invalid characters in the id with this as a workaround:
elt.attr("id", elt.attr("id").replace(".", "dot").replace("/", "slash"));
// ... possibly include other characters we don't like
The proper way of course would be to use id-s without dots and slashes. This is a rather sloppy way of working around it but it will work. Use with caution!

Datepicker and TimePicker in a form, datepicker works fine but timePicker doesn't drop down in field

First of all, I'm a novice at this stuff so excuse my "ignorance."
I am creating a form in order for customers to schedule a test drive on a vehicle they are interested in purchasing. I have found jquery code which I've included in the head section as follows:
$(function() {
$( "#datepicker" ).datepicker({ autoSize: true });
$("#time1").timePicker();
// 09.00 AM - 03.30 PM, 15 minutes steps.
$("#time2").timePicker({
startTime: "09.00", // Using string. Can take string or Date object.
endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object.
show24Hours: false,
separator:'.',
step: 15
});
});
In the form, I have added the following:
<b>Pick a Date and Time</b><br>
<span class="auto-style7">Date: </span>
<input type="text" id="datepicker" name="testdrivedate" style="width: 91px" /><br>
<span class="auto-style7">Time: </span>
<input type="text" id="time2" name="testdrivetime" size="10" value="09.00 AM" style="width: 87px"/><br>
The datepicker works well, when the user clicks in the field, the calendar shows up just below the field and when a date is selected, the field is populated with the date selected.
However, the timepicker field does not work. 09:00 AM appears in the form, but when the user clicks in the field, no drop down appears in order to allow for selection of a different time.
Where have I gone wrong?
Thanks for any assistance.
Anna
Based on your comment above, I would guess your code is not executing because you have not included jquery.timePicker.js in your code. Download the file and include it like this:
<script src="path/to/your/js/file/jquery.timePicker.js"></script>
You don't need to include datePicker.js because datepicker is a plugin included with the jquery-ui library. (So really you do have datepicker included!)
Also, looking at your comment, you do not need to have a ; after declaring a <script> tag
Like this:
<script></script>
Not like this:
<script></script>;
EDIT
I found the issue, it appears the jquery.timepicker.js library is quite old (2009). It was developed with a much older jquery version. When I run jquery.timepicker.js with a newer version of jquery, I get this error in the console:
Uncaught TypeError: Cannot read property 'opera' of undefined on jquery.timePicker.js line 130
When I checked line 130 in jquery.timepicker.js, the error was complaining about $.browser being undefined. You are using jquery 1.9.1, and as of jquery 1.9 the jquery website states this about the $.browser object:
This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.
See this page for more information on the jquery browser element: http://api.jquery.com/jQuery.browser/
It looks like you would have to try and use the jquery.migrate plugin if you want to get $.browser and jquery.timepicker.js to work. I'm not sure how difficult this will be as I've never used the jquery.migrate plugin before.
As another a solution, it looks like jquery 1.8.3 plays nicely with both jquery.timepicker.js and jquery-ui 1.10.3 (which is what you are also using). You can either use jquery 1.8.3 instead of 1.9.1:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Or you should use the latest version of jquery, jquery-ui and a newer jquery timepicker plugin. On google search, the first entry for jquery timepicker is this one http://trentrichardson.com/examples/timepicker/ dated May 5th, 2013 which is quite recent. That might work better for you.
Good luck!

Resources