Browserstack: Touch event (not working click on 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) }