浏览器堆栈:触摸事件(在移动设备上单击不起作用)

Question

有人

可以在我的代码中解释(查找错误(吗？'cssSelector' 例如 'a[href="#"]' 非常感谢！我尝试触发不同的事件："触摸启动"，"触摸移动"，"触摸结束">，什么都没有......事实上，我只需要对移动设备(模拟器(上的点击事件做出反应 BrowserStack.com

我使用这个API：Nightwatch.js API Reference | .execute((

我的职能：

    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);
}

用：

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);
})

和通常的点击：

//USUAL CLICK WITH CALLBACK:
client.click('cssSelector', function (result) {
  this.verify.equal(result.state, 'success'); //OK
  console.log('Usual click : ...')
})

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)
  }
})

产生输出：

[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' }

下一个代码：

            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
            }
        })

本地输出：

[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' }

而且我仍然无法点击移动设备！

Answer 1

抱歉，以下测试表明点击在移动设备上工作正常。一些错误只发生在我们的网站上...现在我做调查。谢谢你，谷歌！

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) }