2019-03-21 09:57:27 +01:00
<!doctype html>
< html lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title > UITest Doctest< / title >
2019-05-22 16:03:19 +02:00
< link rel = "stylesheet" href = "./3rdparty/highlight/styles/default.css" >
2019-03-21 09:57:27 +01:00
< link rel = "stylesheet" href = "../css/doctest.css" >
< script src = "./3rdparty/highlight/highlight.pack.js" > < / script >
2019-05-23 11:21:46 +02:00
< script src = "../dist/iwmlib.3rdparty.js" > < / script >
2019-05-27 10:53:51 +02:00
< script src = "../dist/iwmlib.js" > < / script >
2019-03-21 09:57:27 +01:00
< / head >
< body onload = "Doctest.run()" >
< h1 >
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’
< br > < br >
Graphical user interface (GUI) testing is the process of testing an application’
< / 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 >
