I would like to write some tests for some input filtering code in a text box. For most tests, I can just call setValue and trigger the change event, which is easy to do. However, in this case, because I want to test that the input gets filtered out (or not), I can't just setValue() directly.
I tried dispatching keydown, keyup, keypress, textinput events. I can see that the handlers for them are being called, but the text doesn't actually show in the text box Note that this only "works" in Firefox, I understand the code would look different for other browsers.
function dispatch(target, eventType, charCode) {
var evt = document.createEvent("KeyboardEvent");
evt.initKeyEvent(
eventType,
true,
true,
window,
false,
false,
false,
false,
charCode,
0
);
target.dispatchEvent(evt);
}
var id = document.getElementById('id');
id.onkeydown = id.onkeyup = id.onkeypress = function() {console.log(arguments)}
dispatch(id, 'keydown', 65);
dispatch(id, 'keyup', 65);
dispatch(id, 'keypress', 65);
dispatch(id, 'textinput', 65);
// I can see the handlers were called but it doesn't display in the text box
I understand this has restrictions because we don't want web apps to just pretend like they are acting for the user. However, this is for testing my own application and I could launch Firefox with a specific profile and install plugins, or even write my own if I know it will help.
What I am after is to avoid using Selenium, I want to keep Java out of my JS tests because not only is it slow, but I have to re-implement a lot of the DOM querying in Java.
After all this, the question is, does anybody know how to get that code to actually modify the input? Tweaking settings, installing plugins?
List of questions that don't answer my question
Simulating user input for TDD JavaScript
Definitive way to trigger keypress events with jQuery
How to send a key to an input text field using Javascript?
Is it possible to simulate key press events programmatically?
I just found out that the following code does work in Chrome at least. No go in firefox or IE http://jsfiddle.net/D2s5T/14/
function dispatch(target, eventType, char) {
var evt = document.createEvent("TextEvent");
evt.initTextEvent (eventType, true, true, window, char, 0, "en-US");
target.focus();
target.dispatchEvent(evt);
}
dispatch(el, "textInput", "a");
Related
I'm trying to automatize some tasks in JavaScript and I need to use a InputEvent, but when I use normal event, I'm getting event.isTrusted = false and my event is doing nothing. Here is my event code:
var event = new InputEvent('input', {
bubbles: true,
cancelable: false,
data: "a"
});
document.getElementById('email').dispatchEvent(event);
This code should put "a" into a textField with id "email", but when event.isTrusted = false, this code is doing nothing. I'm testing it in Chrome Developer Tools in Sources tab with Event Listener Breakpoints (I checked only keyboard>input breakpoint and it shows me all attributes of used event).
I checked all attributes from real keyboard click and only thing that is different is event.isTrusted.
What can I change or what can I do to get event.isTrusted = true?
The isTrusted read-only property of the Event interface is a boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via dispatchEvent.
Source: MDN
You may have misunderstood the concept of the Input Event, the event is triggered after the user type in the input. Manually triggering the event will not make the inputs change their values, is the changing of the values that makes the input trigger's the event not the opposite.
If you really want to change the value of the inputs with a custom event you can do something like this:
let TargetInput = document.getElementById('target')
let Button = document.getElementById('btnTrigger');
Button.addEventListener('click',function(e){
Trigger();
}, false);
TargetInput.addEventListener('input',function(e){
if(!e.isTrusted){
//Mannually triggered
this.value += e.data;
}
}, false);
function Trigger(){
var event = new InputEvent('input', {
bubbles: true,
cancelable: false,
data: "a"
});
TargetInput.dispatchEvent(event);
}
Target: <input type="text" id="target">
<hr>
<button id="btnTrigger">Trigger Event</button>
Any addEventListener call after the following code is executed will have isTrusted set to true.
Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = function () {
let args = [...arguments]
let temp = args[1];
args[1] = function () {
let args2 = [...arguments];
args2[0] = Object.assign({}, args2[0])
args2[0].isTrusted = true;
return temp(...args2);
}
return this._addEventListener(...args);
}
Note: This is a very "hacky" way to go about doing this.
Unfortunately, you cannot generate event programmatically with isTrusted=true in Google Chrome and others modern browser.
See https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
Pupeeteer might help. It generates trusted events.
In browsers, input events could be divided into two big groups:
trusted vs. untrusted.
Trusted events: events generated by users interacting with the page,
e.g. using a mouse or keyboard. Untrusted event: events generated by
Web APIs, e.g. document.createEvent or element.click() methods.
Websites can distinguish between these two groups:
using an Event.isTrusted event flag
sniffing for accompanying events.
For example, every trusted 'click' event is preceded by 'mousedown'
and 'mouseup' events.
For automation purposes it’s important to
generate trusted events. All input events generated with Puppeteer are
trusted and fire proper accompanying events.
I've found it's not possible to set isTrusted to true BUT, depending on your need, a potential solution would be to create a local override in DevTools and remove the conditional in code for the script. This will tell Chrome to use your version (with the isTrusted check removed) instead of the site's JS file.
I have an accepted answer but am open to better ones
Be gentle, this is my first question here
I am building a web browser plugin to automate a series of processes for my organization. I pretty much have everything handled but this one problem that I have been stuck on for two days... and its like really simple I think.
In a lookup field in our ERP, you must press Shift + Right to cycle through certain options.
I am attempting to trigger this or send this any kind of way that I can.
Jquery version 2.0.3
The required event only fires on key up
The required event is not firing when I simulate input
I suspect it needs to be targeted at the input, or perhaps its related to not being trusted/being simulated
It occurs to me, that as I am using a browser extension, perhaps it is something I can simulate from this? I dont know if thats a good way to put it... I wonder what the extension could do here that plain JS or JQ on a page could not.
Update(Dec 11): So per above thought, I am looking into modifying the Jquery framework that is being used. I have saved a local copy as an local override and used these two resources to implement.
Override Javascript file in chrome
https://www.ghacks.net/2018/02/27/make-permanent-changes-to-web-pages-with-chromes-overrides-dev-tool/
I am in process of determining if local overrides are persistent (Edit: they appear to be after restart of computer, lets see if its a long term solution) but I was able to console.log my code and see it in the console.
Next steps will be modifying the handler to perform the actions I need. and/or feed the information I want fed to the system.
Update(Dec 12): probably dont need to override the whole file with this answer how to override a javascript function
Here is my function that triggers the event handler (with no result) which was modified from here
function simulateKey (currentTarget, isTrusted, key, code, keyCode, type, modifiers) {
var evtName = (typeof(type) === "string") ? "key" + type : "keydown";
var modifier = (typeof(modifiers) === "object") ? modifier : {};
console.log("In simulate key function");
var event = document.createEvent("HTMLEvents");
event.initEvent(evtName, true, false);
event.keyCode = keyCode;
event.key = key;
event.code = code;
event.isTrusted = isTrusted;
event.Target = currentTarget;
for (var i in modifiers) {
event[i] = modifiers[i];
}
document.dispatchEvent(event);
}
Here is how I use it (a little hardcoded at the moment, just for testing purposes)
function changeLookup(Lookup) {
console.log("Change Lookup");
var event_object = Lookup;
console.log("Key Event Firing");
$("input[data-name='Entity.Customer.Key']").focus();
simulateKey(Lookup, true, "ArrowRight", "ArrowRight", 39, "up", {shiftKey: true });
console.log("Key Event Fired");
}
I have looked at or tried the following solutions
Trigger a built in event in javascript?
Arrow key pressed while shift key is held down
Is it possible to simulate key press events programmatically?
How to trigger event in JavaScript?
Execute Key Press Event
Firing a Keyboard Event in Safari, using JavaScript
I have reviewed the following documentation
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
https://developer.mozilla.org/en-US/docs/Web/API/Event
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
I am at my wits end here...
The answer was found here Keydown Simulation in Chrome fires normally but not the correct key
I modified it to keyup and juggled some of the parameters so the shift key was pressed... Seems like OP in the other thread did some strange stuff with the parameters in such a way as to press ctrl and shift... So I fixed that for the initKeyboardEvent but not for initKeyEvent
keyUpEventSim = {};
keyUpEventSim.keyup = function(target, k, ctrlKey, altKey, shiftKey, metaKey) {
var oEvent = document.createEvent('KeyboardEvent');
// Chromium Hack
Object.defineProperty(oEvent, 'keyCode', {
get : function() {
return this.keyCodeVal;
}
});
Object.defineProperty(oEvent, 'which', {
get : function() {
return this.keyCodeVal;
}
});
if (oEvent.initKeyboardEvent) {
oEvent.initKeyboardEvent("keyup", true, false, document.defaultView, false, false, ctrlKey, altKey, shiftKey, metaKey);
} else {
oEvent.initKeyEvent("keyup", true, false, document.defaultView, false, false, true, false, k, 0);
}
oEvent.keyCodeVal = k;
if (oEvent.keyCode !== k) {
alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
}
target.dispatchEvent(oEvent);
}
called it as follows
function changeLookup(Lookup) {
Lookup.focus();
keyUpEventSim.keyup(Lookup,39, false, false, true, false);
}
I'm trying to automatize some tasks in JavaScript and I need to use a InputEvent, but when I use normal event, I'm getting event.isTrusted = false and my event is doing nothing. Here is my event code:
var event = new InputEvent('input', {
bubbles: true,
cancelable: false,
data: "a"
});
document.getElementById('email').dispatchEvent(event);
This code should put "a" into a textField with id "email", but when event.isTrusted = false, this code is doing nothing. I'm testing it in Chrome Developer Tools in Sources tab with Event Listener Breakpoints (I checked only keyboard>input breakpoint and it shows me all attributes of used event).
I checked all attributes from real keyboard click and only thing that is different is event.isTrusted.
What can I change or what can I do to get event.isTrusted = true?
The isTrusted read-only property of the Event interface is a boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via dispatchEvent.
Source: MDN
You may have misunderstood the concept of the Input Event, the event is triggered after the user type in the input. Manually triggering the event will not make the inputs change their values, is the changing of the values that makes the input trigger's the event not the opposite.
If you really want to change the value of the inputs with a custom event you can do something like this:
let TargetInput = document.getElementById('target')
let Button = document.getElementById('btnTrigger');
Button.addEventListener('click',function(e){
Trigger();
}, false);
TargetInput.addEventListener('input',function(e){
if(!e.isTrusted){
//Mannually triggered
this.value += e.data;
}
}, false);
function Trigger(){
var event = new InputEvent('input', {
bubbles: true,
cancelable: false,
data: "a"
});
TargetInput.dispatchEvent(event);
}
Target: <input type="text" id="target">
<hr>
<button id="btnTrigger">Trigger Event</button>
Any addEventListener call after the following code is executed will have isTrusted set to true.
Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = function () {
let args = [...arguments]
let temp = args[1];
args[1] = function () {
let args2 = [...arguments];
args2[0] = Object.assign({}, args2[0])
args2[0].isTrusted = true;
return temp(...args2);
}
return this._addEventListener(...args);
}
Note: This is a very "hacky" way to go about doing this.
Unfortunately, you cannot generate event programmatically with isTrusted=true in Google Chrome and others modern browser.
See https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
Pupeeteer might help. It generates trusted events.
In browsers, input events could be divided into two big groups:
trusted vs. untrusted.
Trusted events: events generated by users interacting with the page,
e.g. using a mouse or keyboard. Untrusted event: events generated by
Web APIs, e.g. document.createEvent or element.click() methods.
Websites can distinguish between these two groups:
using an Event.isTrusted event flag
sniffing for accompanying events.
For example, every trusted 'click' event is preceded by 'mousedown'
and 'mouseup' events.
For automation purposes it’s important to
generate trusted events. All input events generated with Puppeteer are
trusted and fire proper accompanying events.
I've found it's not possible to set isTrusted to true BUT, depending on your need, a potential solution would be to create a local override in DevTools and remove the conditional in code for the script. This will tell Chrome to use your version (with the isTrusted check removed) instead of the site's JS file.
I am writing tests for an AngularJS directive which fires events of a <textarea> when certain keys are pressed. It all works fine per my manual testing. I want to be good and have a full unit-test suite too, but I have run into a problem I can't solve on my own:
I want to send a specific keyCode in my triggerHandler() call in my test, but I can't find a way to specify the key that actually works. I am aware of a lot of questions and answers on the topic of building and sending events with specific data, but none of them work on my setup:
My setup
Karma test runner
PhantomJS browser running the tests (but also tried Firefox and Chrome without success)
I'm not using jQuery and I'm hoping there is a regular JS solution. There must be!
Test code
var event = document.createEvent("Events");
event.initEvent("keydown", true, true);
event.keyCode = 40; // in debugging the test in Firefox, the event object can be seen to have no "keyCode" property even after this step
textarea.triggerHandler(event); // my keydown handler does not fire
The strange thing is, I can type the first 3 lines into the console in Chrome and see that the event is being created with the keyCode property set to 40.
So it seems like it should work.
Also, when I call the last line like this textarea.triggerHandler("keydown"); it works and the event handler is triggered. However, there is no keyCode to work with, so it is pointless.
I suspect it may be something to do with the nature of the test running against a DOM that is different to a regular page running in the browser. But I can't figure it out!
I've used the following solution to test it and having it working in Chrome, FF, PhantomJS and IE9+ based on this SO answer.
It doesn't work in Safari - tried millions of other solution without any success...
function jsKeydown(code){
var oEvent = document.createEvent('KeyboardEvent');
// Chromium Hack: filter this otherwise Safari will complain
if( navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ){
Object.defineProperty(oEvent, 'keyCode', {
get : function() {
return this.keyCodeVal;
}
});
Object.defineProperty(oEvent, 'which', {
get : function() {
return this.keyCodeVal;
}
});
}
if (oEvent.initKeyboardEvent) {
oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, code, code);
} else {
oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, code, 0);
}
oEvent.keyCodeVal = code;
if (oEvent.keyCode !== code) {
console.log("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ") -> "+ code);
}
document.getElementById("idToUseHere").dispatchEvent(oEvent);
}
// press DEL key
jsKeydown(46);
Hope it helps
Update
Today I've found and tested this solution which is offers a much wider coverage of browsers (enabling the legacy support):
https://gist.github.com/termi/4654819
All the credit goes to the author of this GIST.
The code does support Safari, PhantomJS and IE9 - tested for the first 2.
Adding to #MarcoL answer, I'd like to point out for future readers who might stumble on this question, that the methods initKeyboardEvent and initKeyEvent are deprecated methods, and should no longer be used. See here and here.
Instead as the MDN docs suggested, events should be created via their respective constructor.
I am currently building a browser extension that injects javascript/jquery into certain pages, and i am having a weird issue, where forcing .click() events are not working from my injected code. The strange bit is that it works completely fine if i make the call from my console js console.
I dont really understand what the problem is. It seems that all of my other calls are working fine. I can bind to click events using .click(function(){...}) (so clearly my jquery has been loaded properly), and call methods when things are clicked (so clearly my jquery has been loaded properly), but the second that i try to force a click, the call just does not go through.
Can anybody explain what is happening, or a way that i can get around it?
(i can not recreate this issue, because the problem clearly has to do with injecting the js in an extension)
this is the best i can do for recreation:
//I have tried all of these separately
console.log($("#this_is_an_id")) //This returns the correct element
$("#this_is_an_id").click() //This does not work at all
$("#this_is_an_id").trigger("click") //I have also tried this without success
$("#this_is_an_id").click(function(){ console.log("stuff") }) //This works fine.
Really, at this point, i am assuming it is not my fault, but something that is wrong with the browser's method of injecting script. I am sorta looking for really hackey ways to fix this, i also tried eval('$("#this_is_an_id").trigger("click")'). Does anybody have any other suggestions?
I finally found a very excellent answer/work around to this issue here:
Trigger events from Firefox browser extension?
From user cms:
First of all, for click events, you need to create an event object with type MouseEvents, not HTMLEvents, and use event.initMouseEvent instead of event.initEvent.
To access the document of the current tab of Firefox from a XUL overlay, you can use the content.document property, but since you already have access to the DOM element you want to click, you can use the Node.ownerDocument property, which will refer to the top-level document object for this node.
I have made a simple function to simulate MouseEvents:
function triggerMouseEvent(element, eventName, userOptions) {
var options = { // defaults
clientX: 0, clientY: 0, button: 0,
ctrlKey: false, altKey: false, shiftKey: false,
metaKey: false, bubbles: true, cancelable: true
// create event object:
}, event = element.ownerDocument.createEvent("MouseEvents");
if (!/^(?:click|mouse(?:down|up|over|move|out))$/.test(eventName)) {
throw new Error("Only MouseEvents supported");
}
if (typeof userOptions != 'undefined'){ // set the userOptions
for (var prop in userOptions) {
if (userOptions.hasOwnProperty(prop))
options[prop] = userOptions[prop];
}
}
// initialize the event object
event.initMouseEvent(eventName, options.bubbles, options.cancelable,
element.ownerDocument.defaultView, options.button,
options.clientX, options.clientY, options.clientX,
options.clientY, options.ctrlKey, options.altKey,
options.shiftKey, options.metaKey, options.button,
element);
// dispatch!
element.dispatchEvent(event);
}
Usage:
triggerMouseEvent(element, 'click');
Check a test usage here.
You can pass also an object as the third argument, if you want to change the values of the event object properties.
Thank you so much for this answer. O_O