2023-05-09 13:25:39 +02:00
|
|
|
<!DOCTYPE html>
|
2019-03-21 09:57:27 +01:00
|
|
|
<html lang="en">
|
2023-05-09 13:25:39 +02:00
|
|
|
<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><a href="index.html">lib.</a>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">
|
2019-03-21 09:57:27 +01:00
|
|
|
<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>
|
2023-05-09 13:25:39 +02:00
|
|
|
<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()
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
function record(event) {
|
|
|
|
|
let target = event.target
|
|
|
|
|
target.style.boxShadow = '0px 5px 10px gray'
|
|
|
|
|
setTimeout(() => (target.style.boxShadow = ''), 1000)
|
|
|
|
|
eventRecorder.record(event)
|
|
|
|
|
}
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
let womenSel = Events.selector(women)
|
|
|
|
|
let movieSel = Events.selector(movie)
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
Events.simulateEvent('click', MouseEvent, { targetSelector: womenSel })
|
|
|
|
|
Events.simulateEvent('click', MouseEvent, { targetSelector: movieSel })
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
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>
|
|
|
|
|
</html>
|
