javascript/webdriver/test_e2e/actionsequence_test.html - external/selenium - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright 2012 Selenium comitters
 Copyright 2012 Software Freedom Conservancy

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <title>actions_test.html</title>
 <script src="../test/test_bootstrap.js"></script>
 <script>
   goog.require('bot.color');
   goog.require('goog.dom');
   goog.require('goog.dom.classes');
   goog.require('goog.events');
   goog.require('goog.fx.DragListDirection');
   goog.require('goog.fx.DragListGroup');
   goog.require('goog.style');
   goog.require('goog.userAgent');
   goog.require('webdriver.Builder');
   goog.require('webdriver.testing.asserts');
   goog.require('webdriver.testing.jsunit');
 </script>
 <style>
   #container {
     width: 100%;
     height: 250px;
   }

   div.positioned {
     position: absolute;
     top: 0;
     left: 0;
     width: 150px;
     height: 75px;
     border: 1px solid black;
     padding: 10px;
   }

   div.positioned.row2 { top: 100px; }
   div.positioned.col2 { left: 175px; }
   div.positioned.col3 { left: 350px; }
   div.positioned.col4 { left: 525px; }

   #clicked { background-color: rgb(0, 100, 0); }
   #clickme { background-color: white; }
   #typer input { width: 100%; }

   ul { padding: 0; }
   li {
     list-style: none;
     font: menu;
     width: 20ex;
     border: 1px solid gray;
     margin: 1px;
     padding: 0 2px;
     background: silver;
   }
   .red { background-color: rgb(100, 0, 0); }
   .green { background-color: rgb(0, 100, 0); }
   .blue { background-color: rgb(0, 0, 100); }
   .drag-box {
     float: left;
     border: 1px solid rgb(100, 0, 0);
     color: rgb(100, 0, 0);
     padding: 3px;
     margin: 5px;
     width: 30px;
     font-weight: bold;
     text-align: center;
     cursor: pointer;
   }
   .cursor_move {
     cursor: move;
     color: rgb(0, 100, 0);
     border: 1px solid rgb(0, 100, 0);
   }
   .opacity_40 {
     opacity: 0.4;
     filter: alpha(opacity=40);
   }
   .hr_clear {
     float: none;
     clear: both;
     height: 0;
     padding: 10px 0 0 0;
     border: 0;
     margin: 0;
     visibility: hidden;
   }
   select {
     width: 100%;
     height: 100%;
   }
 </style>
 <div id="container">
   <div class="positioned" id="clicked">Clicked!</div>
   <div class="positioned" id="clickme">Click me</div>
   <div class="positioned col2" id="dblclick">Double click me</div>
   <div class="positioned col3" id="cxtclick">Right click me</div>
   <div class="positioned col4 red" id="clicknhold">Click and hold!</div>
   <div class="positioned row2" id="typer"><input></div>
   <div class="positioned row2 col2" id="draglist">
   </div>
   <hr class="hr_clear">
   <div class="positioned row2 col3" id="dragshiftlist">
   </div>
   <div class="positioned row2 col4">
     <select multiple>
       <option value="one">one</option>
       <option value="two">two</option>
       <option value="three">three</option>
       <option value="four">four</option>
     </select>
   </div>
   <hr class="hr_clear">
 </div>
 <script>
   function shouldRunTests() {
     return !goog.userAgent.IE;
   }

   var GREEN_REGEX = /rgba\(0,\s?100,\s?0,\s?1\)/;
   var RED_REGEX = /rgba\(100,\s?0,\s?0,\s?1\)/;

   var dom, driver, groups, wd;

   function setUpPage() {
     dom = {
       clickme: goog.dom.$('clickme'),
       dblclick: goog.dom.$('dblclick'),
       cxtclick: goog.dom.$('cxtclick'),
       clicknhold: goog.dom.$('clicknhold'),
       typer: goog.dom.$('typer').firstChild,
       draglist: goog.dom.$('draglist'),
       dragshiftlist: goog.dom.$('dragshiftlist'),
       select: goog.dom.getDocument().querySelector('div select')
     };
     goog.events.listen(dom.clickme, 'click', function() {
       goog.style.setOpacity(dom.clickme, 0);
     });
     goog.events.listen(dom.dblclick, 'dblclick', function() {
       goog.dom.classes.add(dom.dblclick, 'green');
     });
     goog.events.listen(dom.cxtclick, 'contextmenu', function(e) {
       goog.dom.classes.add(dom.cxtclick, 'green');
       e.preventDefault();  // Prevent context menu from opening.
     });
     goog.events.listen(dom.clicknhold, 'mousedown', function() {
       goog.dom.classes.add(dom.clicknhold, 'green');
     });
     goog.events.listen(dom.clicknhold, 'mouseup', function() {
       goog.dom.classes.remove(dom.clicknhold, 'green');
     });

     groups = {
       one: null,
       two: null
     };
     initDragLists();
   }

   function initDragLists() {
     if (groups.one) {
       groups.one.dispose();
     }
     groups.one = createDragList(dom.draglist, false);

     if (groups.two) {
       groups.two.dispose();
     }
     groups.two = createDragList(dom.dragshiftlist, true);
   }

   function createDragList(parent, requiresShift) {
     parent.innerHTML = '';
     for (var i = 1; i <= 6; ++i) {
       var div = goog.dom.createDom('div', 'drag-box', i + '');
       parent.appendChild(div);
     }
     var hr = document.createElement('hr');
     hr.className = 'hr_clear';
     parent.appendChild(hr);
     var dlg = new goog.fx.DragListGroup();
     dlg.setDragItemHoverClass('cursor_move');
     dlg.addDragList(parent, goog.fx.DragListDirection.RIGHT);
     dlg.setDragItemHoverClass('cursor_move');
     dlg.setDraggerElClass('cursor_move opacity_40');

     if (requiresShift) {
       goog.events.listen(dlg, 'beforedragstart', function(e) {
         if (!e.event.shiftKey) {
           e.preventDefault();
         }
       });
     }
     dlg.init();
   }

   function setUp() {
     driver = new webdriver.Builder().build();
     wd = {
       clickme: driver.findElement(dom.clickme),
       dblclick: driver.findElement(dom.dblclick),
       cxtclick: driver.findElement(dom.cxtclick),
       clicknhold: driver.findElement(dom.clicknhold),
       typer: driver.findElement(dom.typer),
       draglist: driver.findElement(dom.draglist),
       dragshiftlist: driver.findElement(dom.dragshiftlist),
       select: driver.findElement(dom.select)
     };
     resetDom();
   }

   function resetDom() {
     goog.style.setOpacity(dom.clickme, 1);
     for (var el in dom) {
       goog.dom.classes.remove(dom[el], 'green');
     }
     dom.typer.value = '';
     dom.select.selectedIndex = -1;
     initDragLists();
   }

   function testLeftClick() {
     wd.clickme.getCssValue('opacity').then(function(opacity) {
       assertEquals('1', opacity);
     });
     driver.actions().click(wd.clickme).perform();
     wd.clickme.getCssValue('opacity').then(function(opacity) {
       assertEquals('0', opacity);
     });
   }

   function assertColor(element, expectedRegex) {
     element.getCssValue('background-color').then(function(color) {
       color = bot.color.standardizeColor('background-color', color);
       assertTrue(
           'Expected to match ' + expectedRegex + ' but was ' + color,
           expectedRegex.test(color));
     });
   }

   function testRightClick() {
     driver.actions().click(wd.cxtclick, webdriver.Button.RIGHT).perform();
     assertColor(wd.cxtclick, GREEN_REGEX);
   }

   function testDoubleClick() {
     driver.actions().doubleClick(wd.dblclick).perform();
     assertColor(wd.dblclick, GREEN_REGEX);
   }

   function testMouseDownUp() {
     assertColor(wd.clicknhold, RED_REGEX);
     driver.actions().mouseDown(wd.clicknhold).perform();
     assertColor(wd.clicknhold, GREEN_REGEX);
     driver.actions().mouseUp().perform();
     assertColor(wd.clicknhold, RED_REGEX);
   }

   function testSendKeys() {
     dom.typer.focus();
     driver.actions().sendKeys('hello').perform();
     driver.call(function() {
       assertEquals('hello', dom.typer.value);
     });
     driver.actions().
         sendKeys(', ', webdriver.Key.SHIFT, 'wor').
         sendKeys(webdriver.Key.SHIFT, 'ld').
         perform();
     driver.call(function() {
       assertEquals('hello, WORld', dom.typer.value);
     });
   }

   function testMultiSelect() {
     assertEquals(-1, dom.select.selectedIndex);

     wd.select.findElements(By.tagName('option')).then(function(options) {
       driver.actions().
           click(wd.select).
           keyDown(webdriver.Key.SHIFT).
           sendKeys(webdriver.Key.DOWN).
           perform();
       driver.call(function() {
         assertEquals(0, dom.select.selectedIndex);
         assertTrue(dom.select.options[0].selected);
         assertFalse(dom.select.options[1].selected);
         assertFalse(dom.select.options[2].selected);
         assertFalse(dom.select.options[3].selected);
       });
       driver.actions().sendKeys(webdriver.Key.DOWN).perform();
       driver.call(function() {
         assertEquals(0, dom.select.selectedIndex);
         assertTrue(dom.select.options[0].selected);
         assertTrue(dom.select.options[1].selected);
         assertFalse(dom.select.options[2].selected);
         assertFalse(dom.select.options[3].selected);
       });
       driver.actions().
           sendKeys(webdriver.Key.DOWN, webdriver.Key.DOWN).
           perform();
       driver.call(function() {
         assertEquals(0, dom.select.selectedIndex);
         assertTrue(dom.select.options[0].selected);
         assertTrue(dom.select.options[1].selected);
         assertTrue(dom.select.options[2].selected);
         assertTrue(dom.select.options[3].selected);
       });
       driver.actions().
           keyUp(webdriver.Key.SHIFT).
           sendKeys(webdriver.Key.UP, webdriver.Key.UP).
           perform();
       driver.call(function() {
         assertEquals(1, dom.select.selectedIndex);
         assertFalse(dom.select.options[0].selected);
         assertTrue(dom.select.options[1].selected);
         assertFalse(dom.select.options[2].selected);
         assertFalse(dom.select.options[3].selected);
       });
     });
   }
 </script>
	<!DOCTYPE html>
	<!--
	Copyright 2012 Selenium comitters
	Copyright 2012 Software Freedom Conservancy

	Licensed under the Apache License, Version 2.0 (the "License");
	you may not use this file except in compliance with the License.
	You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	-->
	<title>actions_test.html</title>
	<script src="../test/test_bootstrap.js"></script>
	<script>
	goog.require('bot.color');
	goog.require('goog.dom');
	goog.require('goog.dom.classes');
	goog.require('goog.events');
	goog.require('goog.fx.DragListDirection');
	goog.require('goog.fx.DragListGroup');
	goog.require('goog.style');
	goog.require('goog.userAgent');
	goog.require('webdriver.Builder');
	goog.require('webdriver.testing.asserts');
	goog.require('webdriver.testing.jsunit');
	</script>
	<style>
	#container {
	width: 100%;
	height: 250px;
	}

	div.positioned {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 75px;
	border: 1px solid black;
	padding: 10px;
	}

	div.positioned.row2 { top: 100px; }
	div.positioned.col2 { left: 175px; }
	div.positioned.col3 { left: 350px; }
	div.positioned.col4 { left: 525px; }

	#clicked { background-color: rgb(0, 100, 0); }
	#clickme { background-color: white; }
	#typer input { width: 100%; }

	ul { padding: 0; }
	li {
	list-style: none;
	font: menu;
	width: 20ex;
	border: 1px solid gray;
	margin: 1px;
	padding: 0 2px;
	background: silver;
	}
	.red { background-color: rgb(100, 0, 0); }
	.green { background-color: rgb(0, 100, 0); }
	.blue { background-color: rgb(0, 0, 100); }
	.drag-box {
	float: left;
	border: 1px solid rgb(100, 0, 0);
	color: rgb(100, 0, 0);
	padding: 3px;
	margin: 5px;
	width: 30px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	}
	.cursor_move {
	cursor: move;
	color: rgb(0, 100, 0);
	border: 1px solid rgb(0, 100, 0);
	}
	.opacity_40 {
	opacity: 0.4;
	filter: alpha(opacity=40);
	}
	.hr_clear {
	float: none;
	clear: both;
	height: 0;
	padding: 10px 0 0 0;
	border: 0;
	margin: 0;
	visibility: hidden;
	}
	select {
	width: 100%;
	height: 100%;
	}
	</style>
	<div id="container">
	<div class="positioned" id="clicked">Clicked!</div>
	<div class="positioned" id="clickme">Click me</div>
	<div class="positioned col2" id="dblclick">Double click me</div>
	<div class="positioned col3" id="cxtclick">Right click me</div>
	<div class="positioned col4 red" id="clicknhold">Click and hold!</div>
	<div class="positioned row2" id="typer"><input></div>
	<div class="positioned row2 col2" id="draglist">
	</div>
	<hr class="hr_clear">
	<div class="positioned row2 col3" id="dragshiftlist">
	</div>
	<div class="positioned row2 col4">
	<select multiple>
	<option value="one">one</option>
	<option value="two">two</option>
	<option value="three">three</option>
	<option value="four">four</option>
	</select>
	</div>
	<hr class="hr_clear">
	</div>
	<script>
	function shouldRunTests() {
	return !goog.userAgent.IE;
	}

	var GREEN_REGEX = /rgba\(0,\s?100,\s?0,\s?1\)/;
	var RED_REGEX = /rgba\(100,\s?0,\s?0,\s?1\)/;

	var dom, driver, groups, wd;

	function setUpPage() {
	dom = {
	clickme: goog.dom.$('clickme'),
	dblclick: goog.dom.$('dblclick'),
	cxtclick: goog.dom.$('cxtclick'),
	clicknhold: goog.dom.$('clicknhold'),
	typer: goog.dom.$('typer').firstChild,
	draglist: goog.dom.$('draglist'),
	dragshiftlist: goog.dom.$('dragshiftlist'),
	select: goog.dom.getDocument().querySelector('div select')
	};
	goog.events.listen(dom.clickme, 'click', function() {
	goog.style.setOpacity(dom.clickme, 0);
	});
	goog.events.listen(dom.dblclick, 'dblclick', function() {
	goog.dom.classes.add(dom.dblclick, 'green');
	});
	goog.events.listen(dom.cxtclick, 'contextmenu', function(e) {
	goog.dom.classes.add(dom.cxtclick, 'green');
	e.preventDefault(); // Prevent context menu from opening.
	});
	goog.events.listen(dom.clicknhold, 'mousedown', function() {
	goog.dom.classes.add(dom.clicknhold, 'green');
	});
	goog.events.listen(dom.clicknhold, 'mouseup', function() {
	goog.dom.classes.remove(dom.clicknhold, 'green');
	});

	groups = {
	one: null,
	two: null
	};
	initDragLists();
	}

	function initDragLists() {
	if (groups.one) {
	groups.one.dispose();
	}
	groups.one = createDragList(dom.draglist, false);

	if (groups.two) {
	groups.two.dispose();
	}
	groups.two = createDragList(dom.dragshiftlist, true);
	}

	function createDragList(parent, requiresShift) {
	parent.innerHTML = '';
	for (var i = 1; i <= 6; ++i) {
	var div = goog.dom.createDom('div', 'drag-box', i + '');
	parent.appendChild(div);
	}
	var hr = document.createElement('hr');
	hr.className = 'hr_clear';
	parent.appendChild(hr);
	var dlg = new goog.fx.DragListGroup();
	dlg.setDragItemHoverClass('cursor_move');
	dlg.addDragList(parent, goog.fx.DragListDirection.RIGHT);
	dlg.setDragItemHoverClass('cursor_move');
	dlg.setDraggerElClass('cursor_move opacity_40');

	if (requiresShift) {
	goog.events.listen(dlg, 'beforedragstart', function(e) {
	if (!e.event.shiftKey) {
	e.preventDefault();
	}
	});
	}
	dlg.init();
	}

	function setUp() {
	driver = new webdriver.Builder().build();
	wd = {
	clickme: driver.findElement(dom.clickme),
	dblclick: driver.findElement(dom.dblclick),
	cxtclick: driver.findElement(dom.cxtclick),
	clicknhold: driver.findElement(dom.clicknhold),
	typer: driver.findElement(dom.typer),
	draglist: driver.findElement(dom.draglist),
	dragshiftlist: driver.findElement(dom.dragshiftlist),
	select: driver.findElement(dom.select)
	};
	resetDom();
	}

	function resetDom() {
	goog.style.setOpacity(dom.clickme, 1);
	for (var el in dom) {
	goog.dom.classes.remove(dom[el], 'green');
	}
	dom.typer.value = '';
	dom.select.selectedIndex = -1;
	initDragLists();
	}

	function testLeftClick() {
	wd.clickme.getCssValue('opacity').then(function(opacity) {
	assertEquals('1', opacity);
	});
	driver.actions().click(wd.clickme).perform();
	wd.clickme.getCssValue('opacity').then(function(opacity) {
	assertEquals('0', opacity);
	});
	}

	function assertColor(element, expectedRegex) {
	element.getCssValue('background-color').then(function(color) {
	color = bot.color.standardizeColor('background-color', color);
	assertTrue(
	'Expected to match ' + expectedRegex + ' but was ' + color,
	expectedRegex.test(color));
	});
	}

	function testRightClick() {
	driver.actions().click(wd.cxtclick, webdriver.Button.RIGHT).perform();
	assertColor(wd.cxtclick, GREEN_REGEX);
	}

	function testDoubleClick() {
	driver.actions().doubleClick(wd.dblclick).perform();
	assertColor(wd.dblclick, GREEN_REGEX);
	}

	function testMouseDownUp() {
	assertColor(wd.clicknhold, RED_REGEX);
	driver.actions().mouseDown(wd.clicknhold).perform();
	assertColor(wd.clicknhold, GREEN_REGEX);
	driver.actions().mouseUp().perform();
	assertColor(wd.clicknhold, RED_REGEX);
	}

	function testSendKeys() {
	dom.typer.focus();
	driver.actions().sendKeys('hello').perform();
	driver.call(function() {
	assertEquals('hello', dom.typer.value);
	});
	driver.actions().
	sendKeys(', ', webdriver.Key.SHIFT, 'wor').
	sendKeys(webdriver.Key.SHIFT, 'ld').
	perform();
	driver.call(function() {
	assertEquals('hello, WORld', dom.typer.value);
	});
	}

	function testMultiSelect() {
	assertEquals(-1, dom.select.selectedIndex);

	wd.select.findElements(By.tagName('option')).then(function(options) {
	driver.actions().
	click(wd.select).
	keyDown(webdriver.Key.SHIFT).
	sendKeys(webdriver.Key.DOWN).
	perform();
	driver.call(function() {
	assertEquals(0, dom.select.selectedIndex);
	assertTrue(dom.select.options[0].selected);
	assertFalse(dom.select.options[1].selected);
	assertFalse(dom.select.options[2].selected);
	assertFalse(dom.select.options[3].selected);
	});
	driver.actions().sendKeys(webdriver.Key.DOWN).perform();
	driver.call(function() {
	assertEquals(0, dom.select.selectedIndex);
	assertTrue(dom.select.options[0].selected);
	assertTrue(dom.select.options[1].selected);
	assertFalse(dom.select.options[2].selected);
	assertFalse(dom.select.options[3].selected);
	});
	driver.actions().
	sendKeys(webdriver.Key.DOWN, webdriver.Key.DOWN).
	perform();
	driver.call(function() {
	assertEquals(0, dom.select.selectedIndex);
	assertTrue(dom.select.options[0].selected);
	assertTrue(dom.select.options[1].selected);
	assertTrue(dom.select.options[2].selected);
	assertTrue(dom.select.options[3].selected);
	});
	driver.actions().
	keyUp(webdriver.Key.SHIFT).
	sendKeys(webdriver.Key.UP, webdriver.Key.UP).
	perform();
	driver.call(function() {
	assertEquals(1, dom.select.selectedIndex);
	assertFalse(dom.select.options[0].selected);
	assertTrue(dom.select.options[1].selected);
	assertFalse(dom.select.options[2].selected);
	assertFalse(dom.select.options[3].selected);
	});
	});
	}
	</script>