iwmlib/lib/uitest.html

97 lines
4.2 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 its 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 applications 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>