-
Notifications
You must be signed in to change notification settings - Fork 24
/
index.html
122 lines (105 loc) · 6.04 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Form auto-completion tool</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="./assets/demo.css" />
<link rel="publisher" href="https://plus.google.com/113857365337532405020" />
<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="icon" href="./favicon.ico" type="image/ico" />
<link rel="demo" href="http://demo.dsheiko.com/sharebar" title="Form auto-completion tool" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!------ Check if browser isn't too old -->
<!--[if lt IE 7]><p class="chromeframe">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<!------ Check if JavaScript is enabled -->
<p id="js-disabled" class="chromeframe"><strong>JavaScript is disabled!</strong> To display this content, you need a JavaScript capable browser.</p>
<script>
(function( window ){
var el = window.document.getElementById( "js-disabled" );
el.parentNode.removeChild( el );
}( window ))
</script>
<header role="banner">
<div>
<hgroup>
<h1>Form auto-completion tool</h1>
</hgroup>
<a class="fork" href="https://github.com/dsheiko/autofill.git">Fork Me on GitHub</a>
</div>
</header>
<section role="main">
<div>
<aside>
Drag this to Bookmarks Bar
<a href="javascript: var title=window.location.href;if (title.indexOf('http://demo.dsheiko.com/autofill')=== 0){'<head><link rel=\'shortcut icon\' href=\'http://demo.dsheiko.com/autofill/favicon.ico\'></head>Bookmarklet';}else{(function(){s=document.createElement('script');s.type='text/javascript';s.src='http://demo.dsheiko.com/autofill/src/autofill.js?v='+parseInt(Math.random()*99999999);document.body.appendChild(s);void(0);})();}">AutoFill</a>
</aside>
<article>
<p>When testing a web-site, nevermind who you are developer or QA-engineer, it happens to you pretty often to fill-in form fields again and again. Boring, stupid work, but how to make sure the form does still work as intended? Some fields added, CAPTCHA was attached, whatever else done –you have to run the test again. Besides, it will be repeated on different browsers. Browser form auto-completion feature helps a bit, but that is not the same as when you have various sets of test-data always ready to apply on a form, isn’t it?</p>
<p>Well, what I propose is a very simple tool which you can use anywhere for form testing. You need to take this JS code and fill it once with your own test data:</p>
<textarea class="code" rows="35">
(function( window ) {
var document = window.document,
fieldValueMap = {
'title' : 'Ms.'
, 'name' : 'JonSnow'
, 'fillname' : 'Jon Snow'
, 'firstname' : 'Jon'
, 'lastname' : 'Snow'
, 'email' : '[email protected]'
, 'username' : 'Stark'
, 'password' : 'wintercomes'
, 'confirmation' : 'wintercomes'
, 'position' : 'Lord Commander'
, 'zipcode' : 'wintercomes'
, 'country' : 'Westeros'
, 'city' : 'The Wall'
, 'company' : 'Night Watch'
, 'address' : 'The Black Tower'
, 'phone' : 777777
, 'nationality' : 'Westerosi'
, 'comment' : 'This is a test data. Please, ignore it.'
, 'jobtitle' : 'Crow'
, 'experiance' : 'Veteran (5+)'
, 'site_link' : 'jon.winterfell.we'
, 'how' : 'other (Please specify)'
, 'specified' : 'This is a test data. Please, ignore it.'
};
Object.keys( fieldValueMap ).forEach(function( name ){
var input = document.querySelector( "form input[name=" + name + "]" )
|| document.querySelector( "form textarea[name=" + name + "]" );
input && ( input.value = fieldValueMap[ name ] );
});
})( window );
</textarea>
<p>Let’s make a bookmaklet out of it. Create an HTML file and put there the link:</p>
<textarea class="code" rows="3">
<a href="javascript:(function(){s=document.createElement('script');s.type='text/javascript';s.src='http://demo.dsheiko.com/autofill/src/autofill.js?v='+parseInt(Math.random()*99999999);document.body.appendChild(s);})();">AutoFill</a>
</textarea>
</article>
<div class="download">
<a class="btn btn-inverse btn-large" href="https://github.com/dsheiko/autofill.git">Download the latest version from GitHub</a>
</div>
</div>
</section>
<footer>
<article>
<p><var>autofill.js</var> is created by <a href="http://dsheiko.com">Dmitry Sheiko</a>.
It's released under the MIT license. </p>
<p>If you have any questions or feedback you can use the <a href="https://github.com/dsheiko/autofill.git">github project page.</a>
</p>
</article>
</footer>
<script type="text/javascript" src="./src/autofill.js"></script>
</body>
</html>