Browserstack：触摸事件（不工作点击移动）

有人可以解释（发现错误）在我的代码请。 'cssSelector'例如'a [href =“＃”]'非常感谢！我试图触发不同的事件：“touchstart”，“touchmove”，“touchend”并没有什么......其实我只需要在移动设备上（模拟器）click事件的反应上BrowserStack.comBrowserstack：触摸事件（不工作点击移动）

我使用这个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' }

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

来源

2017-06-21 Alex Pilugin

顺便说一句，我试图用从这里，但例如“client.addCommand”找不到： https://github.com/webdriverio/webdriverio/issues/181 –

感谢您重译我的问题上Nightwatch.js邮件列表： https://groups.google.com/forum/#!topic/nightwatchjs/hQJt8UrsSic –

对不起，以下测试显示点击在移动设备上正常工作。一些错误只发生在我们的网站上...现在我调查了。谢谢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) }

来源

2017-06-23 10:16:04

Browserstack：触摸事件（不工作点击移动）

回答

相关问题