UI Test Automation Playground

17 | input( 18 | id="inputField" 19 | title="Edit Field" 20 | onchange="setStatus('Value changed to: ' + this.value)" 21 | class="form-control" 22 | placeholder="Change me..." 23 | ) 24 | br 25 | button( 26 | id="enableButton" 27 | class="btn btn-primary" 28 | onclick="enableEditFieldWithDelay()" 29 | ) Enable Edit Field with 5 seconds delay 30 | div( 31 | id="opstatus" 32 | ) --- 33 | 34 | script. 35 | function enableEditFieldWithDelay() 36 | { 37 | byid('inputField').disabled = true; 38 | setStatus('Input Disabled...'); 39 | setTimeout(()=>{ 40 | byid('inputField').disabled = false; 41 | setStatus('Input Enabled...'); 42 | },5000); 43 | } 44 | 45 | include footer.html 46 | 47 | -------------------------------------------------------------------------------- /views/Overlapped.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Entering text to a partially visible element may require scrolling it into view. 11 | h4 Scenario 12 | ul 13 | li Record setting text into the Name input field (scroll element before entering the text). 14 | li Then execute your test to make sure that the text was entered correctly. 15 | h4 Playground 16 |

17 |

18 | 19 |

20 | 21 |

22 | 23 |

24 |

25 |

26 | 27 | 28 | script. 29 | var nameElement = document.querySelector('#name'); 30 | 31 | nameElement.addEventListener('input', (event) => { 32 | 33 | var crect = nameElement.getBoundingClientRect(); 34 | 35 | var centerX = crect.left + (crect.width >> 1); 36 | var centerY = crect.top + (crect.height >> 1); 37 | var elementAtPoint = document.elementFromPoint(centerX, centerY); 38 | if(!nameElement.isSameNode(elementAtPoint)) 39 | { 40 | nameElement.value = ""; 41 | } 42 | }); 43 | 44 | 45 | include footer.html 46 | -------------------------------------------------------------------------------- /views/VerifyText.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p In general inner text of a DOM element is different from displayed on screen. Browsers normalize text upon rendering, but DOM nodes contain text as it is in HTML markup. For example a browser may show the text as 11 | div 12 | p 13 | span(class="badge-secondary") Hello UserName! 14 | p and the text of the DOM element can be 15 | div. 16 |

17 | 18 |
19 |     Hello UserName!
20 |          21 | 22 |

23 | p Take this fact into account when searching for an element using it's text value. 24 | div(class="container") 25 | div(class="row") 26 | div(class="col-sm") Does not work 27 | div(class="col-sm") Works 28 | div(class="row") 29 | div(class="col-sm") 30 | code //span[.='Welcome UserName!'] 31 | div(class="col-sm") 32 | code //span[normalize-space(.)='Welcome UserName!'] 33 | br 34 | h4 Scenario 35 | ul 36 | li. 37 | Create a test that finds an element with Welcome... text. 38 | h4 Playground 39 | include text.html 40 | include footer.html 41 | 42 | -------------------------------------------------------------------------------- /views/ClassAttr.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Class attribute of an element may contain more than one class reference. E.g. 11 |

<button class="btn btn-primary btn-test">

12 | p XPath selector relying on a class must be well formed. For example, the following will not work: 13 |

//button[@class='btn-primary']

14 | p Correct variant is 15 |

//button[contains(concat(' ', normalize-space(@class), ' '), ' btn-primary ')]

16 | h4 Scenario 17 | ul 18 | li Record primary (blue) button click and press ok in alert popup. 19 | li Then execute your test to make sure that it can identify the button using btn-primary class. 20 | h4 Playground 21 | button( 22 | type="button" 23 | class="btn class1 " + button1Class + " btn-test" 24 | ) Button 25 | button( 26 | type="button" 27 | class="btn class2 " + button2Class + " btn-test" 28 | ) Button 29 | button( 30 | type="button" 31 | class="btn class3 " + button3Class + " btn-test" 32 | ) Button 33 | 34 | script. 35 | function ClickEventHandler(event) 36 | { 37 | if (("" + event.target.className).indexOf("btn-primary") != -1) 38 | { 39 | alert("Primary button pressed"); 40 | } 41 | } 42 | document.body.addEventListener('click', ClickEventHandler, true); 43 | 44 | include footer.html 45 | 46 | -------------------------------------------------------------------------------- /views/Animation.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Before clicking a button we may need to wait for it to become stable (not moving). 11 | h4 Scenario 12 | ul 13 | li Record `Start Animation` button click. Wait for animation to complete and record click on `Moving Target`. 14 | li Then execute your test to make sure that when Moving Target is clicked, it's class does not contain 'spin'. The class is printed on the status label below the buttons. 15 | h4 Playground 16 | button( 17 | id="animationButton" 18 | type="button" 19 | class="btn btn-secondary" 20 | onclick="startAnimation()" 21 | ) Start Animation 22 | span 23 | button( 24 | id="movingTarget" 25 | type="button" 26 | class="btn btn-primary" 27 | onclick="movingTargetClicked()" 28 | onanimationend="animationDone()" 29 | ) Moving Target 30 | div( 31 | id="opstatus" 32 | ) --- 33 | 34 | script. 35 | function startAnimation() 36 | { 37 | setStatus("Animating the button..."); 38 | byid("movingTarget").className = "btn btn-primary spin"; 39 | } 40 | 41 | function animationDone() 42 | { 43 | byid("movingTarget").className = "btn btn-primary"; 44 | setStatus("Animation done"); 45 | } 46 | 47 | function movingTargetClicked() 48 | { 49 | setStatus("Moving Target clicked. It's class name is '" + byid("movingTarget").className + "'"); 50 | } 51 | 52 | include footer.html 53 | 54 | -------------------------------------------------------------------------------- /views/HiddenLayers.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Some applications use DOM caching techniques. For example, if a user follows a multi step process and each step requires filling data into a form then forms may be cached at the client side along the way. It allows to quickly navigate back and forward through the steps without requesting data from a server. When form is cached it just pushed on-top of z-order stack. It means that an element may be still present in the DOM tree but overlapped with another layer of elements. In this case it is important that a test does not interact with inactive elements becasue they are invisible to a user. 11 | h4 Scenario 12 | ul 13 | li Record button click and then duplicate the button click step in your test. 14 | li Execute the test to make sure that green button can not be hit twice. 15 | h4 Playground 16 | div( 17 | id="spa" 18 | ) 19 | div( 20 | class="spa-view" 21 | style="z-index: 1;" 22 | ) 23 | button( 24 | type="button" 25 | class="btn btn-success" 26 | id="greenButton" 27 | ) Button 28 | div 29 | br 30 | 31 | script. 32 | function ClickEventHandler(event) 33 | { 34 | if (event.target.id == "greenButton") 35 | { 36 | console.log("Green button pressed"); 37 | if ($("#blueButton").length) 38 | { 39 | $("#blueButton").parent().append("

User can not click green button in the current application state!

"); 40 | } 41 | $("#spa").append('

'); 42 | } 43 | else if (event.target.id == "blueButton") 44 | { 45 | console.log("Blue button pressed"); 46 | } 47 | } 48 | document.body.addEventListener('click', ClickEventHandler, true); 49 | 50 | include footer.html 51 | 52 | -------------------------------------------------------------------------------- /views/Alerts.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Dealing with standard alerts, prompts and confirmations is an important skill in test automation. 11 | h4 Scenario 12 | ul 13 | li Record clicks on `Alert`, `Confirm` and `Prompt` buttons. Click `OK` to confirm, answer with non-default value to the prompt. 14 | li Then execute your test to make sure that it passes completely without manual steps. 15 | h4 Playground 16 | button( 17 | id="alertButton" 18 | type="button" 19 | class="btn btn-primary" 20 | ) Alert 21 | span 22 | button( 23 | id="confirmButton" 24 | type="button" 25 | class="btn btn-primary" 26 | ) Confirm 27 | span 28 | button( 29 | id="promptButton" 30 | type="button" 31 | class="btn btn-primary" 32 | ) Prompt 33 | 34 | script. 35 | function ClickEventHandler(event) 36 | { 37 | if (event.target.id == "alertButton") 38 | { 39 | alert("Today is a working day.\nOr less likely a holiday."); 40 | console.log("Alert closed"); 41 | } 42 | else if (event.target.id == "confirmButton") 43 | { 44 | if (confirm("Today is Friday.\nDo you agree?")) 45 | { 46 | setTimeout(function () { alert("Yes") }, 1000); 47 | } 48 | else 49 | { 50 | setTimeout(function () { alert("No") }, 1000); 51 | } 52 | } 53 | else if (event.target.id == "promptButton") 54 | { 55 | var res = prompt("Choose \"cats\" or 'dogs'.\nEnter your value:", "cats"); 56 | if (res == null) 57 | { 58 | res = "no answer"; 59 | } 60 | console.log("Prompt answer: " + res); 61 | setTimeout(function () { alert("User value: " + res) }, 1000); 62 | } 63 | } 64 | document.body.addEventListener('click', ClickEventHandler, true); 65 | 66 | 67 | include footer.html 68 | -------------------------------------------------------------------------------- /views/TextInput.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Entering text with physical keyboard can be different from sending DOM events to an element. This page is specifically desined to illustrate this problem. There are cases when attempts to set a text via DOM events lead to nowhere and the only way to proceed is to emulate real keyboard input at OS level. 11 | h4 Scenario 12 | ul 13 | li Record setting text into the input field and pressing the button. 14 | li Then execute your test to make sure that the button name is changing. 15 | h4 Playground 16 |

