Trigger touch events on mobile web

Question

I am trying to figure out how I can trigger touch events in a mobile browser for testing purposes. I am not a web dev, so this is a bit unfamiliar territory for me.

At this point I am trying to capture actual touch events that are created by me touching the screen, and re-firing them to trigger the same response. Below is what I do on the mobile amazon.com page, expecting the carousel to repeat the sliding, just as if I were to actually slide it with my finger. However, the carousel does not slide. It seems that the browser treats my re–fired events differently from native ones. I’m running this in Chrome on Android.

Has anyone seen this behavior and knows what should I fix?

// EDITED after taking into consideration @Palpatim's suggestion
// stash away events on a carousel 
var element = document.querySelector('.gw-carousel-viewport');
document.test_touch_move = []
element.addEventListener('touchstart', function(e){document.test_touch_start = e;}, false); 
element.addEventListener('touchmove', function(e){document.test_touch_move.push(e);}, false); 
element.addEventListener('touchend', function(e){document.test_touch_end = e;}, false);

// 
// physically slide the carousel with my finder to trigger events 
//

// store captured events from being overriden 
var touch_start = document.test_touch_start; 
var touch_move = document.test_touch_move; 
var touch_end = document.test_touch_end;

// 
// physically slide the carousel back to its initial position to make sure all event screen coordinates match 
//

element.dispatchEvent(touch_start); 
touch_move.forEach(function(e){element.dispatchEvent(e);}); 
element.dispatchEvent(touch_end);

// I do not see the same sliding behavior as I see when actually swiping with my finger

Answer 1

You are only storing one of the touchend events, but in all likelihood, you need multiple events to properly emulate a finger swipe. For example, open this demo in a mobile device.

You'll see that swiping the scrolling div results in multiple touchmove events being logged, which track your finger as it moves around the page.

var log = document.getElementById('log');

var logEvent = function(ev) {
  var d = new Date();
  var msg = document.createTextNode(d.getTime() + ' :: received ' + ev.type + '\n');
  log.appendChild(msg);
};

// stash away events on a carousel 
var element = document.getElementById('listener'); 
element.addEventListener('touchstart', logEvent, false); 
element.addEventListener('touchmove', logEvent, false); 
element.addEventListener('touchend', logEvent, false);

#log,
#listener {
  width: 40%;
  position: absolute;
  top: 5%;
  bottom: 5%;
  overflow-x: hidden;
  overflow-y: auto;
}

#listener {
  padding: 0 2%;
  border: 1px solid green;
  left: 2%;
}

#log {
  border: 1px solid blue;
  right: 2%;
}

  <div id="listener">
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
    <p>I am a long scrolling div.</p>
  </div>
  
  <pre id="log"></pre>