| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <meta http-equiv="Expire" content="0" /> |
| <title>click_test.html</title> |
| <script src="test_bootstrap.js"></script> |
| <script type="text/javascript"> |
| goog.require('bot.action'); |
| goog.require('bot.locators'); |
| goog.require('bot.test'); |
| goog.require('bot.userAgent'); |
| goog.require('goog.Uri'); |
| goog.require('goog.debug.DivConsole'); |
| goog.require('goog.debug.Logger'); |
| goog.require('goog.dom'); |
| goog.require('goog.events'); |
| goog.require('goog.events.EventType'); |
| goog.require('goog.math.Coordinate'); |
| goog.require('goog.style'); |
| goog.require('goog.testing.jsunit'); |
| goog.require('goog.userAgent'); |
| </script> |
| <script type="text/javascript"> |
| var clicker; |
| var clickLocation; |
| var divConsole; |
| |
| var findElement = bot.locators.findElement; |
| var findElements = bot.locators.findElements; |
| var log = goog.debug.Logger.getLogger('click_test'); |
| |
| var FIRST_EVENT_OF_CLICK = goog.userAgent.IE ? |
| goog.events.EventType.MOUSEMOVE : goog.events.EventType.MOUSEOVER; |
| var SECOND_EVENT_OF_CLICK = goog.userAgent.IE ? |
| goog.events.EventType.MOUSEOVER : goog.events.EventType.MOUSEMOVE; |
| |
| function checkActionCompatibility(action) { |
| if (action == bot.action.tap) { |
| return bot.events.SUPPORTS_TOUCH_EVENTS; |
| } |
| return true; |
| } |
| |
| function resetClicker() { |
| divConsole.clear(); |
| goog.style.showElement(clicker, true); |
| goog.events.removeAll(clicker); |
| goog.events.listen(clicker, |
| [goog.events.EventType.MOUSEOVER, |
| goog.events.EventType.MOUSEMOVE, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK, |
| goog.events.EventType.DBLCLICK, |
| goog.events.EventType.BLUR, |
| goog.events.EventType.FOCUS], |
| function (e) { |
| log.info(e.type); |
| }); |
| blurClicker(); |
| } |
| |
| function blurClicker() { |
| clicker.blur(); |
| goog.dom.$('focusSink').focus(); |
| } |
| |
| function hideClickerOn(eventType) { |
| goog.events.listen(clicker, eventType, function () { |
| goog.style.showElement(clicker, false); |
| }); |
| } |
| |
| // We don't care about sub-pixel resolution, but Macs seem to report it |
| function assertCoordinatesEqual(expected, actual) { |
| assertEquals(Math.floor(expected), Math.floor(actual)); |
| } |
| |
| function setUp() { |
| blurClicker(); |
| } |
| |
| function tearDown() { |
| resetClicker(); |
| } |
| |
| function shouldNotBeAbleToClickOnAnElementThatIsNotShown(action) { |
| if (!checkActionCompatibility(action)) { |
| return; |
| } |
| var noHeightElement = goog.dom.$('noHeight'); |
| var threw = false; |
| try { |
| action(noHeightElement); |
| } catch (ex) { |
| assertEquals(bot.ErrorCode.ELEMENT_NOT_VISIBLE, ex.code); |
| threw = true; |
| } |
| assertTrue(threw); |
| } |
| |
| var testClickShouldNotBeAbleToClickOnAnElementThatIsNotShown = goog.partial( |
| shouldNotBeAbleToClickOnAnElementThatIsNotShown, bot.action.click); |
| |
| var testTapShouldNotBeAbleToClickOnAnElementThatIsNotShown = goog.partial( |
| shouldNotBeAbleToClickOnAnElementThatIsNotShown, bot.action.tap); |
| |
| function shouldClickInTheMiddleOfAnElement(action) { |
| if (!checkActionCompatibility(action)) { |
| return; |
| } |
| var clicker = findElement({ id: 'clicker' }); |
| |
| goog.events.removeAll(clicker); |
| var clickedXY = null; |
| goog.events.listen(clicker, goog.events.EventType.MOUSEUP, function (e) { |
| // We are looking for event.offsetX/Y here, but can't use them due to |
| // browser incompatibilities. |
| clickedXY = { x: e.clientX, y: e.clientY }; |
| }); |
| |
| action(clicker); |
| assertNotNull(clickedXY); |
| |
| // Calculate the coordinates that should be clicked according to the |
| // top left corner of the browser's content area |
| var clickSize = goog.style.getSize(clicker); |
| var clickPos = goog.style.getClientPosition(clicker); |
| assertCoordinatesEqual(clickedXY.x, clickPos.x + (clickSize.width / 2)); |
| assertCoordinatesEqual(clickedXY.y, clickPos.y + (clickSize.height / 2)); |
| } |
| |
| var testClickShouldClickInTheMiddleOfAnElement = goog.partial( |
| shouldClickInTheMiddleOfAnElement, bot.action.click); |
| |
| var testTapShouldClickInTheMiddleOfAnElement = goog.partial( |
| shouldClickInTheMiddleOfAnElement, bot.action.tap); |
| |
| function shouldClickTheCoordofAnElement(action) { |
| if (!checkActionCompatibility(action)) { |
| return; |
| } |
| var clicker = findElement({ id: 'clicker' }); |
| |
| goog.events.removeAll(clicker); |
| var clickedXY = null; |
| goog.events.listen(clicker, goog.events.EventType.CLICK, function (e) { |
| clickedXY = { x: e.clientX, y: e.clientY }; |
| }); |
| |
| var coord = new goog.math.Coordinate(3, 3); |
| action(clicker, coord); |
| assertNotNull(clickedXY); |
| |
| // Calculate the coordinates that should be clicked according to the |
| // top left corner of the browser's content area |
| var clickPos = goog.style.getClientPosition(clicker); |
| assertCoordinatesEqual(clickedXY.x, clickPos.x + coord.x); |
| assertCoordinatesEqual(clickedXY.y, clickPos.y + coord.y); |
| } |
| |
| var testClickShouldClickTheCoordofAnElement = goog.partial( |
| shouldClickTheCoordofAnElement, bot.action.click); |
| |
| var testTapShouldClickTheCoordofAnElement = goog.partial( |
| shouldClickTheCoordofAnElement, bot.action.tap); |
| |
| function testShouldRightClickTheCoordOfAnElement() { |
| var clicker = findElement({ id: 'rightClickTarget' }); |
| |
| goog.events.removeAll(clicker); |
| var clickedXY = null; |
| goog.events.listen(clicker, goog.events.EventType.MOUSEDOWN, |
| function (e) { |
| clickedXY = { x: e.clientX, y: e.clientY }; |
| }); |
| |
| var coord = new goog.math.Coordinate(3, 3); |
| bot.action.rightClick(clicker, coord); |
| assertNotNull(clickedXY); |
| assertEquals(clicker.value, 'Right Clicked!'); |
| |
| // Calculate the coordinates that should be clicked according to the |
| // top left corner of the browser's content area |
| var clickPos = goog.style.getClientPosition(clicker); |
| assertCoordinatesEqual(clickedXY.x, clickPos.x + coord.x); |
| assertCoordinatesEqual(clickedXY.y, clickPos.y + coord.y); |
| } |
| |
| function testShouldGenerateTheCorrectClickSequence() { |
| var expectedEvents = [ |
| FIRST_EVENT_OF_CLICK, |
| SECOND_EVENT_OF_CLICK, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK]; |
| var events = []; |
| goog.events.listen(clicker, expectedEvents, function (e) { |
| events.push(e.type); |
| }); |
| bot.action.click(clicker); |
| assertArrayEquals(expectedEvents, events); |
| } |
| |
| function testShouldGenerateTheCorrectDoubleClickSequence() { |
| var expectedEvents = [ |
| FIRST_EVENT_OF_CLICK, |
| SECOND_EVENT_OF_CLICK, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK, |
| goog.events.EventType.DBLCLICK]; |
| var events = []; |
| // We use the global clicker element. It is reset in the |
| // teardown function. |
| goog.events.listen(clicker, expectedEvents, function (e) { |
| events.push(e.type); |
| }); |
| bot.action.doubleClick(clicker); |
| assertArrayEquals(expectedEvents, events); |
| } |
| |
| // http://code.google.com/p/selenium/issues/detail?id=1207 |
| function shouldRespondCorrectlyIfElementIsHiddenMidClickSequence(action) { |
| if (!checkActionCompatibility(action)) { |
| return; |
| } |
| if (goog.userAgent.IE) { |
| // TODO: Test must be async to handle focus events properly. |
| return; |
| } |
| |
| var clickEvents = [ |
| goog.events.EventType.MOUSEMOVE, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.FOCUS, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK |
| ]; |
| |
| function runTest(hideOn, expectedEvents) { |
| resetClicker(); |
| var events = []; |
| goog.events.listen(clicker, clickEvents, function (e) { |
| events.push(e.type); |
| }); |
| hideClickerOn(hideOn); |
| |
| assertTrue('Should start shown', bot.dom.isShown(clicker)); |
| action(clicker); |
| assertFalse('Should end not shown; hid on: ' + hideOn, |
| bot.dom.isShown(clicker)); |
| assertArrayEquals(expectedEvents, events); |
| } |
| |
| // Test hiding on each of the expected events in the click sequence. |
| for (var i = 0; i < clickEvents.length; i++) { |
| var hideOn = clickEvents[i]; |
| |
| // When the element becomes hidden, no further elements should fire. The |
| // exception is that if mouseup is fired, then click must also be fired, |
| // as a click is defined as a mousedown and mouseup at the same location. |
| var expectedEvents; |
| if (hideOn == goog.events.EventType.MOUSEUP) { |
| expectedEvents = clickEvents; |
| } else { |
| expectedEvents = goog.array.slice(clickEvents, 0, i + 1); |
| } |
| |
| // If we expect a focus event, only test if the window is focused. |
| if (!goog.array.contains(expectedEvents, goog.events.EventType.FOCUS) || |
| bot.test.isWindowFocused()) { |
| runTest(hideOn, expectedEvents); |
| } |
| } |
| } |
| |
| var testClickShouldRespondCorrectlyIfElementIsHiddenMidClickSequence = |
| goog.partial(shouldRespondCorrectlyIfElementIsHiddenMidClickSequence, |
| bot.action.click); |
| |
| var testTapShouldRespondCorrectlyIfElementIsHiddenMidClickSequence = |
| goog.partial(shouldRespondCorrectlyIfElementIsHiddenMidClickSequence, |
| bot.action.tap); |
| |
| |
| function cancelledMousedownDoesNotFocus(expectedEvents, action) { |
| if (!checkActionCompatibility(action)) { |
| return; |
| } |
| var events = []; |
| goog.events.listen(clicker, |
| [goog.events.EventType.MOUSEOVER, |
| goog.events.EventType.MOUSEMOVE, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.FOCUS, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK, |
| goog.events.EventType.MOUSEOUT], |
| function (e) { |
| events.push(e.type); |
| }); |
| goog.events.listen(clicker, goog.events.EventType.MOUSEDOWN, function (e) { |
| e.preventDefault(); |
| }); |
| action(clicker); |
| assertArrayEquals(expectedEvents, events); |
| } |
| |
| var expectedTapEvents = [ |
| goog.events.EventType.MOUSEMOVE, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK]; |
| |
| var expectedIETouchEvents = [ |
| goog.events.EventType.MOUSEMOVE, |
| goog.events.EventType.MOUSEOVER, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK, |
| goog.events.EventType.MOUSEOUT]; |
| |
| var expectedClickEvents = [ |
| FIRST_EVENT_OF_CLICK, |
| SECOND_EVENT_OF_CLICK, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK]; |
| |
| var testClickCancelledMousedownDoesNotFocus = goog.partial( |
| cancelledMousedownDoesNotFocus, |
| expectedClickEvents, |
| bot.action.click); |
| |
| var testTapCancelledMousedownDoesNotFocus = goog.partial( |
| cancelledMousedownDoesNotFocus, |
| bot.userAgent.IE_DOC_10 ? expectedIETouchEvents : expectedTapEvents, |
| bot.action.tap); |
| |
| function shouldBeAbleToClickOnElementsWithOpacityZero(action) { |
| if (!checkActionCompatibility(action)) { |
| return; |
| } |
| var clickJacker = findElement({ id: 'clickJacker' }); |
| clickJacker.style.opacity = 0; |
| assertEquals('Precondition failed: clickJacker should be transparent', |
| 0, bot.dom.getOpacity(clickJacker)); |
| action(clickJacker); |
| assertEquals(1, bot.dom.getOpacity(clickJacker)); |
| } |
| |
| var testClickShouldBeAbleToClickOnElementsWithOpacityZero = goog.partial( |
| shouldBeAbleToClickOnElementsWithOpacityZero, bot.action.click); |
| |
| var testTapShouldBeAbleToClickOnElementsWithOpacityZero = goog.partial( |
| shouldBeAbleToClickOnElementsWithOpacityZero, bot.action.tap); |
| |
| function shouldNotBeAbleToClickOnElementWithPointerEventsNone(action) { |
| if (!checkActionCompatibility(action) || goog.userAgent.IE || |
| (goog.userAgent.GECKO && !bot.userAgent.isEngineVersion('1.9.2'))) { |
| return; |
| } |
| var el = findElement({ id: 'pointerEvents' }); |
| action(el); |
| assertEquals('Pass', bot.dom.getVisibleText(el)); |
| } |
| |
| var testClickShouldNotBeAbleToClickOnElementWithPointerEventsNone = goog.partial( |
| shouldNotBeAbleToClickOnElementWithPointerEventsNone, bot.action.click); |
| |
| var testTapShouldNotBeAbleToClickOnElementWithPointerEventsNone = goog.partial( |
| shouldNotBeAbleToClickOnElementWithPointerEventsNone, bot.action.tap); |
| |
| function testClickShouldNotScrollWhenElementInView() { |
| if (bot.userAgent.MOBILE) { |
| return; |
| } |
| var target = findElement({ id: 'targetInView' }); |
| var oldPos = goog.style.getClientPosition(target); |
| bot.action.click(target); |
| var newPos = goog.style.getClientPosition(target); |
| assertObjectEquals(oldPos, newPos); |
| } |
| |
| function testClickShouldScrollWhenElementNotInView() { |
| if (bot.userAgent.MOBILE) { |
| return; |
| } |
| var target = findElement({ id: 'targetNotInView' }); |
| var oldPos = goog.style.getClientPosition(target); |
| bot.action.click(target); |
| // In Safari 6, the affects of window.scrollTo are applied |
| // applied asynchronously, so we cannot verify scrolling here. |
| if (!bot.userAgent.SAFARI_6) { |
| var newPos = goog.style.getClientPosition(target); |
| assertNotEquals(oldPos.y, newPos.y); |
| } |
| window.scrollTo(0, 0); |
| } |
| </script> |
| </head> |
| |
| <body> |
| <form action="javascript:void(0)"> |
| <label for="focusSink">Focus sink:</label><input id="focusSink" type="text" /><br /> |
| <label for="clicker">Click me:</label><input id="clicker" type="checkbox" /><br /> |
| <div id="log"></div> |
| <script type="text/javascript"> |
| clicker = goog.dom.$('clicker'); |
| clickLocation = goog.style.getBounds(clicker); |
| |
| divConsole = new goog.debug.DivConsole(goog.dom.$('log')); |
| divConsole.setCapturing(true); |
| </script> |
| </form> |
| <img id="noHeight" style="height:0;" src="testdata/map.png" /> |
| <input id="disabled" type="text" value="I'm disabled" disabled /> |
| <a id="clickTarget">Click me!</a> |
| <input id="rightClickTarget" type="text" oncontextmenu="this.value='Right Clicked!'; return false;" /> |
| <div> |
| <div id="clickJacker" style="position:absolute;float:left; |
| width:200px;height:100px; padding:10px; |
| background-color:cyan; |
| border:1px solid cyan;">Click jacked!</div> |
| <div style="width:200px; height:100px; |
| border:1px solid black; padding:10px">Click Me</div> |
| <script type="text/javascript"> |
| var clickJacker = document.getElementById('clickJacker'); |
| function setOpacity(opacity) { |
| clickJacker.style.opacity = opacity; |
| } |
| setOpacity(0); |
| |
| goog.events.listen(clickJacker, goog.events.EventType.CLICK, |
| function (e) { |
| setOpacity(1); |
| }); |
| </script> |
| </div> |
| <p id="pointerEvents" onclick="this.textContent='Error';" style="pointer-events: none;">Pass</p> |
| <iframe id="iframe" src="testdata/click_iframe.html"> |
| </iframe> |
| <div id="targetInView" style="position: absolute; top: 10px; left: 10px">target in view</div> |
| <div id="targetNotInView" style="position: absolute; top: 10000px">target not in view</div> |
| </body> |
| |
| </html> |
