webdriverjs
Version:
A nodejs bindings implementation for selenium 2.0/webdriver
175 lines (152 loc) • 6.48 kB
HTML
<html>
<head>
<title>WebdriverJS Testpage</title>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1>WebdriverJS Testpage</h1>
<a href="gestureTest.html">2</a>
<a href="index.html">1</a>
</header>
<section class="page">
<h1>Test CSS Attributes</h1>
<a href="./two.html" id="secondPageLink">two</a>
<a href="https://github.com" id="githubRepo" class="clearfix" data-foundBy="link text">GitHub Repo</a>
<a href="./two.html" target="_blank" id="newWindow" data-foundBy="partial link text">open new tab</a>
<hr>
<div class="box red" data-foundBy="css selector"></div>
<div class="box green"></div>
<div class="box yellow"></div>
<div class="box black"></div>
<div class="box purple" id="purplebox" data-foundBy="id"></div>
<div class="nested" style="text-transform: uppercase">
<h2>nested elements</h2>
<div>
<span data-foundBy="xpath">nested span</span>
</div>
</div>
<hr>
<button class="btn1">Klick #1</button>
<div class="btn1_clicked">Button #1 clicked</div>
<div class="btn1_middle_clicked">Button #1 middle-clicked</div>
<div class="btn1_right_clicked">Button #1 right-clicked</div>
<div class="btn1_dblclicked">Button #1 dblclicked</div>
<button class="btn2" disabled="">Klick #2</button>
<div class="btn2_clicked">Button #2 clicked</div>
<div class="btn2_dblclicked">Button #2 dblclicked</div>
<div class="overlay" id="overlay"> </div>
<button class="btn3">Klick #3</button>
<div class="btn3_clicked">Button #3 clicked</div>
<div class="btn3_dblclicked">Button #3 dblclicked</div>
<button style="height: 1px; width:1px; border:0;" class="btn4">Klick #4</button>
<div class="btn4_clicked">Button #4 clicked</div>
<div class="btn4_dblclicked">Button #4 dblclicked</div>
<hr>
<input type="search" class="searchinput" name="searchinput" data-foundBy="name">
<hr>
<form method="GET" action="index.html" class="send">
<input name="a" value="a">
<input name="b" value="b">
<input name="c" value="c">
<input type="file" id="upload-test">
<input type="submit" value="send" class="sendBtn">
</form>
<script>
if (qry('a') === 'a') {
document.write('<div class="gotDataA">got data from input[name="a"]</div>')
}
if (qry('b') === 'b') {
document.write('<div class="gotDataB">got data from input[name="b"]</div>')
}
if (qry('c') === 'c') {
document.write('<div class="gotDataC">got data from input[name="c"]</div>')
}
function qry(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', variable);
}
</script>
<textarea cols="30" rows="10" data-foundBy="tag name"></textarea>
<span class="hidden-text">Eventually visible text</span>
<span class="visible-text">Eventually hidden text</span>
</body></html>
</section>
<script src="components/jquery/jquery.min.js"></script>
<script src="components/hammerjs/hammer.js"></script>
<script src="components/hammerjs/plugins/hammer.showtouches.js"></script>
<script src="components/jquery-ui/ui/jquery-ui.js"></script>
<script>
$('.btn1')
.mousedown(function(e) {
switch(e.which) {
case 1:
$('.btn1_clicked').css('display','block');
break;
case 2:
$('.btn1_middle_clicked').css('display','block');
break;
case 3:
$('.btn1_right_clicked').css('display','block');
break;
}
return false;
})
.contextmenu(function() {
console.info('on contextmenu');
return false;
});
$('.btn2').click(function() {
$('.btn2_clicked').css('display','block');
});
$('.btn3').click(function() {
$('.btn3_clicked').css('display','block');
});
$('.btn4').click(function() {
$('.btn4_clicked').css('display','block');
});
$('.btn1').dblclick(function() {
$('.btn1_dblclicked').css('display','block');
});
$('.btn2').dblclick(function() {
$('.btn2_dblclicked').css('display','block');
});
$('.btn3').dblclick(function() {
$('.btn3_dblclicked').css('display','block');
});
$('.btn4').dblclick(function() {
$('.btn4_dblclicked').css('display','block');
});
$('#overlay').click(function() {
console.log('overlay was just clicked');
});
$("#overlay,[data-foundBy=\"xpath\"]").draggable();
$(".red,h2").droppable({
drop: function( event, ui ) {
$('.searchinput').val( "Dropped!" );
}
});
setTimeout(function() {
var newElement = $('<div />').addClass('lateElem').html('Sorry, I\'m late!');
$('body').append(newElement);
},3000);
// Hammer(document.body).on('tap', function(e) {
// $('<div />').css('width',10).css('height',10).css('background','red')
// .css('position','absolute').css('left',e.gesture.center.pageX - 5)
// .css('top',e.gesture.center.pageY - 5).appendTo('body')
// .html(e.gesture.center.pageX + ' - ' + e.gesture.center.pageY + ', ' + $('.btn1').width() + ' - ' + $('.btn1').height());
// })
</script>
</body>
</html>