Simulating hotkeys in Intern (3) functional tests - functional-testing

I'm trying to test some hotkeys on my site. Typing Ctrl+5 in a field should do something. I'm doing:
command.get(...)
...
.findByCssSelector('input')
.click()
.pressKeys([keys.CONTROL, '5'])
.pressKeys(keys.NULL)
.end()
Seems to be giving me weird results in IE. In my keydown handler I'm logging the event and getting this:
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: false, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "Control", keyCode: 17 ...}
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: false, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "5", keyCode: 53 ...}
Notice ctrlKey is false so it's not performing my hotkey. This is what I'm getting when typing Ctrl + 5 manually:
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: true, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "Control", keyCode: 17 ...}
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: true, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "5", keyCode: 53 ...}
What am I missing?

You have a few things that I would suggest here.
The first relates to your use of CTRL in your pressKeys method. Have a look at the Leadfoot documentation:
https://theintern.io/leadfoot/module-leadfoot_keys.html
The CTRL key is referenced by using keys.CONTROL.
Another suggestion that I would have (based on my own experience with using Intern) is that you should include all key presses in a single array. Right now you have two lines as follows:
.pressKeys([keys.CTRL, '5'])
.pressKeys(keys.NULL)
I found that what would happen is that you needed all of these to be contained in a single array such as:
.pressKeys([keys.CONTROL, '5', keys.NULL])
It should be noted that some people have individual pressKeys events and it seems to work for them. For me, when I wanted to do keyboard shortcuts like this, I could never get that to work.
In addition to this, another suggested array of key presses is as follows - this will press both keys you want and then release them again too:
.pressKeys([keys.CONTROL, '5', '5', keys.CONTROL)
Update 1:
One thing you should look out for (and it's something that recently affected me which is why I said I'd suggest it here while it's fresh in my mind) is to ensure your capabilities are set to ensure that keyboard events are supported. There are a few ways to do this.
Firstly, you can set a global capabilities setting as follows:
"capabilities": {
...
"fixSessionCapabilities": true
}
This will resolve a lot of the problems automatically with an environment before any tests are run. However I have found that using this setting as true globally can cause other unwanted behaviours with your environments so another alternative to that is to set what you need on an individual environment as required.
For example, your keyboard events don't seem to be working so you can ask your configuration to try to correct this when IE tests are run as follows:
"environments": [
...
{
"browserName": "internet explorer",
"brokenSendKeys": true
}
]
If you want to view and try out any other potential settings like this then you can find them all in the Globals section of the Leadfoot documentation as follows:
https://theintern.io/leadfoot/global.html

Related

In cypress how do you simulate pressing spacebar for keyboard navigation to open a select?

How do you simulate the press of spacebar during keyboard navigation when using cypress ?
I have tried below and it doesn't work.
cy.get('#a-select')
.trigger('keydown', {
eventConstructor: 'KeyboardEvent',
keyCode: 32,
which: 32,
shiftKey: false,
ctrlKey: false,
})
.type('{downarrow}');
I also tried a variation of this on an input with keyCode 65 in an input and this doesn't work either.
cy.get('#search').trigger('keydown', {
eventConstructor: 'KeyboardEvent',
keyCode: 65,
which: 65,
shiftKey: false,
ctrlKey: false,
});
cy.get('#search').should('have.value', 'a');
I use this for typing space in the body. My use case is for play or stop a video. Maybe the issue is the input?
cy.get('body').trigger('keydown', {
keyCode: 32,
which: 32,
shiftKey: false,
ctrlKey: false,
force: true,
});

How to perform toolbar searching based on certain condition in free jqgrid 4.15.4

Though I have spent a lot of time on looking for similar QA here but Can't able to find out. If You think that I missed checking something please let me know.
question metadata:
So I am using free jqGrid 4.15.4 for showing data in view. I am able to do all things with awesome documentation. but one certain condition where I am not getting about steps.
In my grid, I have 4 columns named as Id, Name, Group, and Status. Group(Section A/ Section B....) are coming from database. Status(New/Pass /Fail) column consist dropdown and by default value is "New" for all records.
question statement :
There are 5 records and I have Selected "Pass" status for 2 out of 5. Now I want to see all 5 records if I select "New" in filter toolbar for that particular group(section A). Since I don't how many names belongs to that particular group, so I want to check this by filtering all records with "New" status. Is this possible with jqgrid? StudentGrid.png
Here is the code snippet:
$("#grid").jqGrid({
url: '/StudentsView/GetAllData',
mtype: "GET",
datatype: "json",
colNames: ['Id','Name', 'Group','Status'],
colModel: [
{label: "Id",name: 'Id',hidden: true,search: false,key:true},
{label: "Name",name: 'Name', search: true, stype: 'text'},
{label: "GroupNo",name: 'GroupNo',searchoptions: {searchOperators: true,sopt: ['eq', 'cn', 'nc'] }, search: true, multipleSearch: true, multipleGroup:true},
{
label: "Status",
name: 'Status',
cellEdit: true,
edittype: 'select',
editable: true,
editoptions: {
value: getStatusOptions(),
dataEvents: [{
type: 'change',
fn: function (e) {
if (statusid != 0)
{
ChangeStatus(row.Id, row.Name, row.Group, statusid);
}
}
}],
}
}
pager: jQuery('#pager'),
loadonce: true,
viewrecords: true,
gridview: true,
iconSet: "fontAwesome",
emptyrecords: "No records to display",
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "Id"
}
});
$('#grid').jqGrid('filterToolbar', { stringResult: true,searchOnEnter:false, defaultSearch: "cn", multipleSearch: true, searchOperators: true,
search: true, loadFilterDefaults: true });
$('#grid').jqGrid('navGrid', "#pager", {
search: false, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
});
I have added a diagram for better understanding. Thanks in Advance.

JqGrid getRowdata gives cell value on a row as string

I have an issue with jqGrid 4.6.0
When I try to get the row data it changes each data to a string I need to parse them to get the actual int or boolean values what is strange is that when I see the rowobject inside a custom formatter the rowdata seems correct
Here is the sample code and jsfiddle link for the sample I created
var myformatter = function (cellval, options, rowObject)
{
// rowObject is correct here {id: 1, Name: "test1", IsActive: true, Count: 10}
var active = rowObject.IsActive;// here active is true/false which is good
var count = rowObject.Count; // here count is 10,20,30 which is good
if(active )
{
// do what ever
}
return cellval;
}
var mydata = [
{id:1, Name: "test1", IsActive: true, Count: 10},
{id:2, Name: "test2", IsActive: false, Count: 20},
{id:3, Name: "test2", IsActive: false, Count: 30} ];
var grid = $("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Name','Is Active','Count'],
colModel :[
{name:'id', index:'id', width:55},
{name:'Name', index:'Name', width:90},
{name:'IsActive', index:'IsActive', width:90, editable: true ,formatter:myformatter},
{name:'Count', index:'Count', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
});
var row = $('#list').jqGrid('getRowData', 1);
// row is: {id: "1", Name: "test1", IsActive: "true", Count: "10"}
// What I was expecting {id: 1, Name: "test1", IsActive: true, Count: 10}
You should use getLocalRow method instead of getRowData to solve your problem. It's important to understand that getRowData get the text from <td> element. Thus the standard type of data is always string. The method getLocalRow just get the reference to internal element of data array with original data.
One more remark: it's recommended to define unformatter (unformat callback) formatter always if one defines custom formatter.
One can see that you use editing of data. The standard editing will change the type of data on modification. Thus you will have the same problem as before. Free jqGrid allows to fix the problem by specifying convertOnSave callback for the column. See the wiki article for more details. Additionally free jqGrid support some standard column templates, which simplifies the data conversion for Boolean, integer and numbers. On can add template: "integer" property in the Count column (see the template definition here) and to add template: "booleanCheckbox" (see here). You can debug the demo for example and verify that the types of properties of data will be hold correctly after editing.

jqgrid: how to send search operator information to server side

I have setup grid instance something like this:
$("#list").jqGrid({
url:'rest/usertest/users',
datatype: "json",
mtype: "POST",
colNames: ["Username", "Name", "Grouping"],
colModel: [
{ name: "username" },
{ name: "name", width: 90 },
{ name: "grouping", width: 80, sorttype:'string',searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "username",
sortorder: "asc",
viewrecords: true,
multiselect: false,
autowidth: true,
height: 'auto',
gridview: true,
multiSort: true
});
jQuery("#list").jqGrid('filterToolbar',{searchOnEnter : false,searchOperators : true});
I am trying to do a server side operand based search via grid. The problem is that it doesn't send any information about the chosen operator to the server-side. The request does not contain any information about the selected operator (eq, bw, bn etc).
I am trying to do so with the toolbar search itself. Am I missing any configuration parameter? Please advice.
EDIT:
I tried the answer given below by #Tomcat, however it still does not work. The search is successful but I am not able to the make the operand based search work on server side.
As in the pic below, there is not info about the chosen operand.
Having stringResult : true is necessary.
$('#list').filterToolbar({
groupOp: 'OR',
defaultSearch: "cn",
autosearch: true,
searchOnEnter: true,
searchOperators: true, // activates the operators menu
stringResult : true // activates multi-field search
});
Try to add to the grid setup next properties:
searchOperators: true,
search: true,
After that request to the server should contain the next parameters:
"filters" - search filter,
"sidx" -filed for sorting,
"sord" - sorting order ('asc' or 'desc'), '_search' - bool trigger for searching.
Ok, please take a look at this code, it works and send all the necessary information. Pay attention to the jQuery("#list").jqGrid('filterToolbar', { properties.
jQuery("#list").jqGrid('filterToolbar', {
searchOnEnter: false,
searchOperators: true,
multipleSearch: true,
stringResult: true,
groupOps: [{ op: "AND", text: "all" }, { op: "OR", text: "any" }],
defaultSearch: 'cn', ignoreCase: true
});
Hope it will be helpful.

jqgrid common parameters of the Form Editing Dialogs. How?

I have to apply some common parameters of the Form Editing Dialogs defined in the pager.
Current pager is
.navGrid('#pager10', { edit: true, add: true, del: true, search: true, view: true },
// Edit
{},
// Add
{},
// Delete
{},
//Search
{},
//View
{}
);
and I want to use below paramters on all the action like Add, Edit, Delete, View.
How I do this?
{mtype: "POST", closeOnEscape:true, drag: true, resize: true, jqModal: false,
recreateForm: false, closeAfterEdit: true, closeAfterAdd: true,
savekey: [true, 13], viewPagerButtons: false }
Together with jQuery.jgrid.defaults defines standard options of jqGrid there are jQuery.jgrid.edit, jQuery.jgrid.view, jQuery.jgrid.del, jQuery.jgrid.nav which you can use. The settings of jQuery.jgrid.edit are common for Add and Edit dialog.
For example,
jQuery.extend(jQuery.jgrid.edit, {
recreateForm: true,
jqModal: false,
closeAfterAdd: true,
closeAfterEdit: true,
closeOnEscape:true,
savekey: [true, 13]);
You can set in the same way some standard event handler which you plan use in all your grids.
You wrote in your question that you want set mtype: "POST", drag: true, resize: true and some other values which are already default (see here). I recommend you to verify which values are already default. Moreover I strictly recommend you to use recreateForm: true and not default recreateForm: false if you use any customizations or event binding of the dialogs.

Resources