| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>interactions_test</title> |
| <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css"> |
| <script src="/filez/_main/third_party/js/qunit/qunit.js"></script> |
| <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script> |
| <script src="../../test_bootstrap.js"></script> |
| <script src="../../../atoms/inject/deps.js"></script> |
| <script> |
| goog.require('bot.Keyboard'); |
| goog.require('bot.Mouse'); |
| goog.require('bot.color'); |
| goog.require('bot.dom'); |
| goog.require('bot.inject.cache'); |
| goog.require('bot.json'); |
| goog.require('bot.response'); |
| goog.require('bot.userAgent'); |
| goog.require('goog.array'); |
| goog.require('webdriver.Key'); |
| goog.require('webdriver.atoms.inject.action'); |
| </script> |
| <style> |
| #click-box { |
| position: absolute; |
| width: 75px; |
| height: 75px; |
| top: 50px; |
| left: 50px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="qunit"></div> |
| <div id="qunit-fixture"></div> |
| <input id="focus-sync"> |
| <input id="text-input"> |
| <div id="click-box"></div> |
| <script> |
| var clickBox = document.getElementById('click-box'); |
| clickBox.style.background = 'red'; |
| clickBox.onclick = function(e) { |
| e = e || window.event; |
| clickBox.style.background = 'blue'; |
| if (e.clientX > 100) { |
| clickBox.style.background = 'cyan'; |
| } |
| if (e.clientY > 100) { |
| clickBox.style.background = 'yellow'; |
| } |
| }; |
| clickBox.oncontextmenu = function() { |
| clickBox.style.background = 'green'; |
| return false; |
| }; |
| |
| |
| function resetFocus() { |
| var sink = document.getElementById('focus-sync'); |
| focusElement(sink); |
| } |
| |
| |
| function focusElement(el) { |
| el.focus(); |
| QUnit.assert.strictEqual(bot.dom.getActiveElement(document), el); |
| } |
| |
| |
| QUnit.test('sendKeysToActiveElement', function(assert) { |
| resetFocus(); |
| |
| var input = document.getElementById('text-input'); |
| focusElement(input); |
| |
| var state = doType('foo'); |
| assert.strictEqual(input.value, 'foo'); |
| |
| resetFocus(); |
| |
| state['pressed'].push(bot.Keyboard.Keys.SHIFT); |
| state = doType('more', state); |
| assert.strictEqual(input.value, 'foo'); |
| |
| focusElement(input); |
| doType(['bar', webdriver.Key.SHIFT, 'baz'], state); |
| |
| // IE<10 does not preserve cursor position after changing focus. |
| if (bot.userAgent.IE_DOC_PRE10) { |
| assert.strictEqual(input.value, 'BARbazfoo'); |
| } else { |
| assert.strictEqual(input.value, 'fooBARbaz'); |
| } |
| |
| function doType(keys, opt_state) { |
| var res = webdriver.atoms.inject.action.sendKeysToActiveElement( |
| keys, opt_state); |
| res = bot.json.parse(res); |
| bot.response.checkResponse(res); |
| return res['value']; |
| } |
| }); |
| |
| QUnit.test('mouseClick', function(assert) { |
| // Reset box color first |
| clickBox.style.background = 'red'; |
| assert.strictEqual(getColor(), 'rgba(255, 0, 0, 1)', 'initial state is wrong'); |
| |
| var state = doClick(bot.Mouse.Button.LEFT, { |
| clientXY: {x: 60, y: 60} // Click over the clickBox. |
| }); |
| assert.strictEqual(getColor(), 'rgba(0, 0, 255, 1)'); |
| assert.ok(!!state['element']); |
| assert.strictEqual( |
| bot.inject.cache.getElement(state['element']['ELEMENT']), |
| clickBox); |
| |
| state = doClick(bot.Mouse.Button.RIGHT, state); |
| assert.strictEqual(getColor(), 'rgba(0, 128, 0, 1)'); |
| |
| state.clientXY.x += 41; |
| assert.strictEqual(state.clientXY.x, 101); |
| doClick(bot.Mouse.Button.LEFT, state); |
| assert.strictEqual(getColor(), 'rgba(0, 255, 255, 1)'); |
| |
| state.clientXY.y += 41; |
| assert.strictEqual(state.clientXY.y, 101); |
| doClick(bot.Mouse.Button.LEFT, state); |
| assert.strictEqual(getColor(), 'rgba(255, 255, 0, 1)'); |
| |
| state.clientXY = {x: 50, y: 50}; |
| doClick(bot.Mouse.Button.LEFT, state); |
| assert.strictEqual(getColor(), 'rgba(0, 0, 255, 1)'); |
| |
| function doClick(button, state) { |
| var res = webdriver.atoms.inject.action.mouseClick(button, state); |
| res = bot.json.parse(res); |
| bot.response.checkResponse(res); |
| return res['value']; |
| } |
| |
| function getColor() { |
| var value = bot.dom.getEffectiveStyle(clickBox, 'backgroundColor'); |
| return bot.color.standardizeColor('backgroundColor', value); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
