97 lines
4.2 KiB
HTML
97 lines
4.2 KiB
HTML
<!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>
|