17 |

18 | label(for="newButtonName") Set New Button Name 19 | input( 20 | type="text" 21 | class="form-control" 22 | placeholder="MyButton" 23 | id="newButtonName" 24 | ) 25 | br 26 | button( 27 | type="button" 28 | class="btn btn-primary" 29 | id="updatingButton" 30 | ) Button That Should Change it's Name Based on Input Value 31 | 32 | script. 33 | function ClickEventHandler(event) 34 | { 35 | if (event.target.id == "updatingButton") 36 | { 37 | if (document.NewButtonNameC && document.NewButtonNameC == document.NewButtonNameI) 38 | { 39 | event.target.textContent = document.NewButtonNameC; 40 | } 41 | } 42 | } 43 | 44 | function InputEventHandler(event) 45 | { 46 | if (event.target.id == "newButtonName") 47 | { 48 | document.NewButtonNameI = event.target.value; 49 | } 50 | } 51 | 52 | function ChangeEventHandler(event) 53 | { 54 | if (event.target.id == "newButtonName") 55 | { 56 | document.NewButtonNameC = event.target.value; 57 | } 58 | } 59 | 60 | document.body.addEventListener('click', ClickEventHandler, true); 61 | document.body.addEventListener('input', InputEventHandler, true); 62 | document.body.addEventListener('change', ChangeEventHandler, true); 63 | document.NewButtonName = null; 64 | 65 | include footer.html 66 | -------------------------------------------------------------------------------- /static/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 90 | -------------------------------------------------------------------------------- /static/upload.css: -------------------------------------------------------------------------------- 1 | #root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.drag-drop{background:#fff;border:1px solid var(--border-color);border-radius:8px}.document-uploader{border:2px dashed #4282fe;background-color:#f4fbff;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border-radius:8px;cursor:pointer}.document-uploader.active{border-color:#6dc24b}.document-uploader .upload-info{display:flex;align-items:center;margin-bottom:1rem}.document-uploader .upload-info svg{font-size:36px;margin-right:1rem}.document-uploader .upload-info div p{margin:0;font-size:16px}.document-uploader .upload-info div p:first-child{font-weight:700}.document-uploader .file-list{display:flex;flex-direction:column;gap:.5rem;width:100%;height:30vh;&__container{width:100%;height:100%;overflow:auto}}.document-uploader .file-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border:1px solid var(--border-color);border-radius:8px}.document-uploader .file-item .file-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.document-uploader .file-item .file-info p{margin:0;font-size:14px;color:#333}.document-uploader .file-item .file-actions{cursor:pointer}.document-uploader .file-item .file-actions svg{font-size:18px;color:#888}.document-uploader .file-item .file-actions:hover svg{color:#d44}.document-uploader .browse-btn{display:flex;align-items:center;justify-content:center;padding:.5rem 1rem;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;background-color:var(--primary-color)}.document-uploader .browse-btn:hover{background-color:transparent}.document-uploader .success-file{display:flex;align-items:center;color:#6dc24b}.document-uploader .success-file p{margin:0;font-size:14px;font-weight:700}.document-uploader input[type=file]{display:none}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}} 2 | -------------------------------------------------------------------------------- /static/prism.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.15.0 2 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 3 | /** 4 | * prism.js default theme for JavaScript, CSS and HTML 5 | * Based on dabblet (http://dabblet.com) 6 | * @author Lea Verou 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | color: black; 12 | background: none; 13 | text-shadow: 0 1px white; 14 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | word-wrap: normal; 20 | line-height: 1.5; 21 | 22 | -moz-tab-size: 4; 23 | -o-tab-size: 4; 24 | tab-size: 4; 25 | 26 | -webkit-hyphens: none; 27 | -moz-hyphens: none; 28 | -ms-hyphens: none; 29 | hyphens: none; 30 | } 31 | 32 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 33 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 34 | text-shadow: none; 35 | background: #b3d4fc; 36 | } 37 | 38 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 39 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 40 | text-shadow: none; 41 | background: #b3d4fc; 42 | } 43 | 44 | @media print { 45 | code[class*="language-"], 46 | pre[class*="language-"] { 47 | text-shadow: none; 48 | } 49 | } 50 | 51 | /* Code blocks */ 52 | pre[class*="language-"] { 53 | padding: 1em; 54 | margin: .5em 0; 55 | overflow: auto; 56 | } 57 | 58 | :not(pre) > code[class*="language-"], 59 | pre[class*="language-"] { 60 | background: #f5f2f0; 61 | } 62 | 63 | /* Inline code */ 64 | :not(pre) > code[class*="language-"] { 65 | padding: .1em; 66 | border-radius: .3em; 67 | white-space: normal; 68 | } 69 | 70 | .token.comment, 71 | .token.prolog, 72 | .token.doctype, 73 | .token.cdata { 74 | color: slategray; 75 | } 76 | 77 | .token.punctuation { 78 | color: #999; 79 | } 80 | 81 | .namespace { 82 | opacity: .7; 83 | } 84 | 85 | .token.property, 86 | .token.tag, 87 | .token.boolean, 88 | .token.number, 89 | .token.constant, 90 | .token.symbol, 91 | .token.deleted { 92 | color: #905; 93 | } 94 | 95 | .token.selector, 96 | .token.attr-name, 97 | .token.string, 98 | .token.char, 99 | .token.builtin, 100 | .token.inserted { 101 | color: #690; 102 | } 103 | 104 | .token.operator, 105 | .token.entity, 106 | .token.url, 107 | .language-css .token.string, 108 | .style .token.string { 109 | color: #9a6e3a; 110 | background: hsla(0, 0%, 100%, .5); 111 | } 112 | 113 | .token.atrule, 114 | .token.attr-value, 115 | .token.keyword { 116 | color: #07a; 117 | } 118 | 119 | .token.function, 120 | .token.class-name { 121 | color: #DD4A68; 122 | } 123 | 124 | .token.regex, 125 | .token.important, 126 | .token.variable { 127 | color: #e90; 128 | } 129 | 130 | .token.important, 131 | .token.bold { 132 | font-weight: bold; 133 | } 134 | .token.italic { 135 | font-style: italic; 136 | } 137 | 138 | .token.entity { 139 | cursor: help; 140 | } 141 | 142 | -------------------------------------------------------------------------------- /static/style.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin-top: 50px; 3 | } 4 | 5 | h1#title { 6 | font-size: 3.5em; 7 | } 8 | 9 | blockquote#citation { 10 | margin-top: 30px; 11 | margin-bottom: 30px; 12 | } 13 | 14 | li.active { 15 | font-weight: 700; 16 | } 17 | 18 | #content { 19 | margin-top: 30px; 20 | } 21 | 22 | #spinner { 23 | font-size:24px; 24 | margin-left:10px; 25 | } 26 | 27 | .btn-test { 28 | margin-left:20px; 29 | } 30 | 31 | #footer { 32 | font-size: 11px; 33 | margin: 60px 10px 30px; 34 | padding-left: 5%; 35 | max-width: 1090px; 36 | } 37 | 38 | #footer-content { 39 | display: flex; 40 | flex-wrap: wrap; 41 | justify-content: center; 42 | align-items: center; 43 | margin: 20px auto 0; 44 | } 45 | 46 | #footer-content div { 47 | float: left; 48 | margin-right: 20px; 49 | background-repeat: no-repeat; 50 | background-position: 0 1px; 51 | padding-bottom: 4px; 52 | } 53 | 54 | #github { 55 | margin-right: 5px !important; 56 | } 57 | 58 | #license { 59 | text-align: center; 60 | margin-top: -5px; 61 | } 62 | 63 | #fork { 64 | background-image: url(/static/fork.png); 65 | background-size: 11px 16px; 66 | padding-left: 15px; 67 | } 68 | 69 | #spa { 70 | position: relative; 71 | top: 0; 72 | bottom: 0; 73 | width: 100%; 74 | height: 100%; 75 | } 76 | 77 | .spa-view { 78 | position: absolute; 79 | top: 0; 80 | bottom: 0; 81 | width: 100%; 82 | height: 100%; 83 | } 84 | 85 | /* Dynamic table */ 86 | .annotate{ 87 | font-style: italic; 88 | color: #366ED4; 89 | } 90 | 91 | [role="table"] { 92 | display: table; 93 | } 94 | 95 | [role="table"] > div[id] { 96 | display: table-caption; 97 | font-style: italic; 98 | } 99 | 100 | [role="table"] [role="row"] { 101 | display: table-row; 102 | } 103 | 104 | [role="table"] [role="cell"], 105 | [role="table"] [role="columnheader"] { 106 | display: table-cell; 107 | padding: 0.125em 0.25em; 108 | width: 8em; 109 | } 110 | 111 | [role="table"] [role="columnheader"] { 112 | font-weight: bold; 113 | border-bottom: thin solid #888; 114 | } 115 | 116 | [role="table"] [role="rowgroup"]:last-child [role="row"]:nth-child(odd) { 117 | background-color: #ddd; 118 | } 119 | 120 | .zerowidth { 121 | width: 0px; 122 | min-width: 0px; 123 | padding-left: 0; 124 | padding-right: 0; 125 | border-left-width: 0; 126 | border-right-width: 0; 127 | white-space: nowrap; 128 | overflow: hidden; 129 | } 130 | 131 | .offscreen { 132 | position: absolute; 133 | top: -9999px; 134 | left: -9999px; 135 | } 136 | 137 | #movingTarget { 138 | margin-left: 100px; 139 | } 140 | 141 | .spin { 142 | position:absolute; 143 | animation: orbit 5s forwards; 144 | animation-timing-function: linear; 145 | } 146 | 147 | ul.indented-right { 148 | padding-left: 20px; 149 | } 150 | 151 | @-webkit-keyframes orbit { 152 | from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); } 153 | to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); } 154 | } 155 | -------------------------------------------------------------------------------- /views/ProgressBar.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p A web application may use a progress bar to reflect state of some lengthy process. Thus a test may need to read the value of a progress bar to determine if it is time to proceed or not. 11 | h4 Scenario 12 | ul 13 | li Create a test that clicks Start button and then waits for the progress bar to reach 75%. Then the test should click Stop. The less the differnce between value of the stopped progress bar and 75% the better your result. 14 | h4 Playground 15 | button( 16 | type="button" 17 | class="btn btn-primary btn-test" 18 | id="startButton" 19 | onclick="Start()" 20 | ) Start 21 | button( 22 | type="button" 23 | class="btn btn-info btn-test" 24 | id="stopButton" 25 | onclick="Stop()" 26 | ) Stop 27 | br 28 | br 29 | div(class="progress") 30 | div(class="progress-bar bg-info" 31 | id="progressBar" 32 | role="progressbar" 33 | style="width: 25%;" 34 | aria-valuenow="25" 35 | aria-valuemin="0" 36 | aria-valuemax="100") 25% 37 | div(id="content") 38 | p(id="result") Result: n/a 39 | 40 | script. 41 | var ratio = 25; 42 | var started = false; 43 | var startTime = 0; 44 | var endTime = 0; 45 | var delay = 100; 46 | 47 | function _setResult() 48 | { 49 | var label = document.getElementById("result"); 50 | label.innerHTML = "Result: " + (ratio == 25 ? "n/a" : ratio - 75) + ", duration: " + (endTime == 0 ? "n/a" : (endTime - startTime)); 51 | } 52 | 53 | function Start() 54 | { 55 | var random = "" + (new Date()).getTime(); 56 | random = parseInt(random.substr(random.length - 3, 3)); 57 | delay = Math.floor(random/2); 58 | 59 | startTime = new Date(); 60 | endTime = 0; 61 | started = true; 62 | ratio = 25; 63 | 64 | var progressBar = document.getElementById("progressBar"); 65 | 66 | _setResult(); 67 | _setProgress(); 68 | 69 | function _setProgress() 70 | { 71 | progressBar.setAttribute("style", "width: " + ratio + "%"); 72 | progressBar.setAttribute("aria-valuenow", ratio); 73 | progressBar.innerHTML = ratio + "%"; 74 | endTime = new Date(); 75 | } 76 | 77 | function _makeProgress() 78 | { 79 | if (!started) 80 | return; 81 | ratio += 1; 82 | _setProgress(); 83 | if (ratio < 100) 84 | { 85 | setTimeout(_makeProgress, delay); 86 | } 87 | } 88 | 89 | setTimeout(_makeProgress, 1000); 90 | } 91 | 92 | function Stop() 93 | { 94 | started = false; 95 | _setResult(); 96 | } 97 | 98 | include footer.html 99 | 100 | -------------------------------------------------------------------------------- /views/SampleApp.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Fill in and submit the form. For successfull login use any non-empty user name and `pwd` as password. 11 | div(class="row") 12 | br 13 | div(class="col-sm-4") 14 | label( 15 | id="loginstatus" 16 | class="text-info" 17 | ) User logged out. 18 | div(class="row") 19 | div(class="col-sm-4") 20 | input( 21 | type="text" 22 | class="form-control" 23 | placeholder="User Name" 24 | name="UserName" 25 | id="username" 26 | ) 27 | div(class="row") 28 | div(class="col-sm-4") 29 | input( 30 | type="password" 31 | class="form-control" 32 | placeholder="********" 33 | name="Password" 34 | id="password" 35 | ) 36 | div(class="row") 37 | div(class="col-sm-4") 38 | br 39 | button( 40 | type="button" 41 | class="btn btn-primary" 42 | id="login" 43 | onclick="Login()" 44 | ) Log In 45 | 46 | script. 47 | 48 | function guid() { 49 | function s4() { 50 | return Math.floor((1 + Math.random()) * 0x10000) 51 | .toString(16) 52 | .substring(1); 53 | } 54 | return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 55 | s4() + '-' + s4() + s4() + s4(); 56 | } 57 | 58 | var userNameId = guid(); 59 | var un = document.getElementById("username"); 60 | un.id = userNameId; 61 | un.value = ""; 62 | 63 | var passwordId = guid(); 64 | var pwd = document.getElementById("password"); 65 | pwd.id = passwordId; 66 | pwd.value = ""; 67 | 68 | var loggedIn = false; 69 | 70 | function Login() 71 | { 72 | var ls = document.getElementById("loginstatus"); 73 | var un = document.getElementById(userNameId); 74 | var pwd = document.getElementById(passwordId); 75 | var login = document.getElementById("login"); 76 | 77 | if (loggedIn) 78 | { 79 | ls.innerHTML = "User logged out."; 80 | ls.className = "text-info"; 81 | un.value = ""; 82 | pwd.value = ""; 83 | login.innerText = "Log In"; 84 | loggedIn = false; 85 | } 86 | else 87 | { 88 | if (pwd.value == "pwd" && un.value) 89 | { 90 | ls.innerHTML = "Welcome, " + un.value + "!"; 91 | ls.className = "text-success"; 92 | login.innerText = "Log Out"; 93 | loggedIn = true; 94 | } 95 | else 96 | { 97 | ls.innerHTML = "Invalid username/password"; 98 | ls.className = "text-danger"; 99 | un.value = ""; 100 | pwd.value = ""; 101 | } 102 | } 103 | } 104 | 105 | include footer.html 106 | -------------------------------------------------------------------------------- /views/MouseOver.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Placing mouse over an element may lead to changes in the DOM tree. For example the element may be modified or replaced. It means if you keep a reference to the original element and will try to click on it - it may not work (stale element problem). 11 | p This puzzle complicates both recording and playback of a test. 12 | 13 | h4 Scenario 14 | ul 15 | li Record 2 consecutive link clicks. 16 | li Execute the test and make sure that click count is increasing by 2. 17 | h4 Playground 18 | div 19 | p The link below will be replaced and new title assigned to it when you place mouse over it. Click on it to increase the click count. 20 | a( 21 | title="Click me" 22 | class="text-primary" 23 | onmouseenter="linkActive(this)" 24 | ) Click me 25 | div 26 | p The link above clicked 0 times. 27 | div 28 | p The link below will be replaced with identical one when you place mouse over it. Click on it to increase the click count. 29 | a( 30 | title="Link Button" 31 | class="text-primary" 32 | onmouseenter="linkButtonActive(this)" 33 | ) Link Button 34 | div 35 | p The link above clicked 0 times. 36 | 37 | script. 38 | 39 | function linkActive(el) 40 | { 41 | var newEl = el.cloneNode(true); 42 | newEl.setAttribute("title", "Active Link"); 43 | newEl.setAttribute("onmouseenter", ""); 44 | newEl.setAttribute("onmouseleave", "linkInactive(this)"); 45 | newEl.setAttribute("onclick", "linkClicked(this)") 46 | newEl.setAttribute("class", "text-warning"); 47 | 48 | var parentNode = el.parentNode; 49 | parentNode.removeChild(el); 50 | parentNode.appendChild(newEl); 51 | } 52 | 53 | function linkInactive(el) 54 | { 55 | var newEl = el.cloneNode(true); 56 | newEl.setAttribute("title", el.innerText); 57 | newEl.setAttribute("onmouseenter", "linkActive(this)"); 58 | newEl.setAttribute("onmouseleave", ""); 59 | newEl.setAttribute("onclick", "") 60 | newEl.setAttribute("class", "text-primary"); 61 | 62 | var parentNode = el.parentNode; 63 | parentNode.removeChild(el); 64 | parentNode.appendChild(newEl); 65 | } 66 | 67 | function linkClicked(el) 68 | { 69 | var badge = document.getElementById("clickCount"); 70 | badge.innerText = parseInt(badge.innerText) + 1; 71 | } 72 | 73 | function linkButtonActive(el) 74 | { 75 | var newEl = el.cloneNode(true); 76 | newEl.setAttribute("onmouseenter", ""); 77 | newEl.setAttribute("onmouseleave", "linkButtonInactive(this)"); 78 | newEl.setAttribute("onclick", "linkButtonClicked(this)") 79 | newEl.setAttribute("class", "text-warning"); 80 | 81 | var parentNode = el.parentNode; 82 | parentNode.removeChild(el); 83 | parentNode.appendChild(newEl); 84 | } 85 | 86 | function linkButtonInactive(el) 87 | { 88 | var newEl = el.cloneNode(true); 89 | newEl.setAttribute("onmouseenter", "linkButtonActive(this)"); 90 | newEl.setAttribute("onmouseleave", ""); 91 | newEl.setAttribute("onclick", "") 92 | newEl.setAttribute("class", "text-primary"); 93 | 94 | var parentNode = el.parentNode; 95 | parentNode.removeChild(el); 96 | parentNode.appendChild(newEl); 97 | } 98 | 99 | function linkButtonClicked(el) 100 | { 101 | var badge = document.getElementById("clickButtonCount"); 102 | badge.innerText = parseInt(badge.innerText) + 1; 103 | } 104 | 105 | 106 | include footer.html 107 | -------------------------------------------------------------------------------- /views/ShadowDom.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p This is a page with a Shadow DOM component guid-generator. Using it one can generate a guid and copy it to the clipboard. 11 | h4 Scenario 12 | ul 13 | li Create a test that clicks on and then on buttons. This sequence of steps generates new guid and copies it to the clipboard. 14 | li Add an assertion step to your test to compare the value from the clipboard with the value of the input field. 15 | li Then execute the test to make sure that the assertion step is not failing. 16 | h4 Playground 17 | h6 GUID Generator: 18 | guid-generator 19 | 20 | script. 21 | class GuidGenerator extends HTMLElement { 22 | constructor() { 23 | // Always call super first in constructor 24 | super(); 25 | 26 | function guid() { 27 | function s4() { 28 | return Math.floor((1 + Math.random()) * 0x10000) 29 | .toString(16) 30 | .substring(1); 31 | } 32 | return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 33 | s4() + '-' + s4() + s4() + s4(); 34 | } 35 | 36 | // Create a shadow root 37 | const shadow = this.attachShadow({mode: 'open'}); 38 | 39 | // Create spans 40 | const editField = document.createElement('input'); 41 | editField.setAttribute('class', 'edit-field'); 42 | editField.setAttribute('id', 'editField'); 43 | 44 | const buttonGenerate = document.createElement('button'); 45 | buttonGenerate.setAttribute('class', 'button-generate'); 46 | buttonGenerate.setAttribute('id', 'buttonGenerate'); 47 | buttonGenerate.onclick = function() 48 | { 49 | editField.value = guid(); 50 | } 51 | 52 | const generateIcon = document.createElement('i'); 53 | generateIcon.setAttribute('class', 'fa fa-cog'); 54 | buttonGenerate.appendChild(generateIcon); 55 | 56 | const buttonCopy = document.createElement('button'); 57 | buttonCopy.setAttribute('class', 'button-copy'); 58 | 59 | const copyIcon = document.createElement('i'); 60 | copyIcon.setAttribute('class', 'fa fa-clone'); 61 | buttonCopy.appendChild(copyIcon); 62 | buttonCopy.setAttribute('id', 'buttonCopy'); 63 | buttonCopy.onclick = function() 64 | { 65 | navigator.clipboard.writeText(editField.value).then(function() { 66 | console.log("Copied to clipboard successfully!"); 67 | }, function() { 68 | console.error("Unable to write to clipboard. :-("); 69 | }); 70 | } 71 | 72 | // Create some CSS to apply to the shadow dom 73 | const style = document.createElement('style'); 74 | style.textContent = ` 75 | .edit-field { 76 | width: 300px; 77 | } 78 | 79 | .button-generate { 80 | width: 30px; 81 | height: 20px; 82 | } 83 | 84 | .button-copy { 85 | width: 30px; 86 | height: 20px; 87 | } 88 | 89 | `; 90 | 91 | let link = document.createElement('link'); 92 | link.setAttribute('rel', 'stylesheet'); 93 | link.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); 94 | 95 | // Attach the created elements to the shadow dom 96 | shadow.appendChild(link); 97 | shadow.appendChild(style); 98 | shadow.appendChild(editField); 99 | shadow.appendChild(buttonGenerate); 100 | shadow.appendChild(buttonCopy); 101 | } 102 | } 103 | 104 | // Define the new element 105 | customElements.define('guid-generator', GuidGenerator); 106 | 107 | 108 | include footer.html 109 | -------------------------------------------------------------------------------- /views/Visibility.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Checking if element is visible on screen may be a non trivial task. 11 | ul 12 | li An element may be removed (simplest case), 13 | li it may have zero height or width, 14 | li it may be covered by another element, 15 | li it may be hidden using styles: opacity: 0, visibility: hidden, display: none, 16 | li or moved offscreen. 17 | h4 Scenario 18 | ul 19 | li Learn locators of all buttons. 20 | li In your testing scenario press Hide button. 21 | li Determine if other buttons visible or not. 22 | h4 Playground 23 | table( 24 | width="100%" 25 | border="1" 26 | ) 27 | tr 28 | td(width="25%") 29 | button( 30 | type="button" 31 | class="btn btn-primary" 32 | id="hideButton" 33 | onclick="HideButtons()" 34 | ) Hide 35 | td(width="25%") 36 | button( 37 | type="button" 38 | class="btn btn-danger" 39 | id="removedButton" 40 | ) Removed 41 | td(width="25%") 42 | button( 43 | type="button" 44 | class="btn btn-warning" 45 | id="zeroWidthButton" 46 | ) Zero Width 47 | td(width="25%") 48 | button( 49 | type="button" 50 | class="btn btn-success" 51 | id="overlappedButton" 52 | ) Overlapped 53 | div( 54 | id="hidingLayer" 55 | ) 56 | tr 57 | td(width="25%") 58 | button( 59 | type="button" 60 | class="btn btn-info" 61 | id="transparentButton" 62 | ) Opacity 0 63 | td(width="25%") 64 | button( 65 | type="button" 66 | class="btn btn-info" 67 | id="invisibleButton" 68 | ) Visibility Hidden 69 | td(width="25%") 70 | button( 71 | type="button" 72 | class="btn btn-info" 73 | id="notdisplayedButton" 74 | ) Display None 75 | td(width="25%") 76 | button( 77 | type="button" 78 | class="btn btn-info" 79 | id="offscreenButton" 80 | ) Offscreen 81 | 82 | script. 83 | function HideButtons() 84 | { 85 | // Remove button 86 | $("#removedButton").remove(); 87 | 88 | // Zero width button 89 | $("#zeroWidthButton").addClass("zerowidth"); 90 | 91 | // Button overlapped with another element 92 | $('#hidingLayer').css('position', 'absolute'); 93 | $('#hidingLayer').css('background-color', 'white'); 94 | var gb = $('#overlappedButton'); 95 | var width = gb[0].clientWidth + 2; 96 | var height = gb[0].clientHeight + 2; 97 | $('#hidingLayer').css('width', width); 98 | $('#hidingLayer').css('height', height); 99 | var left = gb.position().left; 100 | var top = gb.position().top; 101 | $('#hidingLayer').css('left', left); 102 | $('#hidingLayer').css('top', top); 103 | 104 | // Styled hidden 105 | $("#transparentButton").css("opacity", 0); 106 | $("#invisibleButton").css("visibility", "hidden"); 107 | $("#notdisplayedButton").css("display", "none"); 108 | $("#offscreenButton").addClass("offscreen"); 109 | } 110 | 111 | include footer.html 112 | 113 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const app = express() 3 | const shuffle = require('shuffle-array') 4 | 5 | function guid() { 6 | function s4() { 7 | return Math.floor((1 + Math.random()) * 0x10000) 8 | .toString(16) 9 | .substring(1); 10 | } 11 | return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 12 | s4() + '-' + s4() + s4() + s4(); 13 | } 14 | 15 | // Routing and launch 16 | app.set('view engine', 'pug') 17 | 18 | app.use('/static', express.static('static')) 19 | 20 | app.get('/', function (req, res) { 21 | res.render('Home', { 22 | title: 'UI Test Automation Playground', 23 | homeActive: true 24 | }) 25 | }) 26 | 27 | app.get('/home', function (req, res) { 28 | res.render('Home', { 29 | title: 'UI Test Automation Playground', 30 | homeActive: true 31 | }) 32 | }) 33 | 34 | app.get('/resources', function (req, res) { 35 | res.render('Resources', { 36 | title: 'Resources', 37 | resourceActive: true 38 | }) 39 | }) 40 | 41 | app.get('/dynamicid', function (req, res) { 42 | res.render('DynamicID', { 43 | title: 'Dynamic ID', 44 | buttonId: guid() 45 | }) 46 | }) 47 | 48 | app.get('/loaddelay', function (req, res) { 49 | function render() { 50 | res.render('LoadDelay', { 51 | title: 'Load Delays' 52 | }) 53 | } 54 | setTimeout(render, 5000); 55 | }) 56 | 57 | app.get('/click', function (req, res) { 58 | res.render('Click', { 59 | title: 'Click' 60 | }) 61 | }) 62 | 63 | app.get('/textinput', function (req, res) { 64 | res.render('TextInput', { 65 | title: 'Text Input' 66 | }) 67 | }) 68 | 69 | app.get('/ajax', function (req, res) { 70 | res.render('Ajax', { 71 | title: 'AJAX Data' 72 | }) 73 | }) 74 | 75 | app.get('/ajaxdata', function (req, res) { 76 | function render() { 77 | res.send('Data loaded with AJAX get request.') 78 | } 79 | setTimeout(render, 15000); 80 | }) 81 | 82 | app.get('/clientdelay', function (req, res) { 83 | res.render('ClientDelay', { 84 | title: 'Client Side Delay' 85 | }) 86 | }) 87 | 88 | app.get('/progressbar', function (req, res) { 89 | res.render('ProgressBar', { 90 | title: 'Progress Bar' 91 | }) 92 | }) 93 | 94 | app.get('/classattr', function (req, res) { 95 | 96 | var collection = ['btn-primary', 'btn-success', 'btn-warning']; 97 | shuffle(collection); 98 | 99 | res.render('ClassAttr', { 100 | title: 'Class Attribute', 101 | button1Class: collection[0], 102 | button2Class: collection[1], 103 | button3Class: collection[2] 104 | }) 105 | }) 106 | 107 | app.get('/verifytext', function (req, res) { 108 | res.render('VerifyText', { 109 | title: 'Verify Text' 110 | }) 111 | }) 112 | 113 | app.get('/hiddenlayers', function (req, res) { 114 | res.render('HiddenLayers', { 115 | title: 'Hidden Layers' 116 | }) 117 | }) 118 | 119 | app.get('/scrollbars', function (req, res) { 120 | res.render('Scrollbars', { 121 | title: 'Scrollbars' 122 | }) 123 | }) 124 | 125 | app.get('/visibility', function (req, res) { 126 | res.render('Visibility', { 127 | title: 'Visibility' 128 | }) 129 | }) 130 | 131 | app.get('/sampleapp', function (req, res) { 132 | res.render('SampleApp', { 133 | title: 'Sample App' 134 | }) 135 | }) 136 | 137 | app.get('/mouseover', function (req, res) { 138 | res.render('MouseOver', { 139 | title: 'Mouse Over' 140 | }) 141 | }) 142 | 143 | app.get('/nbsp', function (req, res) { 144 | res.render('Nbsp', { 145 | title: 'Non-Breaking Space' 146 | }) 147 | }) 148 | 149 | app.get('/overlapped', function (req, res) { 150 | res.render('Overlapped', { 151 | title: 'Overlapped Element' 152 | }) 153 | }) 154 | 155 | app.get('/shadowdom', function (req, res) { 156 | res.render('ShadowDom', { 157 | title: 'Shadow DOM' 158 | }) 159 | }) 160 | 161 | app.get('/alerts', function (req, res) { 162 | res.render('Alerts', { 163 | title: 'Alerts' 164 | }) 165 | }) 166 | 167 | app.get('/upload', function (req, res) { 168 | res.render('Upload', { 169 | title: 'File Upload' 170 | }) 171 | }) 172 | 173 | app.get('/animation', function (req, res) { 174 | res.render('Animation', { 175 | title: 'Animated Button' 176 | }) 177 | }) 178 | 179 | app.get('/disabledinput', function (req, res) { 180 | res.render('DisabledInput', { 181 | title: 'Disabled Input' 182 | }) 183 | }) 184 | 185 | app.get('/autowait', function (req, res) { 186 | res.render('AutoWait', { 187 | title: 'Auto Wait' 188 | }) 189 | }) 190 | 191 | app.get('/dynamictable', function (req, res) { 192 | 193 | function genmetric(m) 194 | { 195 | switch(m) 196 | { 197 | case "CPU": 198 | return Math.floor(Math.random()*100)/10.0 + "%"; 199 | case "Memory": 200 | return Math.floor(Math.random()*1000)/10.0 + " MB"; 201 | case "Disk": 202 | return Math.floor(Math.random()*10)/10.0 + " MB/s"; 203 | case "Network": 204 | return Math.floor(Math.random()*100)/10.0 + " Mbps"; 205 | default: 206 | } 207 | return ""; 208 | } 209 | 210 | var tasks = ["System", "Firefox", "Chrome", "Internet Explorer"]; 211 | shuffle(tasks); 212 | 213 | var metrics = ["CPU", "Memory", "Disk", "Network"]; 214 | shuffle(metrics); 215 | 216 | var rows = []; 217 | for(var t in tasks) 218 | { 219 | var row = [tasks[t]]; 220 | for(var m in metrics) 221 | { 222 | row.push(genmetric(metrics[m])); 223 | } 224 | rows.push(row); 225 | } 226 | 227 | var columns = ["Name"]; 228 | columns.push.apply(columns, metrics); 229 | 230 | var cpuColumnIndex = columns.indexOf("CPU"); 231 | var chromeRowIndex = tasks.indexOf("Chrome"); 232 | var chromeCPU = rows[chromeRowIndex][cpuColumnIndex]; 233 | 234 | var table = { 235 | name: "Tasks", 236 | desc: "Task Manager", 237 | columns: columns, 238 | rows: rows, 239 | chromeCPU: chromeCPU 240 | }; 241 | 242 | res.render('DynamicTable', { 243 | title: 'Dynamic Table', table: table 244 | }) 245 | }) 246 | 247 | const port = process.env.PORT || 3000; 248 | app.listen(port, () => console.log('UI Test Automation Playground is listening on port ' + port)) -------------------------------------------------------------------------------- /views/Home.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section(id="description") 8 | div(class="container") 9 | div(class="row") 10 | div(class="col-sm") 11 | h1(id="title") UI Test Automation
Playground 12 | blockquote( 13 | class="blockquote" 14 | id="citation" 15 | ) 16 | p(class="mb-0") Quality is not an act, it is a habit. 17 | footer(class="blockquote-footer") Aristotle 18 | div( 19 | class="alert alert-warning" 20 | role="alert" 21 | ) 22 | span The purpose of this website is to provide a platform for sharpening UI test automation skills. Use it to practice with your test automation tool. Use it to learn test automation techniques. 23 | p Different automation pitfalls appearing in modern web applications are described and emulated below. 24 | div(class="col-sm") 25 | img( 26 | src="/static/cube.png" 27 | class="img-fluid" 28 | alt="Responsive image" 29 | ) 30 | p(class="text-center") 31 | 32 | Rubik's Cube is licensed under 33 | CC 4.0 BY-NC 34 | 35 | 36 | 37 | section(id="overview") 38 | div(class="container") 39 | div(class="row") 40 | div(class="col-sm") 41 | h3 42 | a(href="/dynamicid") Dynamic ID 43 | p Make sure you are not recording dynamic IDs of elements 44 | div(class="col-sm") 45 | h3 46 | a(href="/classattr") Class Attribute 47 | p Check that class attribute based XPath is well formed 48 | div(class="col-sm") 49 | h3 50 | a(href="/hiddenlayers") Hidden Layers 51 | p Verify that your test does not interact with elements invisible because of z-order 52 | div(class="col-sm") 53 | h3 54 | a( 55 | href="/loaddelay" 56 | onclick="$('#spinner').show(); return true;" 57 | ) Load Delay 58 | i( 59 | id="spinner" 60 | class="fa fa-spinner fa-spin" 61 | style="display:none" 62 | ) 63 | p Ensure that a test is capable of waiting for a page to load 64 | div(class="row") 65 | div(class="col-sm") 66 | h3 67 | a(href="/ajax") AJAX Data 68 | p Some elements may appear on a page after loading data with AJAX request 69 | div(class="col-sm") 70 | h3 71 | a(href="/clientdelay") Client Side Delay 72 | p Some elements may appear after client-side time consuming JavaScript calculations 73 | div(class="col-sm") 74 | h3 75 | a(href="/click") Click 76 | p Event based click on an element may not always work 77 | div(class="col-sm") 78 | h3 79 | a(href="/textinput") Text Input 80 | p Entering text into an edit field may not have effect 81 | div(class="row") 82 | div(class="col-sm") 83 | h3 84 | a(href="/scrollbars") Scrollbars 85 | p Scrolling an element into view may be a tricky task 86 | div(class="col-sm") 87 | h3 88 | a(href="/dynamictable") Dynamic Table 89 | p Verify cell value in a dynamic table 90 | div(class="col-sm") 91 | h3 92 | a(href="/verifytext") Verify Text 93 | p Finding an element by displayed text has nuances 94 | div(class="col-sm") 95 | h3 96 | a(href="/progressbar") Progress Bar 97 | p Follow the progress of a lengthy process and continue upon completion 98 | div(class="row") 99 | div(class="col-sm") 100 | h3 101 | a(href="/visibility") Visibility 102 | p Check if element is visible on screen 103 | div(class="col-sm") 104 | h3 105 | a(href="/sampleapp") Sample App 106 | p Demo application with dynamically generated element attributes 107 | div(class="col-sm") 108 | h3 109 | a(href="/mouseover") Mouse Over 110 | p Placing mouse over an element may change DOM and make the element unavailable 111 | div(class="col-sm") 112 | h3 113 | a(href="/nbsp") Non-Breaking Space 114 | p Non-breaking space looks like a normal one on screen. It may lead to confusion when building XPath 115 | div(class="row") 116 | div(class="col-sm") 117 | h3 118 | a(href="/overlapped") Overlapped Element 119 | p Make element visible to enter text 120 | div(class="col-sm") 121 | h3 122 | a(href="/shadowdom") Shadow DOM 123 | p Look inside Shadow DOM component 124 | div(class="col-sm") 125 | h3 126 | a(href="/alerts") Alerts 127 | p Accept alerts, confirmations and prompts 128 | div(class="col-sm") 129 | h3 130 | a(href="/upload") File Upload 131 | p Upload files 132 | div(class="row") 133 | div(class="col-sm") 134 | h3 135 | a(href="/animation") Animated Button 136 | p Wait for animation to stop before clicking a button 137 | div(class="col-sm") 138 | h3 139 | a(href="/disabledinput") Disabled Input 140 | p Wait for edit field to become enabled 141 | div(class="col-sm") 142 | h3 143 | a(href="/autowait") Auto Wait 144 | p Wait for an element to become interactable 145 | div(class="col-sm") 146 | p 147 | include footer.html -------------------------------------------------------------------------------- /static/prism.js: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.15.0 2 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){if(m&&b!=t.length-1){h.lastIndex=k;var _=h.exec(e);if(!_)break;for(var j=_.index+(d?_[1].length:0),P=_.index+_[0].length,A=b,x=k,O=t.length;O>A&&(P>x||!t[A].type&&!t[A-1].greedy);++A)x+=t[A].length,j>=x&&(++b,k=x);if(t[b]instanceof s)continue;I=A-b,w=e.slice(k,x),_.index-=k}else{h.lastIndex=0;var _=h.exec(w),I=1}if(_){d&&(p=_[1]?_[1].length:0);var j=_.index+p,_=_[0].slice(p),P=j+_.length,N=w.slice(0,j),S=w.slice(P),C=[b,I];N&&(++b,k+=N.length,C.push(N));var E=new s(u,f?n.tokenize(_,f):_,y,_,m);if(C.push(E),S&&C.push(S),Array.prototype.splice.apply(t,C),1!=I&&n.matchGrammar(e,t,r,b,k,!0,u),i)break}else if(i)break}}}}},tokenize:function(e,t){var r=[e],a=t.rest;if(a){for(var l in a)t[l]=a[l];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var r=n.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=n.hooks.all[e];if(r&&r.length)for(var a,l=0;a=r[l++];)a(t)}}},r=n.Token=function(e,t,n,r,a){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length,this.greedy=!!a};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return r.stringify(n,t,e)}).join("");var l={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+""},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),r=t.language,a=t.code,l=t.immediateClose;_self.postMessage(n.highlight(a,n.languages[r],r)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return a&&(n.filename=a.src,n.manual||a.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); 4 | Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; 5 | Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url$(?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)$/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.languages.css,Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); 6 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; 7 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,"function":/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*$)/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*$|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"},constant:/\b[A-Z][A-Z\d_]*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}}}),Prism.languages.javascript["template-string"].inside.interpolation.inside.rest=Prism.languages.javascript,Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript; 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2018 Inflectra Corporation. All rights reserved. 2 | 3 | Apache License 4 | Version 2.0, January 2004 5 | http://www.apache.org/licenses/ 6 | 7 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 8 | 9 | 1. Definitions. 10 | 11 | "License" shall mean the terms and conditions for use, reproduction, 12 | and distribution as defined by Sections 1 through 9 of this document. 13 | 14 | "Licensor" shall mean the copyright owner or entity authorized by 15 | the copyright owner that is granting the License. 16 | 17 | "Legal Entity" shall mean the union of the acting entity and all 18 | other entities that control, are controlled by, or are under common 19 | control with that entity. For the purposes of this definition, 20 | "control" means (i) the power, direct or indirect, to cause the 21 | direction or management of such entity, whether by contract or 22 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 23 | outstanding shares, or (iii) beneficial ownership of such entity. 24 | 25 | "You" (or "Your") shall mean an individual or Legal Entity 26 | exercising permissions granted by this License. 27 | 28 | "Source" form shall mean the preferred form for making modifications, 29 | including but not limited to software source code, documentation 30 | source, and configuration files. 31 | 32 | "Object" form shall mean any form resulting from mechanical 33 | transformation or translation of a Source form, including but 34 | not limited to compiled object code, generated documentation, 35 | and conversions to other media types. 36 | 37 | "Work" shall mean the work of authorship, whether in Source or 38 | Object form, made available under the License, as indicated by a 39 | copyright notice that is included in or attached to the work 40 | (an example is provided in the Appendix below). 41 | 42 | "Derivative Works" shall mean any work, whether in Source or Object 43 | form, that is based on (or derived from) the Work and for which the 44 | editorial revisions, annotations, elaborations, or other modifications 45 | represent, as a whole, an original work of authorship. For the purposes 46 | of this License, Derivative Works shall not include works that remain 47 | separable from, or merely link (or bind by name) to the interfaces of, 48 | the Work and Derivative Works thereof. 49 | 50 | "Contribution" shall mean any work of authorship, including 51 | the original version of the Work and any modifications or additions 52 | to that Work or Derivative Works thereof, that is intentionally 53 | submitted to Licensor for inclusion in the Work by the copyright owner 54 | or by an individual or Legal Entity authorized to submit on behalf of 55 | the copyright owner. For the purposes of this definition, "submitted" 56 | means any form of electronic, verbal, or written communication sent 57 | to the Licensor or its representatives, including but not limited to 58 | communication on electronic mailing lists, source code control systems, 59 | and issue tracking systems that are managed by, or on behalf of, the 60 | Licensor for the purpose of discussing and improving the Work, but 61 | excluding communication that is conspicuously marked or otherwise 62 | designated in writing by the copyright owner as "Not a Contribution." 63 | 64 | "Contributor" shall mean Licensor and any individual or Legal Entity 65 | on behalf of whom a Contribution has been received by Licensor and 66 | subsequently incorporated within the Work. 67 | 68 | 2. Grant of Copyright License. Subject to the terms and conditions of 69 | this License, each Contributor hereby grants to You a perpetual, 70 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 71 | copyright license to reproduce, prepare Derivative Works of, 72 | publicly display, publicly perform, sublicense, and distribute the 73 | Work and such Derivative Works in Source or Object form. 74 | 75 | 3. Grant of Patent License. Subject to the terms and conditions of 76 | this License, each Contributor hereby grants to You a perpetual, 77 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 78 | (except as stated in this section) patent license to make, have made, 79 | use, offer to sell, sell, import, and otherwise transfer the Work, 80 | where such license applies only to those patent claims licensable 81 | by such Contributor that are necessarily infringed by their 82 | Contribution(s) alone or by combination of their Contribution(s) 83 | with the Work to which such Contribution(s) was submitted. If You 84 | institute patent litigation against any entity (including a 85 | cross-claim or counterclaim in a lawsuit) alleging that the Work 86 | or a Contribution incorporated within the Work constitutes direct 87 | or contributory patent infringement, then any patent licenses 88 | granted to You under this License for that Work shall terminate 89 | as of the date such litigation is filed. 90 | 91 | 4. Redistribution. You may reproduce and distribute copies of the 92 | Work or Derivative Works thereof in any medium, with or without 93 | modifications, and in Source or Object form, provided that You 94 | meet the following conditions: 95 | 96 | (a) You must give any other recipients of the Work or 97 | Derivative Works a copy of this License; and 98 | 99 | (b) You must cause any modified files to carry prominent notices 100 | stating that You changed the files; and 101 | 102 | (c) You must retain, in the Source form of any Derivative Works 103 | that You distribute, all copyright, patent, trademark, and 104 | attribution notices from the Source form of the Work, 105 | excluding those notices that do not pertain to any part of 106 | the Derivative Works; and 107 | 108 | (d) If the Work includes a "NOTICE" text file as part of its 109 | distribution, then any Derivative Works that You distribute must 110 | include a readable copy of the attribution notices contained 111 | within such NOTICE file, excluding those notices that do not 112 | pertain to any part of the Derivative Works, in at least one 113 | of the following places: within a NOTICE text file distributed 114 | as part of the Derivative Works; within the Source form or 115 | documentation, if provided along with the Derivative Works; or, 116 | within a display generated by the Derivative Works, if and 117 | wherever such third-party notices normally appear. The contents 118 | of the NOTICE file are for informational purposes only and 119 | do not modify the License. You may add Your own attribution 120 | notices within Derivative Works that You distribute, alongside 121 | or as an addendum to the NOTICE text from the Work, provided 122 | that such additional attribution notices cannot be construed 123 | as modifying the License. 124 | 125 | You may add Your own copyright statement to Your modifications and 126 | may provide additional or different license terms and conditions 127 | for use, reproduction, or distribution of Your modifications, or 128 | for any such Derivative Works as a whole, provided Your use, 129 | reproduction, and distribution of the Work otherwise complies with 130 | the conditions stated in this License. 131 | 132 | 5. Submission of Contributions. Unless You explicitly state otherwise, 133 | any Contribution intentionally submitted for inclusion in the Work 134 | by You to the Licensor shall be under the terms and conditions of 135 | this License, without any additional terms or conditions. 136 | Notwithstanding the above, nothing herein shall supersede or modify 137 | the terms of any separate license agreement you may have executed 138 | with Licensor regarding such Contributions. 139 | 140 | 6. Trademarks. This License does not grant permission to use the trade 141 | names, trademarks, service marks, or product names of the Licensor, 142 | except as required for reasonable and customary use in describing the 143 | origin of the Work and reproducing the content of the NOTICE file. 144 | 145 | 7. Disclaimer of Warranty. Unless required by applicable law or 146 | agreed to in writing, Licensor provides the Work (and each 147 | Contributor provides its Contributions) on an "AS IS" BASIS, 148 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 149 | implied, including, without limitation, any warranties or conditions 150 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 151 | PARTICULAR PURPOSE. You are solely responsible for determining the 152 | appropriateness of using or redistributing the Work and assume any 153 | risks associated with Your exercise of permissions under this License. 154 | 155 | 8. Limitation of Liability. In no event and under no legal theory, 156 | whether in tort (including negligence), contract, or otherwise, 157 | unless required by applicable law (such as deliberate and grossly 158 | negligent acts) or agreed to in writing, shall any Contributor be 159 | liable to You for damages, including any direct, indirect, special, 160 | incidental, or consequential damages of any character arising as a 161 | result of this License or out of the use or inability to use the 162 | Work (including but not limited to damages for loss of goodwill, 163 | work stoppage, computer failure or malfunction, or any and all 164 | other commercial damages or losses), even if such Contributor 165 | has been advised of the possibility of such damages. 166 | 167 | 9. Accepting Warranty or Additional Liability. While redistributing 168 | the Work or Derivative Works thereof, You may choose to offer, 169 | and charge a fee for, acceptance of support, warranty, indemnity, 170 | or other liability obligations and/or rights consistent with this 171 | License. However, in accepting such obligations, You may act only 172 | on Your own behalf and on Your sole responsibility, not on behalf 173 | of any other Contributor, and only if You agree to indemnify, 174 | defend, and hold each Contributor harmless for any liability 175 | incurred by, or claims asserted against, such Contributor by reason 176 | of your accepting any such warranty or additional liability. 177 | 178 | END OF TERMS AND CONDITIONS 179 | 180 | APPENDIX: How to apply the Apache License to your work. 181 | 182 | To apply the Apache License to your work, attach the following 183 | boilerplate notice, with the fields enclosed by brackets "[]" 184 | replaced with your own identifying information. (Don't include 185 | the brackets!) The text should be enclosed in the appropriate 186 | comment syntax for the file format. We also recommend that a 187 | file or class name and description of purpose be included on the 188 | same "printed page" as the copyright notice for easier 189 | identification within third-party archives. 190 | 191 | Copyright 2017, The TensorFlow Authors. 192 | 193 | Licensed under the Apache License, Version 2.0 (the "License"); 194 | you may not use this file except in compliance with the License. 195 | You may obtain a copy of the License at 196 | 197 | http://www.apache.org/licenses/LICENSE-2.0 198 | 199 | Unless required by applicable law or agreed to in writing, software 200 | distributed under the License is distributed on an "AS IS" BASIS, 201 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 202 | See the License for the specific language governing permissions and 203 | limitations under the License. -------------------------------------------------------------------------------- /views/AutoWait.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | include head.pug 4 | body 5 | include navbar.pug 6 | 7 | section 8 | div(class="container") 9 | h3=title 10 | p Before clicking an element or entering text we may need to wait until the element becomes interactable. 11 | h4 Scenario 12 | ul 13 | li Choose an element type from the combobox. 14 | li Check the checkboxes to set the element's properties. 15 | li Then click one of the Apply buttons to immediately apply the settings and restore interactable state of the element after a delay. 16 | li Interact with the element in the Playground section (click, select item, enter text). 17 | li Observe the status messages. 18 | div.row 19 | div.col-6 20 | h4 Settings 21 | form 22 | // ComboBox 23 | div(class="mb-3") 24 | label(for="element-type" class="form-label") Choose an element type: 25 | select(id="element-type" name="element-type" class="form-select") 26 | option(value="button") Button 27 | option(value="input") Input 28 | option(value="textarea") Textarea 29 | option(value="select") Select 30 | option(value="label") Label 31 | 32 | // Checkboxes (No bullets in the list) 33 | ul(class="list-unstyled indented-right") 34 | li(class="form-check") 35 | input(type="checkbox" id="visible" name="visible" class="form-check-input" checked) 36 | label(for="visible" class="form-check-label") Visible 37 | li(class="form-check") 38 | input(type="checkbox" id="enabled" name="enabled" class="form-check-input" checked) 39 | label(for="enabled" class="form-check-label") Enabled 40 | li(class="form-check") 41 | input(type="checkbox" id="editable" name="editable" class="form-check-input" checked) 42 | label(for="editable" class="form-check-label") Editable 43 | li(class="form-check") 44 | input(type="checkbox" id="ontop" name="ontop" class="form-check-input" checked) 45 | label(for="ontop" class="form-check-label") On Top 46 | li(class="form-check") 47 | input(type="checkbox" id="nonzero" name="nonzero" class="form-check-input" checked) 48 | label(for="nonzero" class="form-check-label") Non Zero Size 49 | button( 50 | id="applyButton3" 51 | type="button" 52 | class="btn btn-secondary" 53 | onclick="applySettings(3)" 54 | ) Apply 3s 55 | span 56 | button( 57 | id="applyButton5" 58 | type="button" 59 | class="btn btn-secondary" 60 | onclick="applySettings(5)" 61 | ) Apply 5s 62 | span 63 | button( 64 | id="applyButton10" 65 | type="button" 66 | class="btn btn-secondary" 67 | onclick="applySettings(10)" 68 | ) Apply 10s 69 | div.col-6 70 | h4 Playground 71 | div(id="element-container") 72 | button( 73 | id="target" 74 | type="button" 75 | class="btn btn-primary" 76 | onclick="targetClicked()" 77 | ) Button 78 | div( 79 | id="opstatus" 80 | ) --- 81 | 82 | script. 83 | var options = { 84 | visible: true, 85 | enabled: true, 86 | editable: true, 87 | ontop: true 88 | }; 89 | 90 | // Process checkbox clicks 91 | document.querySelectorAll('.form-check-input').forEach(checkbox => { 92 | checkbox.addEventListener('change', function() { 93 | console.log(this.id + ' checkbox clicked. Checked: ' + this.checked); 94 | options[this.id] = this.checked; 95 | }); 96 | }); 97 | 98 | // Handle combobox change and check all checkboxes 99 | document.getElementById('element-type').addEventListener('change', function() { 100 | console.log('Combobox selection changed. Checking all checkboxes.'); 101 | document.querySelectorAll('.form-check-input').forEach(checkbox => { 102 | checkbox.checked = true; 103 | options[checkbox.id] = true; 104 | }); 105 | 106 | var parentElement = document.getElementById('element-container'); 107 | var childElement = document.getElementById('target'); 108 | parentElement.removeChild(childElement); 109 | 110 | if (this.value == "input") 111 | { 112 | var input = document.createElement('input'); 113 | input.type = 'text'; 114 | input.id = 'target'; 115 | input.className = 'form-control'; 116 | input.onclick = targetClicked; 117 | parentElement.appendChild(input); 118 | input.addEventListener('change', function(event) { 119 | setStatus("Text: " + this.value); 120 | }); 121 | } 122 | else if (this.value == "textarea") 123 | { 124 | var textarea = document.createElement('textarea'); 125 | textarea.id = 'target'; 126 | textarea.className = 'form-control'; 127 | textarea.onclick = targetClicked; 128 | parentElement.appendChild(textarea); 129 | textarea.addEventListener('change', function(event) { 130 | setStatus("Text: " + this.value); 131 | }); 132 | } 133 | else if (this.value == "select") 134 | { 135 | var select = document.createElement('select'); 136 | select.id = 'target'; 137 | select.className = 'form-select'; 138 | var optionItems = ['Item 1', 'Item 2', 'Item 3']; 139 | optionItems.forEach(function(item) { 140 | var option = document.createElement('option'); 141 | option.value = item; 142 | option.textContent = item; 143 | select.appendChild(option); 144 | }); 145 | parentElement.appendChild(select); 146 | select.addEventListener('change', function(event) { 147 | setStatus("Selected: " + this.value); 148 | }); 149 | select.addEventListener('click', function(event) { 150 | if (event.detail == 1) 151 | { 152 | setStatus("Target clicked."); 153 | } 154 | }); 155 | } 156 | else if (this.value == "label") 157 | { 158 | var label = document.createElement('label'); 159 | label.id = 'target'; 160 | label.className = 'form-label'; 161 | label.onclick = targetClicked; 162 | label.innerHTML = "This is a Label"; 163 | parentElement.appendChild(label); 164 | } 165 | else 166 | { 167 | var button = document.createElement('button'); 168 | button.id = 'target'; 169 | button.className = 'btn btn-primary'; 170 | button.onclick = targetClicked; 171 | button.innerHTML = 'Button'; 172 | parentElement.appendChild(button); 173 | } 174 | setStatus(""); 175 | }); 176 | 177 | var lastWidth; 178 | var lastHeight; 179 | var lastPadding; 180 | var lastBorder; 181 | 182 | function applyOptions() 183 | { 184 | var element = document.getElementById('target'); 185 | element.style.visibility = options.visible ? 'visible' : 'hidden'; 186 | if (element.tagName != 'LABEL') 187 | { 188 | element.disabled = !options.enabled; 189 | } 190 | if (element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') 191 | { 192 | element.readOnly = !options.editable; 193 | } 194 | 195 | if (!options.ontop) 196 | { 197 | createOverlayElement(); 198 | } 199 | else 200 | { 201 | deleteOverlayElement(); 202 | } 203 | 204 | if (!options.nonzero) 205 | { 206 | const computedStyle = window.getComputedStyle(element); 207 | lastWidth = computedStyle.width; 208 | lastHeight = computedStyle.height; 209 | lastPadding = computedStyle.padding; 210 | lastBorder = computedStyle.border; 211 | element.style.width = "0px"; 212 | element.style.height = "0px"; 213 | element.style.padding = "0px"; 214 | element.style.border = "none"; 215 | if (element.tagName == 'LABEL') 216 | { 217 | element.style.overflow = 'hidden'; 218 | } 219 | else if (element.tagName == 'BUTTON') 220 | { 221 | element.style.pointerEvents = 'none'; 222 | } 223 | } 224 | else 225 | { 226 | if (element.style.width == "0px") 227 | { 228 | element.style.width = lastWidth; 229 | element.style.height = lastHeight; 230 | element.style.padding = lastPadding; 231 | element.style.border = lastBorder; 232 | if (element.tagName == 'LABEL') 233 | { 234 | element.style.overflow = 'auto'; 235 | } 236 | else if (element.tagName == 'BUTTON') 237 | { 238 | element.style.pointerEvents = 'auto'; 239 | } 240 | } 241 | } 242 | } 243 | 244 | function applySettings(timeout) 245 | { 246 | setStatus(`Target element settings applied for ${timeout} seconds.`); 247 | applyOptions(); 248 | 249 | setTimeout(function() { 250 | 251 | setStatus("Target element state restored."); 252 | document.querySelectorAll('.form-check-input').forEach(checkbox => { 253 | checkbox.checked = true; 254 | options[checkbox.id] = true; 255 | }); 256 | applyOptions(); 257 | }, timeout * 1000); 258 | } 259 | 260 | function createOverlayElement() 261 | { 262 | var targetElement = document.getElementById('target'); 263 | var targetRect = targetElement.getBoundingClientRect(); 264 | var overlayElement = document.createElement('div'); 265 | 266 | overlayElement.id = 'overlay'; 267 | 268 | overlayElement.style.position = 'absolute'; 269 | overlayElement.style.top = targetRect.top + 'px'; 270 | overlayElement.style.left = targetRect.left + 'px'; 271 | overlayElement.style.width = targetRect.width + 'px'; 272 | overlayElement.style.height = targetRect.height + 'px'; 273 | 274 | overlayElement.style.zIndex = '1000'; // Higher than the target's z-index 275 | overlayElement.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; // Semi-transparent red 276 | 277 | document.body.appendChild(overlayElement); 278 | } 279 | 280 | function deleteOverlayElement() 281 | { 282 | var overlayElement = document.getElementById('overlay'); 283 | if (overlayElement) 284 | { 285 | overlayElement.remove(); 286 | } 287 | } 288 | 289 | function targetClicked() 290 | { 291 | setStatus("Target clicked."); 292 | } 293 | 294 | include footer.html 295 | 296 | --------------------------------------------------------------------------------