<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UITest Doctest</title>
<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>UITest</h1>
<p>
Testing the user interface (UI) of an application is a critical part of the software development lifecycle.
Most end users focus on the usability and aesthetics of the applications they interact with and are blind to
the underlying source code and other technical aspects that make those apps functional. A poorly designed UI
will undoubtedly lead to unhappy customers, so it’s important to test early and often to prevent as many
bugs as possible from reaching the UI level.
<br /><br />
Graphical user interface (GUI) testing is the process of testing an application’s visual elements to ensure
the images and other features that are visible to the customer behave and look as expected. This article
describes what GUI testing is, its importance, and what features your GUI testing tools should have to help
you ensure proper test coverage.
</p>
<p>Let's look at an example.</p>
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 380px">
<button id="button1" type="button" onclick="add1();">Click to add 1</button>
<input id="input1" type="text" value="0" />
<hr />
<button id="button2" type="button" onclick="add2();">Click to add 1</button>
<input id="input2" type="text" value="0" />
<hr />
<button id="button3" type="button" onclick="add3();">Click to add 1</button>
<input id="input3" type="text" value="0" />
<hr />
<svg width="200" height="70">
<circle id="circle1" cx="40" cy="40" r="30" fill="orange" onclick="changeColor(this);" />
</svg>
<hr />
<svg width="200" height="70">
<circle id="circle2" cx="40" cy="40" r="30" fill="blue" onclick="changeColor(this);" />
</svg>
</div>
<script class="doctest">
function add1() {
let value = parseInt(input1.value)
input1.value = ++value
}
function add2() {
let value = parseInt(input2.value)
input2.value = ++value
}
function add3() {
let value = parseInt(input3.value)
input3.value = ++value
}
function changeColor(elem) {
const letters = '0123456789ABCDEF'
let color = '#'
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]
}
elem.setAttribute('fill', color)
}
const test1 = new UITest()
test1.tap(button1, 1, { eventType: 'click' })
test1.tap(button1, 2, { eventType: 'click' })
test1.tap(button1, 5, { eventType: 'click' })
test1.start()
const test2 = new UITest({ repeat: -1 })
test2.tap(button2, { eventType: 'click' })
test2.start()
const test3 = new UITest({ repeat: -1, timeScale: 20 })
test3.tap(button3, { eventType: 'click' })
test3.start()
const test4 = new UITest({ repeat: -1 })
test4.tap('#circle1', { eventType: 'click' })
test4.start()
const test5 = new UITest({ onComplete: () => console.log('completed') })
for (let i = 1; i < 6; i++) {
test5.tap('#circle2', i, { eventType: 'click' })
}
test5.start()
</script>
</body>
</html>