<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../css/doctest.css"> <script src="./3rdparty/highlight/highlight.pack.js"></script> <script src="../dist/iwmlib.3rdparty.js"></script> <script src="../dist/iwmlib.js"></script> </head> <body onload="Doctest.run()" > <h1> Events </h1> <p> For functional tests it can be useful to simulate event or record and playback events. This module provides basic support for extracting data from events and serializing events into a JSON format that allows to save and load sequences of events. </p> <p> Let's look at an example of a HTML structure with click handlers. The click handler actions log messages that can be tested.</p> <pre><code class="html"> <div> <img id="women" src="examples/women.jpeg" onclick="record(event); Doctest.log('Lady clicked')"/> <video id="movie" width="270" data-zoomcap="Kugellaufuhr" onclick="record(event); Doctest.log('Movie clicked')" controls> <source src="examples/movie.mp4" type="video/mp4"> </vide> </div> </code></pre> <div id="example" class="interactive" style="position:relative; width: 100%; border: 1px solid lightgray"> <img style="margin:8px" id="women" src="examples/women.jpeg" onclick="record(event); Doctest.log('Lady clicked')"/> <video id="movie" style="margin:8px" width="250" data-zoomcap="Kugellaufuhr" onclick="record(event); Doctest.log('Movie clicked')" onmousedown="record(event)" onmouseup="record(event)" controls> <source src="examples/movie.mp4" type="video/mp4"> </video> </div> <button onclick="eventRecorder.stopRecording(); eventRecorder.startReplay()">Replay</button> <script class="doctest"> var eventRecorder = new EventRecorder() function record(event) { let target = event.target target.style.boxShadow = "0px 5px 10px gray" setTimeout(() => target.style.boxShadow = "", 1000) eventRecorder.record(event) } let womenSel = Events.selector(women) let movieSel = Events.selector(movie) Events.simulateEvent('click', MouseEvent, { targetSelector: womenSel}) Events.simulateEvent('click', MouseEvent, { targetSelector: movieSel}) Doctest.expectLog('Lady clicked', 'Movie clicked') </script> <h2> References </h2> <ul> <li><a href="https://gist.github.com/iahu/aafc2492d83d70e42c98">Safari Touch Emulator</a></li> <li><a href="https://www.reddit.com/r/javascript/comments/2laqaf/how_to_trigger_a_touch_event/">How to Trigger Touch Events</a></li> </ul> </body>