-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
36 lines (36 loc) · 5.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"><title>User-Routine Demo</title><script defer="defer" src="main.js"></script></head><body><main><header><h1><i>User-Routine</i> Demo</h1><h3>About</h3><p data-fill-description>User-Routine is a JavaScript library to automate user routines on web pages. You can easily test features or create tutorials with actions such as click, await, and fill.</p><h3>Links</h3><nav><a href="https://github.com/CoryLR/user-routine#readme" target="_blank">Documentation</a> <a href="https://www.npmjs.com/package/user-routine" target="_blank">NPM</a> <a href="https://github.com/CoryLR/user-routine/blob/main/dist/user-routine.template.js" target="_blank">Template</a></nav></header><h3 id="demos">Demos</h3><section data-fill-tests class="code-carousel" data-flickity='{ "contain": true, "hash": true }'><figure id="test-a-feature"><div class="code-card" data-card-id="0"><div class="code-card-header">Test a Feature</div><pre><code class="hljs language-javascript">userRoutine([
'fill input.text Hey',
'fill input.count 3',
'click button.duplicate',
'exists .output Hey Hey Hey',
'log Done!',
], { message: 'Test a Feature' });</code></pre><div class="buttons"><button class="run"><i class="fa-solid fa-play"></i> Run</button> <button class="copy-code" title="Copy Code"><i class="fa-regular fa-copy"></i></button> <button class="copy-link" title="Copy Link"><i class="fa-solid fa-link"></i></button></div></div></figure><figure id="display-a-tutorial"><div class="code-card" data-card-id="1"><div class="code-card-header">Display a Tutorial</div><pre><code class="hljs language-javascript">userRoutine([
'log Welcome to the demo',
'comment .code-carousel Examples',
'comment nav Links to docs & more',
], {
message: 'Display a Tutorial',
tutorialMode: true,
});</code></pre><div class="buttons"><button class="run"><i class="fa-solid fa-play"></i> Run</button> <button class="copy-code" title="Copy Code"><i class="fa-regular fa-copy"></i></button> <button class="copy-link" title="Copy Link"><i class="fa-solid fa-link"></i></button></div></div></figure><figure id="await-a-process"><div class="code-card" data-card-id="2"><div class="code-card-header">Await a Process</div><pre><code class="hljs language-javascript">userRoutine([
'click button Long process',
'await .result process complete',
], { message: 'Await a Process' });</code></pre><div class="buttons"><button class="run"><i class="fa-solid fa-play"></i> Run</button> <button class="copy-code" title="Copy Code"><i class="fa-regular fa-copy"></i></button> <button class="copy-link" title="Copy Link"><i class="fa-solid fa-link"></i></button></div></div></figure><figure id="verify-content"><div class="code-card" data-card-id="3"><div class="code-card-header">Verify Content</div><pre><code class="hljs language-javascript">userRoutine([
'exists nav documentation',
'!exist nav Rick Astley',
'fill .text Bluebird',
'value input.text Bluebird',
'!value input.text Crow',
], { message: 'Verify Content' });</code></pre><div class="buttons"><button class="run"><i class="fa-solid fa-play"></i> Run</button> <button class="copy-code" title="Copy Code"><i class="fa-regular fa-copy"></i></button> <button class="copy-link" title="Copy Link"><i class="fa-solid fa-link"></i></button></div></div></figure><figure id="navigate-with-hash-links"><div class="code-card" data-card-id="4"><div class="code-card-header">Navigate With Hash-Links</div><pre><code class="hljs language-javascript">userRoutine([
'nav #bottom',
'nav #',
'nav #demos',
], {
message: 'Navigate With Hash-Links'
});</code></pre><div class="buttons"><button class="run"><i class="fa-solid fa-play"></i> Run</button> <button class="copy-code" title="Copy Code"><i class="fa-regular fa-copy"></i></button> <button class="copy-link" title="Copy Link"><i class="fa-solid fa-link"></i></button></div></div></figure><figure id="examples-of-failure"><div class="code-card" data-card-id="5"><div class="code-card-header">Examples of Failure</div><pre><code class="hljs language-javascript">userRoutine([
'click .does-not-exist',
'value .count fake-number',
'exists nav>>button Fake Link',
], {
message: 'Examples of Failure',
continueOnFailure: true,
});</code></pre><div class="buttons"><button class="run"><i class="fa-solid fa-play"></i> Run</button> <button class="copy-code" title="Copy Code"><i class="fa-regular fa-copy"></i></button> <button class="copy-link" title="Copy Link"><i class="fa-solid fa-link"></i></button></div></div></figure></section><br><section class="mock-app"><h3>Mock Applications</h3><p>These are functional mini-apps for use by the demos above. You can use them too if you want.</p><div class="mock-app-columns"><div class="code-card"><div class="code-card-header">Text Duplicator</div><div class="code-card-content"><div class="code-card-inputs"><label>Text to duplicate</label> <input class="text"> <label>Number of times</label> <input type="number" class="count" min="0" max="99"> <button class="duplicate">Duplicate</button></div><pre class="output"></pre></div></div><div class="code-card"><div class="code-card-header">Long Process Simulator</div><div class="code-card-content"><div class="code-card-inputs"><p>Simulate a long process 🕑</p><button class="process">Start Long Process</button></div><div class="result"></div></div></div></div></section><br><br><br><br id="bottom"></main></body></html>