Browserstack: Touch event (not working click on Mobile) - mobile

Question

Could somebody explain (find error) in my code please. 'cssSelector' for example 'a[href="#"]' Thank you very much!
I tried to fire different events: 'touchstart', 'touchmove', 'touchend' and nothing... in fact I just need reaction on a click event on Mobile Devices (simulators) on BrowserStack.com
I use this API: Nightwatch.js API Reference | .execute()
My function:
function touchClick(selector, callBackFunc) {
client.execute(function (cssSelector, callBackFunc) {
try {
console.log("touch: ", cssSelector);
var evt = this.document.createEvent('TouchEvent');
evt.initEvent("touchend", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //initUIEvent
//evt.initUIEvent('touchstart', true, true);
// evt.view = window;
//evt.altKey = false;
// evt.ctrlKey = false;
// evt.shiftKey = false;
// evt.metaKey = false;
var elements = document.querySelectorAll(cssSelector);
for (var i = 0; i < elements.length; ++i) {
elements[i].dispatchEvent(evt);
}
} catch (except) {
console.log(except);
}
return evt;
}, selector, callBackFunc);
}
Use:
client.verify.elementPresent('cssSelector'); //OK
//TOUCH CLICK:
touchClick('cssSelector', function (result) {
console.log("TouchClick : * * * * * * * * * * * * ----->")
console.log(result); //...initTouchEvent: 'function initTouchEvent() {\n [native code]\n}'...
client.pause(5000);
})
And a usual click:
//USUAL CLICK WITH CALLBACK:
client.click('cssSelector', function (result) {
this.verify.equal(result.state, 'success'); //OK
console.log('Usual click : ...')
})
Another version of TouchEvent:
client.execute(function (el) {
var node = document.querySelector(el)
var type = 'touchmove'; // touchstart, touchmove, touchend
node.addEventListener(type, function(event) {} , true);
var event = document.createEvent('Event');
event.initEvent(type, true, true);
event.constructor.name;
node.dispatchEvent(event);
return event; // *********** ANCHOR: LINE 100500 **********
}, ['a[href="#menu"]'], function (result) {
if (result.status !== -1) {
console.log('[100500] * TOUCH MOVE ON MOBILE MENU');
client.pause(500);
console.log(result)
}
})
Which produces output:
[100500] * TOUCH MOVE ON MOBILE MENU
{ status: 0,
value:
{ clipboardData: null,
type: 'touchmove',
target: { ELEMENT: ':wdc:XXXXXXXXX' },
currentTarget: null,
eventPhase: 0,
bubbles: true,
cancelable: true,
timeStamp: 1499849859209,
defaultPrevented: true,
srcElement: { ELEMENT: ':wdc:XXXXXXXXX' },
returnValue: false,
cancelBubble: false,
NONE: 0,
CAPTURING_PHASE: 1,
AT_TARGET: 2,
BUBBLING_PHASE: 3,
MOUSEDOWN: 1,
MOUSEUP: 2,
MOUSEOVER: 4,
MOUSEOUT: 8,
MOUSEMOVE: 16,
MOUSEDRAG: 32,
CLICK: 64,
DBLCLICK: 128,
KEYDOWN: 256,
KEYUP: 512,
KEYPRESS: 1024,
DRAGDROP: 2048,
FOCUS: 4096,
BLUR: 8192,
SELECT: 16384,
CHANGE: 32768,
stopPropagation: 'function stopPropagation() {\n [native code]\n}',
preventDefault: 'function preventDefault() {\n [native code]\n}',
initEvent: 'function initEvent() {\n [native code]\n}',
stopImmediatePropagation: 'function stopImmediatePropagation() {\n [native code]\n}' },
sessionId: 'XXXXXXXXXX' }
NEXT CODE:
browser.execute(function (el) {
var node = document.querySelector(el)
//node.addEventListener("click", function (event) { }, false);
var evt = document.createEvent("MouseEvent");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
node.dispatchEvent(evt);
return evt; // ******************** ANCHOR: LINE 100500 ********************
}, ['a[href="#menu"]'], function (result) {
if (result.status !== -1) {
console.log(purpleColor('[100500] * TOUCH MOVE ON MOBILE MENU '));
browser.pause(500);
console.log(result) //LOCAL OUTPUT
}
})
LOCAL OUTPUT:
[100500] * TOUCH MOVE ON MOBILE MENU ----------------------->
{ status: 0,
value:
{ clipboardData: null,
screenX: 0,
screenY: 0,
clientX: 0,
clientY: 0,
ctrlKey: false,
shiftKey: false,
altKey: false,
metaKey: false,
button: 0,
relatedTarget: null,
webkitForce: 0,
offsetX: -319,
offsetY: -18,
x: 0,
y: 0,
fromElement: null,
toElement: { ELEMENT: ':wdc:111111111111' },
dataTransfer: null,
WEBKIT_FORCE_AT_MOUSE_DOWN: 1,
WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN: 2,
initMouseEvent: 'function initMouseEvent() {\n [native code]\n}',
view: { WINDOW: ':wdc:111111111111' },
detail: 0,
keyCode: 0,
charCode: 0,
layerX: -319,
layerY: -37,
pageX: 0,
pageY: 0,
which: 1,
initUIEvent: 'function initUIEvent() {\n [native code]\n}',
type: 'click',
target: { ELEMENT: ':wdc:111111111111' },
currentTarget: null,
eventPhase: 0,
bubbles: true,
cancelable: true,
timeStamp: 1699192969041,
defaultPrevented: false,
srcElement: { ELEMENT: ':wdc:111111111111' },
returnValue: true,
cancelBubble: false,
NONE: 0,
CAPTURING_PHASE: 1,
AT_TARGET: 2,
BUBBLING_PHASE: 3,
MOUSEDOWN: 1,
MOUSEUP: 2,
MOUSEOVER: 4,
MOUSEOUT: 8,
MOUSEMOVE: 16,
MOUSEDRAG: 32,
CLICK: 64,
DBLCLICK: 128,
KEYDOWN: 256,
KEYUP: 512,
KEYPRESS: 1024,
DRAGDROP: 2048,
FOCUS: 4096,
BLUR: 8192,
SELECT: 16384,
CHANGE: 32768,
stopPropagation: 'function stopPropagation() {\n [native code]\n}',
preventDefault: 'function preventDefault() {\n [native code]\n}',
initEvent: 'function initEvent() {\n [native code]\n}',
stopImmediatePropagation: 'function stopImmediatePropagation() {\n [native code]\n}' },
sessionId: 'aaaaaaaaaaaaaaaaaa' }
And I still can't click on Mobile device!

Answer 1

Sorry, following test has shown that clicks work fine on Mobile Devices. Some error occurred only on our website... Now I do investigation. Thank you, Google!
const TEST_NAME = 'Click Event on Mobile: ';
//var expect = require('chai').expect;
var exports = module.exports = {};
function test(browser) {
//TEST GOOGLE.CO.UK
browser.url('https://www.google.co.uk')
.waitForElementVisible('body', 2000)
.maximizeWindow()
.setValue('input[type="search"]', 'nightwatch')
.pause(1000)
browser.getValue('input[type="search"]', function (result) {
this.verify.equal(result.state, 'nightwatch');
});
browser.click('button#tsbb[type="submit"]', function (result) {
this.verify.strictEqual(result.status, 0);
})
browser.pause(2000)
browser.end();
}
exports[TEST_NAME] = function (browser) { test(browser) }