Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use mouseUp method in Playwright Internal
Best JavaScript code snippet using playwright-internal
detection-element-after-events-simulation-test.js
Source:detection-element-after-events-simulation-test.js 
1const hammerhead = window.getTestCafeModule('hammerhead');2const browserUtils = hammerhead.utils.browser;3const featureDetection = hammerhead.utils.featureDetection;4const testCafeCore = window.getTestCafeModule('testCafeCore');5const parseKeySequence = testCafeCore.get('./utils/parse-key-sequence');6const testCafeAutomation = window.getTestCafeModule('testCafeAutomation');7const ClickAutomation = testCafeAutomation.Click;8const RClickAutomation = testCafeAutomation.RClick;9const DblClickAutomation = testCafeAutomation.DblClick;10const SelectTextAutomation = testCafeAutomation.SelectText;11const TypeAutomation = testCafeAutomation.Type;12const PressAutomation = testCafeAutomation.Press;13const ClickOptions = testCafeAutomation.get('../../test-run/commands/options').ClickOptions;14const TypeOptions = testCafeAutomation.get('../../test-run/commands/options').TypeOptions;15testCafeCore.preventRealEvents();16$(document).ready(function () {17 const TEST_ELEMENT_CLASS = 'testElement';18 //utils19 const addInputElement = function (x, y, value) {20 const elementString = ['<input type="text" value="', value, '" />'].join('');21 return $(elementString)22 .css({23 position: 'absolute',24 left: x + 'px',25 top: y + 'px'26 })27 .addClass(TEST_ELEMENT_CLASS)28 .appendTo('body');29 };30 const addDiv = function (x, y) {31 return $('<div />')32 .css({33 position: 'absolute',34 left: x,35 top: y,36 border: '1px solid black'37 })38 .width(150)39 .height(150)40 .addClass(TEST_ELEMENT_CLASS)41 .appendTo('body');42 };43 const startNext = function () {44 if (browserUtils.isIE) {45 removeTestElements();46 window.setTimeout(start, 30);47 }48 else49 start();50 };51 const removeTestElements = function () {52 $('.' + TEST_ELEMENT_CLASS).remove();53 };54 const createMouseMonitorEventObject = function () {55 return {56 elementOneMousedownRaised: false,57 elementOneMouseupRaised: false,58 elementOneClickRaised: false,59 elementOneRClickRaised: false,60 elementOneDblClickRaised: false,61 elementOneContextMenuRaised: false,62 elementOneSelectRaised: false,63 elementOneMousedownCount: 0,64 elementOneMouseupCount: 0,65 elementOneClickCount: 0,66 elementTwoMousedownRaised: false,67 elementTwoMouseupRaised: false,68 elementTwoClickRaised: false,69 elementTwoRClickRaised: false,70 elementTwoDblClickRaised: false,71 elementTwoContextMenuRaised: false,72 elementTwoSelectRaised: false,73 elementTwoMousedownCount: 0,74 elementTwoMouseupCount: 0,75 elementTwoClickCount: 076 };77 };78 const createKeyMonitorEventObject = function () {79 return {80 elementsOneKeydownRaised: false,81 elementsOneKeypressRaised: false,82 elementsOneKeyupRaised: false,83 elementsTwoKeydownRaised: false,84 elementsTwoKeypressRaised: false,85 elementsTwoKeyupRaised: false86 };87 };88 const swapLocationOfElements = function ($el1, $el2) {89 const left1 = $el1.css('left');90 const top1 = $el1.css('top');91 const left2 = $el2.css('left');92 const top2 = $el2.css('top');93 $el1.css({94 left: left2,95 top: top296 });97 $el2.css({98 left: left1,99 top: top1100 });101 };102 const bindMouseHandlersToSwappingElements = function ($el1, $el2, eventName, eventMonitorObject, checkMousemove, toSecondHandler) {103 let isSecondEvent = false;104 $el1.bind('mousedown', function (e) {105 eventMonitorObject.elementOneMousedownRaised = true;106 eventMonitorObject.elementOneMousedownCount++;107 if (e.type === eventName && (!toSecondHandler || isSecondEvent))108 swapLocationOfElements($el1, $el2);109 if (!isSecondEvent && eventName === e.type)110 isSecondEvent = true;111 });112 $el1.bind('mouseup', function (e) {113 eventMonitorObject.elementOneMouseupRaised = true;114 eventMonitorObject.elementOneMouseupCount++;115 if (e.type === eventName && (!toSecondHandler || isSecondEvent))116 swapLocationOfElements($el1, $el2);117 if (!isSecondEvent && eventName === e.type)118 isSecondEvent = true;119 });120 $el1.bind('click', function (e) {121 eventMonitorObject.elementOneClickRaised = true;122 eventMonitorObject.elementOneClickCount++;123 if (e.type === eventName && (!toSecondHandler || isSecondEvent))124 swapLocationOfElements($el1, $el2);125 if (!isSecondEvent && eventName === e.type)126 isSecondEvent = true;127 });128 $el1.bind('contextmenu', function (e) {129 eventMonitorObject.elementOneRClickRaised = true;130 if (e.type === eventName)131 swapLocationOfElements($el1, $el2);132 });133 $el1.bind('dblclick', function (e) {134 eventMonitorObject.elementOneDblClickRaised = true;135 if (e.type === eventName)136 swapLocationOfElements($el1, $el2);137 });138 $el2.bind('mousedown', function () {139 eventMonitorObject.elementTwoMousedownRaised = true;140 eventMonitorObject.elementTwoMousedownCount++;141 });142 $el2.bind('mouseup', function () {143 eventMonitorObject.elementTwoMouseupRaised = true;144 eventMonitorObject.elementTwoMouseupCount++;145 });146 $el2.bind('click', function () {147 eventMonitorObject.elementTwoClickRaised = true;148 eventMonitorObject.elementTwoClickCount++;149 });150 $el2.bind('contextmenu', function () {151 eventMonitorObject.elementTwoRClickRaised = true;152 });153 $el2.bind('dblclick', function () {154 eventMonitorObject.elementTwoDblClickRaised = true;155 });156 if (checkMousemove) {157 $el1.bind('mousemove', function () {158 if (eventMonitorObject.elementOneMousedownRaised && !eventMonitorObject.elementOneMouseupRaised ||159 eventMonitorObject.elementTwoMousedownRaised && !eventMonitorObject.elementTwoMouseupRaised)160 eventMonitorObject.elementOneSelectRaised = true;161 });162 $el2.bind('mousemove', function () {163 if (eventMonitorObject.elementOneMousedownRaised && !eventMonitorObject.elementOneMouseupRaised ||164 eventMonitorObject.elementTwoMousedownRaised && !eventMonitorObject.elementTwoMouseupRaised)165 eventMonitorObject.elementTwoSelectRaised = true;166 });167 }168 };169 const bindKeyHandlersToSwappingElements = function ($el1, $el2, eventName, eventMonitorObject) {170 $el1.bind('keydown', function (e) {171 eventMonitorObject.elementsOneKeydownRaised = true;172 if (e.type === eventName)173 $el2.focus();174 });175 $el1.bind('keypress', function (e) {176 eventMonitorObject.elementsOneKeypressRaised = true;177 if (e.type === eventName)178 $el2.focus();179 });180 $el1.bind('keyup', function (e) {181 eventMonitorObject.elementsOneKeyupRaised = true;182 if (e.type === eventName)183 $el2.focus();184 });185 $el2.bind('keydown', function () {186 eventMonitorObject.elementsTwoKeydownRaised = true;187 });188 $el2.bind('keypress', function () {189 eventMonitorObject.elementsTwoKeypressRaised = true;190 });191 $el2.bind('keyup', function () {192 eventMonitorObject.elementsTwoKeyupRaised = true;193 });194 };195 const bindHandlerToTouchEvents = function ($el1, $el2, eventName, eventMonitorObject, checkMousemove) {196 $el1.bind('touchstart', function (e) {197 eventMonitorObject.elementOneMousedownRaised = true;198 eventMonitorObject.elementOneMousedownCount++;199 if (eventName === e.type)200 swapLocationOfElements($el1, $el2);201 });202 $el1.bind('touchend', function (e) {203 eventMonitorObject.elementOneMouseupRaised = true;204 eventMonitorObject.elementOneMouseupCount++;205 if (eventName === e.type)206 swapLocationOfElements($el1, $el2);207 });208 $el1.bind('click', function (e) {209 eventMonitorObject.elementOneClickRaised = true;210 eventMonitorObject.elementOneClickCount++;211 if (eventName === e.type)212 swapLocationOfElements($el1, $el2);213 });214 $el2.bind('touchstart', function (e) {215 eventMonitorObject.elementTwoMousedownRaised = true;216 eventMonitorObject.elementTwoMousedownCount++;217 if (eventName === e.type)218 swapLocationOfElements($el1, $el2);219 });220 $el2.bind('touchend', function (e) {221 eventMonitorObject.elementTwoMouseupRaised = true;222 eventMonitorObject.elementTwoMouseupCount++;223 if (eventName === e.type)224 swapLocationOfElements($el1, $el2);225 });226 $el2.bind('click', function (e) {227 eventMonitorObject.elementTwoClickRaised = true;228 eventMonitorObject.elementTwoClickCount++;229 if (eventName === e.type)230 swapLocationOfElements($el1, $el2);231 });232 if (checkMousemove) {233 $el1.bind('touchmove', function () {234 if (eventMonitorObject.elementOneMousedownRaised && !eventMonitorObject.elementOneMouseupRaised ||235 eventMonitorObject.elementTwoMousedownRaised && !eventMonitorObject.elementTwoMouseupRaised)236 eventMonitorObject.elementOneSelectRaised = true;237 });238 $el2.bind('touchmove', function () {239 if (eventMonitorObject.elementOneMousedownRaised && !eventMonitorObject.elementOneMouseupRaised ||240 eventMonitorObject.elementTwoMousedownRaised && !eventMonitorObject.elementTwoMouseupRaised)241 eventMonitorObject.elementTwoSelectRaised = true;242 });243 }244 };245 const createIFrame = function ($element, src, callback) {246 const $iFrame = $('<iframe/>')247 .attr('src', src)248 .css({249 width: '600px',250 height: '600px'251 })252 .addClass(TEST_ELEMENT_CLASS);253 $element.addClass(TEST_ELEMENT_CLASS);254 const onLoadHandler = function () {255 $($iFrame[0].contentWindow.document.body).append($element);256 $iFrame.unbind('load', onLoadHandler);257 callback();258 };259 $iFrame.bind('load', onLoadHandler);260 $iFrame.appendTo($('body'));261 };262 //tests263 QUnit.testDone(function () {264 if (!browserUtils.isIE)265 removeTestElements();266 });267 module('detection element under cursor after events simulation');268 asyncTest('click - change element on "mousedown" event', function () {269 const eventMonitorObject = createMouseMonitorEventObject();270 const $div1 = addDiv(100, 100).css('background-color', 'red');271 const $div2 = addDiv(100, 300).css('background-color', 'green');272 bindMouseHandlersToSwappingElements($div1, $div2, 'mousedown', eventMonitorObject);273 const click = new ClickAutomation($div1[0], new ClickOptions());274 click275 .run()276 .then(function () {277 ok(eventMonitorObject.elementOneMousedownRaised);278 ok(!eventMonitorObject.elementOneMouseupRaised);279 ok(!eventMonitorObject.elementOneClickRaised);280 ok(!eventMonitorObject.elementTwoMousedownRaised);281 ok(eventMonitorObject.elementTwoMouseupRaised);282 ok(!eventMonitorObject.elementTwoClickRaised);283 startNext();284 });285 });286 asyncTest('click - change element on "mouseup" event', function () {287 const eventMonitorObject = createMouseMonitorEventObject();288 const $div1 = addDiv(100, 100).css('background-color', 'red');289 const $div2 = addDiv(100, 300).css('background-color', 'green');290 bindMouseHandlersToSwappingElements($div1, $div2, 'mouseup', eventMonitorObject);291 const click = new ClickAutomation($div1[0], new ClickOptions());292 click293 .run()294 .then(function () {295 ok(eventMonitorObject.elementOneMousedownRaised);296 ok(eventMonitorObject.elementOneMouseupRaised);297 ok(eventMonitorObject.elementOneClickRaised);298 ok(!eventMonitorObject.elementTwoMousedownRaised);299 ok(!eventMonitorObject.elementTwoMouseupRaised);300 ok(!eventMonitorObject.elementTwoClickRaised);301 startNext();302 });303 });304 asyncTest('click - change element on "click" event', function () {305 const eventMonitorObject = createMouseMonitorEventObject();306 const $div1 = addDiv(100, 100).css('background-color', 'red');307 const $div2 = addDiv(100, 300).css('background-color', 'green');308 bindMouseHandlersToSwappingElements($div1, $div2, 'click', eventMonitorObject);309 const click = new ClickAutomation($div1[0], new ClickOptions());310 click311 .run()312 .then(function () {313 ok(eventMonitorObject.elementOneMousedownRaised);314 ok(eventMonitorObject.elementOneMouseupRaised);315 ok(eventMonitorObject.elementOneClickRaised);316 ok(!eventMonitorObject.elementTwoMousedownRaised);317 ok(!eventMonitorObject.elementTwoMouseupRaised);318 ok(!eventMonitorObject.elementTwoClickRaised);319 startNext();320 });321 });322 asyncTest('rclick - change element on "mousedown" event', function () {323 const eventMonitorObject = createMouseMonitorEventObject();324 const $div1 = addDiv(100, 100).css('background-color', 'red');325 const $div2 = addDiv(100, 300).css('background-color', 'green');326 bindMouseHandlersToSwappingElements($div1, $div2, 'mousedown', eventMonitorObject);327 const rclick = new RClickAutomation($div1[0], new ClickOptions());328 rclick329 .run()330 .then(function () {331 ok(eventMonitorObject.elementOneMousedownRaised);332 ok(!eventMonitorObject.elementOneMouseupRaised);333 ok(!eventMonitorObject.elementOneRClickRaised);334 ok(!eventMonitorObject.elementTwoMousedownRaised);335 ok(eventMonitorObject.elementTwoMouseupRaised);336 ok(eventMonitorObject.elementTwoRClickRaised);337 startNext();338 });339 });340 asyncTest('rclick - change element on "mouseup" event', function () {341 const eventMonitorObject = createMouseMonitorEventObject();342 const $div1 = addDiv(100, 100).css('background-color', 'red');343 const $div2 = addDiv(100, 300).css('background-color', 'green');344 bindMouseHandlersToSwappingElements($div1, $div2, 'mouseup', eventMonitorObject);345 const rclick = new RClickAutomation($div1[0], new ClickOptions());346 rclick347 .run()348 .then(function () {349 ok(eventMonitorObject.elementOneMousedownRaised);350 ok(eventMonitorObject.elementOneMouseupRaised);351 ok(!eventMonitorObject.elementOneRClickRaised);352 ok(!eventMonitorObject.elementTwoMousedownRaised);353 ok(!eventMonitorObject.elementTwoMouseupRaised);354 ok(eventMonitorObject.elementTwoRClickRaised);355 startNext();356 });357 });358 asyncTest('rclick - change element on "contextmenu" event', function () {359 const eventMonitorObject = createMouseMonitorEventObject();360 const $div1 = addDiv(100, 100).css('background-color', 'red');361 const $div2 = addDiv(100, 300).css('background-color', 'green');362 bindMouseHandlersToSwappingElements($div1, $div2, 'contextmenu', eventMonitorObject);363 const rclick = new RClickAutomation($div1[0], new ClickOptions());364 rclick365 .run()366 .then(function () {367 ok(eventMonitorObject.elementOneMousedownRaised);368 ok(eventMonitorObject.elementOneMouseupRaised);369 ok(eventMonitorObject.elementOneRClickRaised);370 ok(!eventMonitorObject.elementTwoMousedownRaised);371 ok(!eventMonitorObject.elementTwoMouseupRaised);372 ok(!eventMonitorObject.elementTwoRClickRaised);373 startNext();374 });375 });376 asyncTest('select - change element on "mousedown" event', function () {377 const eventMonitorObject = createMouseMonitorEventObject();378 const $input1 = addInputElement(200, 200, '12345');379 const $input2 = addInputElement(400, 400, 'qwerty');380 if (featureDetection.isTouchDevice)381 bindHandlerToTouchEvents($input1, $input2, 'touchstart', eventMonitorObject, true);382 else383 bindMouseHandlersToSwappingElements($input1, $input2, 'mousedown', eventMonitorObject, true);384 const selectText = new SelectTextAutomation($input1[0], 2, 4, {});385 selectText386 .run()387 .then(function () {388 ok(eventMonitorObject.elementOneMousedownRaised);389 ok(!eventMonitorObject.elementOneSelectRaised);390 ok(!eventMonitorObject.elementOneMouseupRaised);391 ok(!eventMonitorObject.elementTwoMousedownRaised);392 if (!featureDetection.isTouchDevice)393 ok(eventMonitorObject.elementTwoSelectRaised);394 ok(eventMonitorObject.elementTwoMouseupRaised);395 startNext();396 });397 });398 asyncTest('select - change element on "mouseup" event', function () {399 const eventMonitorObject = createMouseMonitorEventObject();400 const $input1 = addInputElement(200, 200, '12345');401 const $input2 = addInputElement(400, 400, 'qwerty');402 if (featureDetection.isTouchDevice)403 bindHandlerToTouchEvents($input1, $input2, 'touchend', eventMonitorObject, true);404 else405 bindMouseHandlersToSwappingElements($input1, $input2, 'mouseup', eventMonitorObject, true);406 const selectText = new SelectTextAutomation($input1[0], 2, 4, {});407 selectText408 .run()409 .then(function () {410 ok(eventMonitorObject.elementOneMousedownRaised);411 if (!featureDetection.isTouchDevice)412 ok(eventMonitorObject.elementOneSelectRaised);413 ok(eventMonitorObject.elementOneMouseupRaised);414 ok(!eventMonitorObject.elementTwoMousedownRaised);415 ok(!eventMonitorObject.elementTwoSelectRaised);416 ok(!eventMonitorObject.elementTwoMouseupRaised);417 startNext();418 });419 });420 asyncTest('dblclick - change element on first "mousedown" event', function () {421 const eventMonitorObject = createMouseMonitorEventObject();422 const $div1 = addDiv(100, 100).css('background-color', 'red');423 const $div2 = addDiv(100, 300).css('background-color', 'green');424 bindMouseHandlersToSwappingElements($div1, $div2, 'mousedown', eventMonitorObject);425 const dblclick = new DblClickAutomation($div1[0], new ClickOptions());426 dblclick427 .run()428 .then(function () {429 ok(eventMonitorObject.elementOneMousedownRaised);430 ok(!eventMonitorObject.elementOneMouseupRaised);431 ok(!eventMonitorObject.elementOneClickRaised);432 ok(!eventMonitorObject.elementOneDblClickRaised);433 equal(eventMonitorObject.elementOneMousedownCount, 1);434 ok(eventMonitorObject.elementTwoMousedownRaised);435 ok(eventMonitorObject.elementTwoMouseupRaised);436 ok(eventMonitorObject.elementTwoClickRaised);437 ok(eventMonitorObject.elementTwoDblClickRaised);438 equal(eventMonitorObject.elementTwoMousedownCount, 1);439 equal(eventMonitorObject.elementTwoMouseupCount, 2);440 equal(eventMonitorObject.elementTwoClickCount, 1);441 startNext();442 });443 });444 asyncTest('dblclick - change element on first "mouseup" event', function () {445 const eventMonitorObject = createMouseMonitorEventObject();446 const $div1 = addDiv(100, 100).css('background-color', 'red');447 const $div2 = addDiv(100, 300).css('background-color', 'green');448 bindMouseHandlersToSwappingElements($div1, $div2, 'mouseup', eventMonitorObject);449 const dblclick = new DblClickAutomation($div1[0], new ClickOptions());450 dblclick451 .run()452 .then(function () {453 ok(eventMonitorObject.elementOneMousedownRaised);454 ok(eventMonitorObject.elementOneMouseupRaised);455 ok(eventMonitorObject.elementOneClickRaised);456 ok(!eventMonitorObject.elementOneDblClickRaised);457 equal(eventMonitorObject.elementOneMousedownCount, 1);458 equal(eventMonitorObject.elementOneMouseupCount, 1);459 equal(eventMonitorObject.elementOneClickCount, 1);460 ok(eventMonitorObject.elementTwoMousedownRaised);461 ok(eventMonitorObject.elementTwoMouseupRaised);462 ok(eventMonitorObject.elementTwoClickRaised);463 ok(eventMonitorObject.elementTwoDblClickRaised);464 equal(eventMonitorObject.elementTwoMousedownCount, 1);465 equal(eventMonitorObject.elementTwoMouseupCount, 1);466 equal(eventMonitorObject.elementTwoClickCount, 1);467 startNext();468 });469 });470 asyncTest('dblclick - change element on first "click" event', function () {471 const eventMonitorObject = createMouseMonitorEventObject();472 const $div1 = addDiv(100, 100).css('background-color', 'red');473 const $div2 = addDiv(100, 300).css('background-color', 'green');474 bindMouseHandlersToSwappingElements($div1, $div2, 'click', eventMonitorObject);475 const dblclick = new DblClickAutomation($div1[0], new ClickOptions());476 dblclick477 .run()478 .then(function () {479 ok(eventMonitorObject.elementOneMousedownRaised);480 ok(eventMonitorObject.elementOneMouseupRaised);481 ok(eventMonitorObject.elementOneClickRaised);482 ok(!eventMonitorObject.elementOneDblClickRaised);483 equal(eventMonitorObject.elementOneMousedownCount, 1);484 equal(eventMonitorObject.elementOneMouseupCount, 1);485 equal(eventMonitorObject.elementOneClickCount, 1);486 ok(eventMonitorObject.elementTwoMousedownRaised);487 ok(eventMonitorObject.elementTwoMouseupRaised);488 ok(eventMonitorObject.elementTwoClickRaised);489 ok(eventMonitorObject.elementTwoDblClickRaised);490 equal(eventMonitorObject.elementTwoMousedownCount, 1);491 equal(eventMonitorObject.elementTwoMouseupCount, 1);492 equal(eventMonitorObject.elementTwoClickCount, 1);493 startNext();494 });495 });496 asyncTest('dblclick - change element on second "mousedown" event', function () {497 const eventMonitorObject = createMouseMonitorEventObject();498 const $div1 = addDiv(100, 100).css('background-color', 'red');499 const $div2 = addDiv(100, 300).css('background-color', 'green');500 bindMouseHandlersToSwappingElements($div1, $div2, 'mousedown', eventMonitorObject, false, true);501 const dblclick = new DblClickAutomation($div1[0], new ClickOptions());502 dblclick503 .run()504 .then(function () {505 ok(eventMonitorObject.elementOneMousedownRaised);506 ok(eventMonitorObject.elementOneMouseupRaised);507 ok(eventMonitorObject.elementOneClickRaised);508 ok(!eventMonitorObject.elementOneDblClickRaised);509 equal(eventMonitorObject.elementOneMousedownCount, 2);510 equal(eventMonitorObject.elementOneMouseupCount, 1);511 equal(eventMonitorObject.elementOneClickCount, 1);512 ok(!eventMonitorObject.elementTwoMousedownRaised);513 ok(eventMonitorObject.elementTwoMouseupRaised);514 ok(!eventMonitorObject.elementTwoClickRaised);515 ok(!eventMonitorObject.elementTwoDblClickRaised);516 equal(eventMonitorObject.elementTwoMouseupCount, 1);517 startNext();518 });519 });520 asyncTest('dblclick - change element on second "mouseup" event', function () {521 const eventMonitorObject = createMouseMonitorEventObject();522 const $div1 = addDiv(100, 100).css('background-color', 'red');523 const $div2 = addDiv(100, 300).css('background-color', 'green');524 bindMouseHandlersToSwappingElements($div1, $div2, 'mouseup', eventMonitorObject, false, true);525 const dblclick = new DblClickAutomation($div1[0], new ClickOptions());526 dblclick527 .run()528 .then(function () {529 ok(eventMonitorObject.elementOneMousedownRaised);530 ok(eventMonitorObject.elementOneMouseupRaised);531 ok(eventMonitorObject.elementOneClickRaised);532 ok(eventMonitorObject.elementOneDblClickRaised);533 equal(eventMonitorObject.elementOneMousedownCount, 2);534 equal(eventMonitorObject.elementOneMouseupCount, 2);535 equal(eventMonitorObject.elementOneClickCount, 2);536 ok(!eventMonitorObject.elementTwoMousedownRaised);537 ok(!eventMonitorObject.elementTwoMouseupRaised);538 ok(!eventMonitorObject.elementTwoClickRaised);539 ok(!eventMonitorObject.elementTwoDblClickRaised);540 startNext();541 });542 });543 asyncTest('dblclick - change element on second "click" event', function () {544 const eventMonitorObject = createMouseMonitorEventObject();545 const $div1 = addDiv(100, 100).css('background-color', 'red');546 const $div2 = addDiv(100, 300).css('background-color', 'green');547 bindMouseHandlersToSwappingElements($div1, $div2, 'click', eventMonitorObject, false, true);548 const dblclick = new DblClickAutomation($div1[0], new ClickOptions());549 dblclick550 .run()551 .then(function () {552 ok(eventMonitorObject.elementOneMousedownRaised);553 ok(eventMonitorObject.elementOneMouseupRaised);554 ok(eventMonitorObject.elementOneClickRaised);555 ok(eventMonitorObject.elementOneDblClickRaised);556 equal(eventMonitorObject.elementOneMousedownCount, 2);557 equal(eventMonitorObject.elementOneMouseupCount, 2);558 equal(eventMonitorObject.elementOneClickCount, 2);559 ok(!eventMonitorObject.elementTwoMousedownRaised);560 ok(!eventMonitorObject.elementTwoMouseupRaised);561 ok(!eventMonitorObject.elementTwoClickRaised);562 ok(!eventMonitorObject.elementTwoDblClickRaised);563 startNext();564 });565 });566 asyncTest('dblclick - change element on "dblclick" event', function () {567 const eventMonitorObject = createMouseMonitorEventObject();568 const $div1 = addDiv(100, 100).css('background-color', 'red');569 const $div2 = addDiv(100, 300).css('background-color', 'green');570 bindMouseHandlersToSwappingElements($div1, $div2, 'dblclick', eventMonitorObject);571 const dblclick = new DblClickAutomation($div1[0], new ClickOptions());572 dblclick573 .run()574 .then(function () {575 ok(eventMonitorObject.elementOneMousedownRaised);576 ok(eventMonitorObject.elementOneMouseupRaised);577 ok(eventMonitorObject.elementOneClickRaised);578 ok(eventMonitorObject.elementOneDblClickRaised);579 equal(eventMonitorObject.elementOneMousedownCount, 2);580 equal(eventMonitorObject.elementOneMouseupCount, 2);581 equal(eventMonitorObject.elementOneClickCount, 2);582 ok(!eventMonitorObject.elementTwoMousedownRaised);583 ok(!eventMonitorObject.elementTwoMouseupRaised);584 ok(!eventMonitorObject.elementTwoClickRaised);585 ok(!eventMonitorObject.elementTwoDblClickRaised);586 startNext();587 });588 });589 asyncTest('type - change element on "keydown" event', function () {590 const eventMonitorObject = createKeyMonitorEventObject();591 const $input1 = addInputElement(200, 200, '');592 const $input2 = addInputElement(400, 400, '');593 bindKeyHandlersToSwappingElements($input1, $input2, 'keydown', eventMonitorObject);594 const type = new TypeAutomation($input1[0], 'a', new TypeOptions({ offsetX: 5, offsetY: 5 }));595 type596 .run()597 .then(function () {598 const expectedEventMonitorObject = {599 elementsOneKeydownRaised: true,600 elementsOneKeypressRaised: false,601 elementsOneKeyupRaised: false,602 elementsTwoKeydownRaised: false,603 elementsTwoKeypressRaised: true && !browserUtils.isAndroid,604 elementsTwoKeyupRaised: true605 };606 deepEqual(eventMonitorObject, expectedEventMonitorObject);607 equal($input1[0].value, '');608 equal($input2[0].value, 'a');609 startNext();610 });611 });612 asyncTest('type - change element on "keypress" event', function () {613 const eventMonitorObject = createKeyMonitorEventObject();614 const $input1 = addInputElement(200, 200, '');615 const $input2 = addInputElement(400, 400, '');616 bindKeyHandlersToSwappingElements($input1, $input2, 'keypress', eventMonitorObject);617 const type = new TypeAutomation($input1[0], 'a', new TypeOptions({ offsetX: 5, offsetY: 5 }));618 type619 .run()620 .then(function () {621 const expectedEventMonitorObject = {622 elementsOneKeydownRaised: true,623 elementsOneKeypressRaised: true && !browserUtils.isAndroid,624 elementsOneKeyupRaised: browserUtils.isAndroid,625 elementsTwoKeydownRaised: false,626 elementsTwoKeypressRaised: false,627 elementsTwoKeyupRaised: true && !browserUtils.isAndroid628 };629 deepEqual(eventMonitorObject, expectedEventMonitorObject);630 equal($input1[0].value, 'a');631 equal($input2[0].value, '');632 startNext();633 });634 });635 asyncTest('type - change element on "keyup" event', function () {636 const eventMonitorObject = createKeyMonitorEventObject();637 const $input1 = addInputElement(200, 200, '');638 const $input2 = addInputElement(400, 400, '');639 bindKeyHandlersToSwappingElements($input1, $input2, 'keyup', eventMonitorObject);640 const type = new TypeAutomation($input1[0], 'a', new TypeOptions({ offsetX: 5, offsetY: 5 }));641 type642 .run()643 .then(function () {644 const expectedEventMonitorObject = {645 elementsOneKeydownRaised: true,646 elementsOneKeypressRaised: true && !browserUtils.isAndroid,647 elementsOneKeyupRaised: true,648 elementsTwoKeydownRaised: false,649 elementsTwoKeypressRaised: false,650 elementsTwoKeyupRaised: false651 };652 deepEqual(eventMonitorObject, expectedEventMonitorObject);653 equal($input1[0].value, 'a');654 equal($input2[0].value, '');655 startNext();656 });657 });658 asyncTest('T210448: Unnecessary typing occurs if element was changed after keypress event', function () {659 const iFrameSrc = window.QUnitGlobals.getResourceUrl('../../data/runner/iframe.html');660 const $inputIFrame = $('<input />');661 const testActions = function () {662 window.setTimeout(function () {663 $(document).bind('keypress', function () {664 $inputIFrame.focus();665 });666 const press = new PressAutomation(parseKeySequence('f').combinations, {});667 press668 .run()669 .then(function () {670 equal($inputIFrame[0].value, browserUtils.isWebKit ||671 browserUtils.isFirefox ? '' : 'f', 'iframe\'s input value is correct');672 startNext();673 });674 });675 };676 createIFrame($inputIFrame, iFrameSrc, testActions);677 });...
formatmatch.js
Source:formatmatch.js
1module('plugins.formatmatch');2/*trace 973*/3test('为ä¸è¡æ æ ¼å¼çæåå·2ç§ä¸åçæ ¼å¼', function () {4 var editor = te.obj[0];5 var range = te.obj[1];6 editor.setContent('<p><strong>first</strong></p><p><em>second</em></p><p>third</p>');7 setTimeout(function () {8 var body = editor.body;9 range.setStart(body.firstChild.firstChild.firstChild, 2).collapse(true).select();10 editor.execCommand('formatmatch');11 range.selectNode(body.lastChild.firstChild).select();12 ua.mouseup(body);13 editor.addListener('mouseup', function () {14 equal(editor.queryCommandState('formatmatch'), 0, 'å·åç¶æ为0');15 equal(body.lastChild.innerHTML.toLowerCase(), '<em>third</em>');16 start();17 });18 range.setStart(body.lastChild.previousSibling.firstChild.firstChild, 2).collapse(true).select();19 editor.execCommand('formatmatch');20 range.selectNode(body.lastChild.firstChild).select();21 ua.mouseup(body);22 /*editorèªèº«è¿æäºä¸ä¸ªmouseup侦å¬å¨ï¼å¿
é¡»å¨ç¨ä¾æ§è¡åè°ç¨ï¼å¦å_selectionChangeæ¹æ³è°ç¨æ æ³åå°windowï¼ä¼æ¥é*/23 }, 50);24 stop();25});26/*trace 971*/27test('trace 971:ææ ¼å¼æåå·èªå·±', function () {28 var editor = te.obj[0];29 var range = te.obj[1];30 editor.setContent('<p><strong>欢è¿å
临</strong></p>');31 setTimeout(function () {32 var body = editor.body;33 var text = body.firstChild.firstChild.firstChild;34 range.setStart(text, 2).collapse(true).select();35 editor.addListener('mouseup', function () {36 equal(editor.getContent(), '<p><strong>欢</strong><strong>è¿å
临</strong></p>');37 start();38 });39 editor.execCommand('formatmatch');40 range.setStart(text, 0).setEnd(text, 1).select();41 ua.mouseup(editor.body);42 }, 50);43 stop();44});45//TODO 1.2.646//test( 'trace 1553:å±
ä¸çæ é¢èªå·±å·èªå·±', function () {47// var editor = te.obj[0];48// var range = te.obj[1];49// editor.setContent( '<h2 style="text-align:center">欢è¿ä½¿ç¨UEditorç¼è¾å¨</h2>' );50// setTimeout( function () {51// var body = editor.body;52// var text = body.firstChild.firstChild;53// range.setStart( text, 2 ).setEnd( text, 4 ).select();54// editor.addListener( 'mouseup', function () {55// if ( (ua.browser.gecko && ua.browser.gecko < 2)||ua.browser.ie ==9)56// equal( editor.getContent(), '<h2 style="text-align:center;" >欢è¿ä½¿ç¨UEditorç¼è¾å¨</h2>' );57// else58// equal( editor.getContent(), '<h2 style="text-align:center" >欢è¿ä½¿ç¨UEditorç¼è¾å¨</h2>' );59// } );60// editor.execCommand( 'formatmatch' );61// range.setStart( text, 5 ).setEnd( text, 6 ).select();62// ua.mouseup( editor.body );63// setTimeout( function () {64// start();65// }, 500 );66// }, 50 );67// stop();68//} );69/*trace:969*/70test('æ ¼å¼å·çç¶æåå°ï¼ééååºé´', function () {71 var editor = te.obj[0];72 var range = te.obj[1];73 editor.setContent('hello');74 setTimeout(function () {75 var body = editor.body;76 range.setStart(body.firstChild.firstChild, 2).collapse().select();77 editor.addListener('mouseup', function () {78 equal(editor.queryCommandState('formatmatch'), 0, 'å·åç¶æ为0');79 start();80 });81 editor.execCommand('formatmatch');82 equal(editor.queryCommandState('formatmatch'), 1, 'å·åç¶æ为1');83 range.setStart(body.firstChild.firstChild, 0).setEnd(body.firstChild.firstChild, 2).select();84 /*æ ¼å¼å·ä¾¦å¬mouseupäºä»¶ï¼selectæ¹æ³ä¸è½è§¦åmouseupï¼å æ¤å¿
é¡»æå¨è§¦å*/85 ua.mouseup(editor.body);86 }, 50);87 stop();88});89/*trace 964*/90test('é»è®¤æ ¼å¼å¾çå·ææ ¼å¼çå¾ç', function () {91 var editor = te.obj[0];92 var range = te.obj[1];93 editor.setContent('hello<img width="200px" height="200px" style="float: left;background-color: red"/><img width="100px" height="200px"/>');94 setTimeout(function () {95 var img = editor.body.firstChild.lastChild;96 var img_new = img.previousSibling;97 range.selectNode(img).select();98 editor.addListener('mouseup', function () {99 equal(editor.queryCommandState('formatmatch'), 0, 'å·åç¶æ为0');100 if (!ua.browser.opera) {101 equal(img_new.style.cssFloat || img_new.style.styleFloat, 'none', 'check style float', 'float');102 }103 equal(img_new.style.backgroundColor, 'red', 'check background color');104 start();105 });106 editor.execCommand('formatmatch');107 range.selectNode(img_new).select();108 ua.mouseup(editor.body);109 }, 50);110 stop();111});112/*trace 965*/113test('ææµ®å¨æ¹å¼å¾çå·é»è®¤çå¾ç', function () {114 var editor = te.obj[0];115 var range = te.obj[1];116 editor.setContent('hello<img width="200px" height="200px" style="float: left;background-color: red;width: 200px"/><img width="100px" height="200px"/>');117 setTimeout(function () {118 var img = editor.body.firstChild.lastChild.previousSibling;119 var img_new = img.nextSibling;120 range.selectNode(img).select();121 editor.addListener('mouseup', function () {122 equal(editor.queryCommandState('formatmatch'), 0, 'å·åç¶æ为0');123 if (!ua.browser.opera) {124 equal(img_new.style.cssFloat || img_new.style.styleFloat, "left", 'check style float');125 }126 /*åªææµ®å¨æ¹å¼ä¼å·ï¼å
¶ä»é½ä¸å·*/127 equal(img_new.style.backgroundColor, '', 'check background color');128 equal(img_new.style.width, '', 'check style width');129 equal($(img_new).attr('width'), 100, 'check width');130 start();131 });132 editor.execCommand('formatmatch');133 range.selectNode(img_new).select();134 ua.mouseup(editor.body);135 }, 50);136 stop();137});138/*trace 1068*/139test('ç¬å ä¸è¡å¾çå·é»è®¤çå¾ç', function () {140 var editor = te.obj[0];141 var range = te.obj[1];142 editor.setContent('hello<img width="200px" height="200px" style="background-color: red;width: 200px;display:block;"/><img width="100px" height="200px"/>');143 setTimeout(function () {144 var img = editor.body.firstChild.lastChild.previousSibling;145 var img_new = img.nextSibling;146 range.selectNode(img).select();147 editor.addListener('mouseup', function () {148 equal(editor.queryCommandState('formatmatch'), 0, 'å·åç¶æ为0');149 if (!ua.browser.opera) {150 equal(img_new.style.display, "block", 'check display block');151 }152 start();153 });154 editor.execCommand('formatmatch');155 range.selectNode(img_new).select();156 ua.mouseup(editor.body);157 }, 50);158 stop();159});160/*trace 1068*/161test('é»è®¤çå¾çå¾çå·ç¬å ä¸è¡å¾ç', function () {162 var editor = te.obj[0];163 var range = te.obj[1];164 editor.setContent('hello<img width="200px" height="200px" style="background-color: red;width: 200px;display:block;"/><img width="100px" height="200px"/>');165 setTimeout(function () {166 var img = editor.body.firstChild.lastChild;167 var img_new = img.previousSibling;168 range.selectNode(img).select();169 editor.addListener('mouseup', function () {170 equal(editor.queryCommandState('formatmatch'), 0, 'å·åç¶æ为0');171 if (!ua.browser.opera) {172 equal(img_new.style.display, "inline", 'check display block');173 }174 start();175 });176 editor.execCommand('formatmatch');177 range.selectNode(img_new).select();178 ua.mouseup(editor.body);179 }, 50);180 stop();181});182/*trace 939*/183test('trace 939:åæ¯å表å·è¡¨æ ¼å
çåæ¯å表', function () {184 var editor = te.obj[0];185 var range = te.obj[1];186 editor.setContent('<ol style="list-style-type: lower-alpha;"><li>first</li><li>second</li></ol> <table><tbody><tr><td><ol style="list-style-type: lower-alpha;"><li>third</li><li>fourth</li></ol></td></tr></tbody></table>');187 setTimeout(function () {188 range.selectNode(editor.body.firstChild).select();189 editor.execCommand('formatmatch');190 editor.addListener('mouseup', function () {191 setTimeout(function () {192 equal(editor.body.lastChild.getElementsByTagName('ol')[0].style.listStyleType, 'lower-alpha', 'æ¥çå表æ¯å¦ä»ç¶æ¯åæ¯ç');193 start();194 }, 250);195 });196 range.selectNode(editor.body.lastChild).select();197 ua.mouseup(editor.body);198 }, 50);199 stop();200});201/*trace 938*/202test('ç¨æ ¼å¼å·å·æ´ä¸ªè¡¨æ ¼', function () {203 var editor = te.obj[0];204 var range = te.obj[1];205 editor.setContent('<p><span style="background: yellow">hello</span></p><table><tbody><tr><td></td></tr></tbody></table>');206 setTimeout(function () {207 range.selectNode(editor.body.firstChild).select();208 editor.addListener('mouseup', function () {209 /*æ´ä¸ªæ ¡éªæ¹æ³ä¸å¥½ï¼æ²¡æ解å³æ ¹æºçé®é¢ï¼210 æ ¡éªçç®çåºå½æ¯ä¸ä¼å¤åºä¸åºå½åºç°çå
容ï¼é¤äºmatchè¿å¯è½ä¼æå
¶ä»å¤åºæ¥çå
容211 ä½æ¯styleä¹ç±»çä¸è¥¿æ¯è¾é¾æ ¡éª*/212 equal(editor.body.innerHTML.indexOf('match'), -1, '没ææå
¥matchå ä½ç¬¦');213 start();214 });215 editor.execCommand('formatmatch');216 range.selectNode(editor.body.lastChild).select();217 editor.currentSelectedArr = [editor.body.lastChild.getElementsByTagName('td')[0]];218 ua.mouseup(editor.body);219 }, 50);220 stop();221});222test('è¡¨æ ¼å·ææ¬', function () {223 var editor = te.obj[0];224 var range = te.obj[1];225 editor.setContent('<p><span style="background: yellow">hello</span></p><table><tbody><tr><td>hello2</td></tr></tbody></table>');226 setTimeout(function () {227 range.selectNode(editor.body.lastChild).select();228// editor.currentSelectedArr = [editor.body.lastChild.getElementsByTagName('td')[0]];229 editor.addListener('mouseup', function () {230 equal(editor.body.firstChild.innerHTML, 'hello', ' å»æhelloçæ ¼å¼');231 start();232 });233 editor.execCommand('formatmatch');234 setTimeout(function () {235 range.selectNode(editor.body.firstChild).select();236 ua.mouseup(editor.body);237 }, 50);238 }, 50);239 stop();240});241/*trace 1096*/242test('trace 1096ï¼1761:è¡¨æ ¼å·è¡¨æ ¼', function () {243 var editor = te.obj[0];244 var range = te.obj[1];245 editor.setContent('<p><span style="background: yellow">hello</span></p><table><tbody><tr><td>hello2</td><td></td></tr><tr><td></td><td>hello3</td></tr></tbody></table>');246 setTimeout(function () {247 var trs = editor.body.lastChild.getElementsByTagName('tr');248 var ut = editor.getUETable(editor.body.lastChild);249 var cellsRange = ut.getCellsRange(trs[0].cells[0], trs[1].cells[0]);250 ut.setSelected(cellsRange);251 range.setStart(trs[0].cells[0], 0).collapse(true).select();252 var tds = editor.body.lastChild.getElementsByTagName('td');253 editor.addListener('mouseup', function () {254 ok(ua.isEqualArray(ut.selectedTds, [trs[0].cells[0], trs[1].cells[0]]), 'æ¯è¾éæ©çåºå');255// equal( editor.body.getElementsByTagName('table')[0].getAttribute( 'border' ), '1', 'è¡¨æ ¼è¾¹æ¡å®½åº¦ç¸å' ); /*å¦æ没ææå®borderï¼é£ä¹ä¸ä¸»å¨è®¾ç½®border*/256// equal( tds[index].style['borderWidth'], '1px', 'è¡¨æ ¼è¾¹æ¡å®½åº¦ç¸å' );257// equal( tds[index].style['borderStyle'], 'solid', 'è¡¨æ ¼è¾¹æ¡æ ·å¼ç¸å' );258 for (var index = 0; index < tds.length; index++) {259 equal(tds[index].style['borderColor'], tds[0].style['borderColor'], 'è¡¨æ ¼è¾¹æ¡é¢è²ç¸å');260 }261 start();262 });263 editor.execCommand('formatmatch');264// editor.currentSelectedArr = [tds[1], tds[3]];265 range.setStart(tds[1], 0).setEnd(tds[3], 1).select();266 ua.mouseup(editor.body);267// }, 50);268 }, 50);269 stop();270});271/*trace 1092, 991*/272test('ææ¬å·aæ ç¾(éå)', function () {273 var editor = te.obj[0];274 var range = te.obj[1];275 editor.setContent('hello<a href="http://www.baidu.com/">baidu</a>');276 setTimeout(function () {277 var p = editor.body.firstChild;278 var a = p.lastChild;279 range.selectNode(p.firstChild).select();280 /*ç»ææ¬å·ä¸åæ¯è²*/281 editor.execCommand('forecolor', 'rgb(255,0,0)');282 editor.addListener('mouseup', function () {283 var a = p.lastChild;284 ua.clearWhiteNode(a);285 equal(a.childNodes.length, 3, '3åèç¹');286 //1.2çæ¬ä¸ç©ºçspanéæå ä¸æçä¸å¯è§å符ï¼å·²ç»ä»æµè§å¨å¤å¶è¿æ¥äº287 ua.checkHTMLSameStyle('ba<span style=\"color: rgb(255,0,0)\"></span>idu', editor.document, a, 'check style');288 start();289 });290 range.selectNode(p.firstChild).select();291 editor.execCommand('formatmatch');292 range.setStart(p.lastChild.firstChild, 2).collapse(true).select();293 ua.mouseup(editor.body);294 }, 50);295 stop();296});297test('ç¹äºæ ¼å¼å·åä¸å·ææ¬åç¹ä¸æ¬¡æ ¼å¼å·', function () {298 var editor = te.obj[0];299 var range = te.obj[1];300 editor.setContent('<p><strong>first</strong></p><p><em>second</em></p><p>third</p>');301 setTimeout(function () {302 var body = editor.body;303 range.setStart(body.firstChild.firstChild.firstChild, 2).collapse(true).select();304 editor.addListener('mouseup', function () {305 equal(editor.__allListeners['mouseup'].length, num - 1, 'mouseupç侦å¬å¨è¢«å é¤');306 equal(editor.queryCommandState('formatmatch'), 0, 'å·åç¶æ为0');307 equal(body.lastChild.innerHTML.toLowerCase(), 'third');308 start();309 });310 editor.execCommand('formatmatch');311 var num = editor.__allListeners['mouseup'].length;312 /*å é¤mouseup侦å¬å¨åç´æ¥è¿å*/313 editor.execCommand('formatmatch');314 equal(editor.__allListeners['mouseup'].length, num - 1, 'å¦æ第ä¸æ¬¡æ ¼å¼å·æ²¡æ§è¡ï¼ä¸ä¸æ¬¡æ ¼å¼å·ä¼å
å»æä¸ä¸ä¸ªmouseupç侦å¬å¨ç¶åç´æ¥éåº');315 ua.mouseup(body);316 }, 50);317 stop();318});319test('aæ ç¾å·ææ¬', function () {320 var editor = te.obj[0];321 var range = te.obj[1];322 setTimeout(function () {323 editor.setContent('hello<a href="http://www.baidu.com/"><span style="color: red; ">baidu</span></a>');324 setTimeout(function () {325 var p = editor.body.firstChild;326 var a = p.lastChild;327 range.setStart(a.firstChild.firstChild, 1).collapse(true).select();328 editor.addListener('mouseup', function () {329 /*firefoxä¸æ¯æouterHTML*/330 equal(p.firstChild.innerHTML, 'hello', 'spanå
å«ææ¬');331 ok(p.firstChild.style['color'], 'red', 'æ¥çææ¬æ¯å¦æ·»å äºæ ·å¼');332 start();333 });334 editor.execCommand('formatmatch');335 range.selectNode(p.firstChild).select();336 ua.mouseup(editor.body);337 }, 50);338 },50);339 stop();...
magicbox.js
Source:magicbox.js
1(function() {2 var contentEditor = angular.module("contentEditor", []);3 4 // To create a empty resizable and draggable box5 contentEditor.directive("magicboxCreator", function($document, $compile) {6 return {7 restrict: 'A',8 link: function($scope, $element, $attrs) {9 $element.on("mousedown", function($event) {10 var newNode = $compile('<div class="contentEditorBox" ce-drag ce-resize></div>')($scope);11 12 newNode.css({13 position: "absolute",14 top: $event.pageY - 25 + "px",15 left: $event.pageX - 25 + "px",16 });17 18 angular.element($document[0].body).append(newNode);19 });20 }21 }22 });23 24 // To manage the drag25 contentEditor.directive("ceDrag", function($document) {26 return function($scope, $element, $attr) {27 var startX = 0, startY = 0;28 var newElement = angular.element('<div class="draggable"></div>');29 30 $element.append(newElement);31 newElement.on("mousedown", function($event) {32 $event.preventDefault();33 34 // To keep the last selected box in front35 angular.element(document.querySelectorAll(".contentEditorBox")).css("z-index", "0");36 $element.css("z-index", "1"); 37 38 startX = $event.pageX - $element[0].offsetLeft;39 startY = $event.pageY - $element[0].offsetTop;40 $document.on("mousemove", mousemove);41 $document.on("mouseup", mouseup);42 });43 44 function mousemove($event) {45 y = $event.pageY - startY;46 x = $event.pageX - startX;47 $element.css({48 top: y + "px",49 left: x + "px"50 });51 }52 53 function mouseup() {54 $document.off("mousemove", mousemove);55 $document.off("mouseup", mouseup);56 }57 };58 });59 60 // To manage the resize61 contentEditor.directive("ceResize", function($document) {62 return function($scope, $element, $attr) {63 64 // Function to manage resize up event65 var resizeUp = function($event) {66 var top = $event.pageY;67 var height = $element[0].offsetTop + $element[0].offsetHeight - $event.pageY;68 69 if ($event.pageY < $element[0].offsetTop + $element[0].offsetHeight - 50) {70 $element.css({71 top: top + "px",72 height: height + "px"73 });74 } else {75 $element.css({76 top: $element[0].offsetTop + $element[0].offsetHeight - 50 + "px",77 height: "50px"78 }); 79 }80 };81 82 // Function to manage resize right event83 var resizeRight = function($event) {84 var width = $event.pageX - $element[0].offsetLeft;85 86 if ($event.pageX > $element[0].offsetLeft + 50) {87 $element.css({88 width: width + "px"89 });90 } else {91 $element.css({92 width: "50px",93 });94 }95 };96 97 // Function to manage resize down event98 var resizeDown = function($event) {99 var height = $event.pageY - $element[0].offsetTop;100 101 if ($event.pageY > $element[0].offsetTop + 50) {102 $element.css({103 height: height + "px"104 });105 } else {106 $element.css({107 height: "50px"108 });109 }110 };111 112 // Function to manage resize left event113 var resizeLeft = function($event) {114 var left = $event.pageX;115 var width = $element[0].offsetLeft + $element[0].offsetWidth - $event.pageX;116 117 if ($event.pageX < $element[0].offsetLeft + $element[0].offsetWidth - 50) {118 $element.css({119 left: left + "px",120 width: width + "px"121 });122 } else {123 $element.css({124 left: $element[0].offsetLeft + $element[0].offsetWidth - 50 + "px",125 width: "50px"126 });127 }128 };129 130 // Create a div to catch resize up event131 var newElement = angular.element('<div class="n-resize"></div>');132 $element.append(newElement);133 newElement.on("mousedown", function() {134 $document.on("mousemove", mousemove);135 $document.on("mouseup", mouseup);136 137 function mousemove($event) {138 $event.preventDefault();139 resizeUp($event);140 }141 142 function mouseup() {143 $document.off("mousemove", mousemove);144 $document.off("mouseup", mouseup);145 }146 });147 148 // Create a div to catch resize right event149 newElement = angular.element('<div class="e-resize"></div>');150 $element.append(newElement);151 newElement.on("mousedown", function() {152 $document.on("mousemove", mousemove);153 $document.on("mouseup", mouseup);154 155 function mousemove($event) {156 $event.preventDefault();157 resizeRight($event);158 }159 160 function mouseup() {161 $document.off("mousemove", mousemove);162 $document.off("mouseup", mouseup);163 }164 });165 166 // Create a div to catch resize down event167 newElement = angular.element('<div class="s-resize"></div>');168 $element.append(newElement);169 newElement.on("mousedown", function() {170 $document.on("mousemove", mousemove);171 $document.on("mouseup", mouseup);172 173 function mousemove($event) {174 $event.preventDefault();175 resizeDown($event);176 }177 178 function mouseup() {179 $document.off("mousemove", mousemove);180 $document.off("mouseup", mouseup);181 }182 });183 184 // Create a div to catch resize left event185 newElement = angular.element('<div class="w-resize"></div>');186 $element.append(newElement);187 newElement.on("mousedown", function() {188 $document.on("mousemove", mousemove);189 $document.on("mouseup", mouseup);190 191 function mousemove($event) {192 $event.preventDefault();193 resizeLeft($event);194 }195 196 function mouseup() {197 $document.off("mousemove", mousemove);198 $document.off("mouseup", mouseup);199 }200 });201 202 // Create a div to catch resize up left event203 newElement = angular.element('<div class="nw-resize"></div>');204 $element.append(newElement);205 newElement.on("mousedown", function() {206 $document.on("mousemove", mousemove);207 $document.on("mouseup", mouseup);208 209 function mousemove($event) {210 $event.preventDefault();211 resizeUp($event);212 resizeLeft($event);213 }214 215 function mouseup() {216 $document.off("mousemove", mousemove);217 $document.off("mouseup", mouseup);218 }219 });220 221 // Create a div to catch resize up right event222 newElement = angular.element('<div class="ne-resize"></div>');223 $element.append(newElement);224 newElement.on("mousedown", function() {225 $document.on("mousemove", mousemove);226 $document.on("mouseup", mouseup);227 228 function mousemove($event) {229 $event.preventDefault();230 resizeUp($event);231 resizeRight($event);232 }233 234 function mouseup() {235 $document.off("mousemove", mousemove);236 $document.off("mouseup", mouseup);237 }238 });239 240 // Create a div to catch resize down right event241 newElement = angular.element('<div class="se-resize"></div>');242 $element.append(newElement);243 newElement.on("mousedown", function() {244 $document.on("mousemove", mousemove);245 $document.on("mouseup", mouseup);246 247 function mousemove($event) {248 $event.preventDefault();249 resizeDown($event);250 resizeRight($event);251 }252 253 function mouseup() {254 $document.off("mousemove", mousemove);255 $document.off("mouseup", mouseup);256 }257 });258 259 // Create a div to catch resize down left event260 newElement = angular.element('<div class="sw-resize"></div>');261 $element.append(newElement);262 newElement.on("mousedown", function() {263 $document.on("mousemove", mousemove);264 $document.on("mouseup", mouseup);265 266 function mousemove($event) {267 $event.preventDefault();268 resizeDown($event);269 resizeLeft($event);270 }271 272 function mouseup() {273 $document.off("mousemove", mousemove);274 $document.off("mouseup", mouseup);275 }276 });277 };278 });...
dragdrop.js
Source:dragdrop.js
1const el= document.querySelector(".item");2let isResizing = false;3el.addEventListener("mousedown" , mousedown);4function mousedown(e) {5 window.addEventListener("mousemove", mousemove);6 window.addEventListener("mouseup", mouseup);7 let prevX = e.clientX;8 let prevY = e.clientY;9 function mousemove(e) {10 if(!isResizing){11 let newX = prevX - e.clientX;12 let newY = prevY - e.clientY;13 const rect = el.getBoundingClientRect();14 el.style.left = rect.left - newX + "px";15 el.style.top = rect.top - newY + "px";16 prevX = e.clientX;17 prevY = e.clientY;18 }19 }20 function mouseup() {21 window.removeEventListener("mousemove", mousemove);22 window.removeEventListener("mouseup", mouseup);23 }24}25const resizers = document.querySelectorAll(".resizer");26let currentResizer;27for (let resizer of resizers){28 resizer.addEventListener("mousedown", mousedown);29 function mousedown(e) {30 31 currentResizer = e.target;32 isResizing = true;33 let prevX = e.clientX;34 let prevY = e.clientY;35 window.addEventListener('mousemove', mousemove);36 window.addEventListener('mouseup', mouseup);37 function mousemove(e) {38 const rect = el.getBoundingClientRect();39 if(currentResizer.classList.contains('se')){40 el.style.width = rect.width - (prevX - e.clientX) + "px";41 el.style.height = rect.height - (prevY - e.clientY) + "px";42 }43 else if(currentResizer.classList.contains('sw')){44 el.style.width = rect.width + (prevX - e.clientX) + "px";45 el.style.height = rect.height - (prevY - e.clientY) + "px";46 el.style.left = rect.left - (prevX - e.clientX) + "px";47 }48 else if(currentResizer.classList.contains('ne')){49 el.style.width = rect.width + (prevX - e.clientX) + "px";50 el.style.height = rect.height - (prevY - e.clientY) + "px";51 el.style.left = rect.left - (prevX - e.clientX) + "px";52 }53 else{54 el.style.width = rect.width + (prevX - e.clientX) + "px";55 el.style.height = rect.height + (prevY - e.clientY) + "px";56 el.style.top = rect.top - (prevY - e.clientY) + "px";57 el.style.left = rect.left - (prevX - e.clientX) + "px";58 }59 prevX = e.clientX;60 prevY = e.clientY;61 }62 function mouseup() {63 window.removeEventListener('mousemove',mousemove);64 window.removeEventListener('mouseup',mouseup);65 isResizing = false;66 }67 }...
imageCrop.js
Source:imageCrop.js
1const el = document.querySelector(".resizers");2let isResizing = false;3el.addEventListener("mousedown",mousedown);4function mousedown(e){5 window.addEventListener("mousemove",mousemove);6 window.addEventListener("mouseup",mouseup);7 let prevX = e.clientX;8 let prevY = e.clientY;9 10 function mousemove(e){11 if(!isResizing){12 const rect = el.getBoundingClientRect();13 let newX = prevX - e.clientX;14 let newY = prevY - e.clientY; 15 16 el.style.left = rect.left - newX + "px";17 el.style.top = rect.top - newY + "px";18 19 prevX = e.clientX;20 prevY = e.clientY;21 }22 }23 function mouseup(){24 window.removeEventListener("mousemove", mousemove);25 window.removeEventListener("mouseup",mouseup);26 }27}28const resizers = document.querySelectorAll(".resizer");29let currentResizer;30for(let resizer of resizers){31 resizer.addEventListener("mousedown", mousedown);32 function mousedown(e){33 currentResizer = e.target;34 isResizing = true;35 window.addEventListener("mousemove",mousemove);36 window.addEventListener("mouseup",mouseup);37 let prevX = e.clientX;38 let prevY = e.clientY;39 function mousemove(e){40 const rect = el.getBoundingClientRect();41 let newX = prevX - e.clientX;42 let newY = prevY - e.clientY;43 if(currentResizer.classList.contains("top-left")){44 el.style.width = rect.width + newX + "px";45 el.style.height = rect.height + newY + "px";46 el.style.top = rect.top - newY + "px";47 el.style.left = rect.left - newX + "px";48 } else if(currentResizer.classList.contains("top-right")){49 el.style.width = rect.width - newX + "px";50 el.style.height = rect.height + newY + "px";51 el.style.top = rect.top - newY + "px";52 } else if(currentResizer.classList.contains("bottom-left")){53 el.style.width = rect.width + newX + "px";54 el.style.height = rect.height - newY + "px";55 el.style.left = rect.left - newX + "px";56 } else {57 el.style.width = rect.width - newX + "px";58 el.style.height = rect.height - newY + "px";59 }60 prevX = e.clientX;61 prevY = e.clientY;62 }63 function mouseup(){64 window.removeEventListener("mousemove",mousemove);65 window.removeEventListener("mouseup",mouseup);66 isResizing = false;67 }68 }69}...
mouse-click-events.js
Source:mouse-click-events.js
...26 debug("This test requires DumpRenderTree. Click on the blue rect with different mouse buttons to log.")27 return;28 }29 eventSender.mouseDown(button);30 eventSender.mouseUp(button);31 eventSender.mouseDown(button);32 eventSender.mouseUp(button);33 // could test dragging here too34}35function testEvents(description, button, expectedString) {36 debug(description);37 sendEvents(button);38 shouldBeEqualToString("eventLog", expectedString);39 clearEventLog();40}41if (window.eventSender) {42 testEvents("Left Mouse Button", 0, "mousedown(0) mouseup(0) click(0) mousedown(0) mouseup(0) click(0) dblclick(0) ");43 testEvents("Middle Mouse Button", 1, "mousedown(1) mouseup(1) click(1) mousedown(1) mouseup(1) click(1) dblclick(1) ");44 testEvents("Right Mouse Button", 2, "mousedown(2) mouseup(2) mousedown(2) mouseup(2) ");45 testEvents("4th Mouse Button", 3, "mousedown(1) mouseup(1) click(1) mousedown(1) mouseup(1) click(1) dblclick(1) ");46}
MouseUp.js
Source:MouseUp.js
1'use strict';2/**3 * @module br/test/viewhandler/MouseUp4 */5var br = require('br/Core');6var Errors = require('br/Errors');7var ViewFixtureHandler = require('br/test/viewhandler/ViewFixtureHandler');8var Utils = require('br/test/Utils');9/**10 * @class11 * @alias module:br/test/viewhandler/MouseUp12 * @implements module:br/test/viewhandler/ViewFixtureHandler13 * 14 * @classdesc15 * <code>MouseUp</code> instances of <code>ViewFixtureHandler</code> can be used to trigger <code>mouseup</code> event for a view element.16 * Example usage:17 * 18 * <pre>when("test.page.(#aRealButton).mouseUp => true");</pre>19 */20function MouseUp() {21}22br.implement(MouseUp, ViewFixtureHandler);23MouseUp.prototype.set = function(eElement, mValues) {24 Utils.fireMouseEvent(eElement, 'mouseup', mValues);25};26MouseUp.prototype.get = function(eElement) {27 throw new Errors.InvalidTestError("The mouseUp event cannot be used in a doGiven or doThen");28};...
switcher.js
Source:switcher.js
1(function() {2 let mouseup = false;3 $('.switcher__label').mouseup(function(e) {4 mouseup = true;5 $(this).removeClass('focused');6 });7 $('.switcher__input').focus(function(e) {8 if (!mouseup) {9 $(this).parent().addClass('focused');10 }11 mouseup = false;12 });13 $('.switcher__input').blur(function(e) {14 $(this).parent().removeClass('focused');15 });16 $('.switcher-text__label').mouseup(function(e) {17 mouseup = true;18 $(this).removeClass('focused');19 });20 $('.switcher-text__input').focus(function(e) {21 if (!mouseup) {22 $(this).parent().addClass('focused');23 }24 mouseup = false;25 });26 $('.switcher-text__input').blur(function(e) {27 $(this).parent().removeClass('focused');28 });29 $('.switcher-icon__label').mouseup(function(e) {30 mouseup = true;31 $(this).removeClass('focused');32 });...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.mouse.move(100, 100);7 await page.mouse.down();8 await page.mouse.move(200, 200);9 await page.mouse.up();10 await browser.close();11})();12const { chromium } = require('playwright');13(async () => {14 const browser = await chromium.launch();15 const context = await browser.newContext();16 const page = await context.newPage();17 await page.mouse.move(100, 100);18 await page.mouse.down();19 await page.mouse.move(200, 200);20 await page.mouse.up();21 await browser.close();22})();23const puppeteer = require('puppeteer');24(async () => {25 const browser = await puppeteer.launch();26 const page = await browser.newPage();27 await page.mouse.move(100, 100);28 await page.mouse.down();29 await page.mouse.move(200, 200);30 await page.mouse.up();31 await browser.close();32})();33const { Builder, By, Key, until } = require('selenium-webdriver');34const chrome = require('selenium-webdriver/chrome');35(async function example() {36 let driver = await new Builder()37 .forBrowser('chrome')38 .setChromeOptions(new chrome.Options().headless())39 .build();40 try {41 await driver.actions({ bridge: true })42 .move({ x: 100, y: 100 })43 .click()44 .move({ x: 200, y: 200 })45 .click()46 .perform();47 } finally {48 await driver.quit();49 }50})();51const { remote } = require('webdriverio');52(async () => {53 const browser = await remote({54 capabilities: {55 }56 })
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.mouse.move(100, 100);7 await page.mouse.up();8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch({ headless: false });13 const context = await browser.newContext();14 const page = await context.newPage();15 await page.mouse.move(100, 100);16 await page.mouse.down();17 await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch({ headless: false });22 const context = await browser.newContext();23 const page = await context.newPage();24 await page.mouse.move(100, 100);25 await browser.close();26})();27const { chromium } = require('playwright');28(async () => {29 const browser = await chromium.launch({ headless: false });30 const context = await browser.newContext();31 const page = await context.newPage();32 await page.mouse.move(100, 100);33 await page.mouse.wheel({ deltaY: 100 });34 await browser.close();35})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.mouse.up();6 await browser.close();7})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.mouse.up();6 await page.screenshot({ path: 'screenshot.png' });7 await browser.close();8})();
Using AI Code Generation
1const { mouseUp } = require('playwright/lib/server/frames');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.click('input[title="Search"]');8 await page.fill('input[title="Search"]', 'Playwright');9 await page.press('input[title="Search"]', 'Enter');10 await page.waitForTimeout(5000);11 await mouseUp(page, { button: 'left', clickCount: 1 });12 await browser.close();13})();14Error: Protocol error (Input.dispatchMouseEvent): Invalid parameters button: "left"
Using AI Code Generation
1const {mouseUp} = require('playwright/lib/input');2await mouseUp(page, {button: 'left', x: 10, y: 10});3await page.mouse.move(10, 10);4await page.mouse.up();5const {mouseDown} = require('playwright/lib/input');6await mouseDown(page, {button: 'left', x: 10, y: 10});7await page.mouse.move(10, 10);8await page.mouse.down();9const {mouseMove} = require('playwright/lib/input');10await mouseMove(page, {button: 'left', x: 10, y: 10});11await page.mouse.move(10, 10);12const {mouseWheel} = require('playwright/lib/input');13await mouseWheel(page, {deltaX: 10, deltaY: 10});14await page.mouse.move(10, 10);15await page.mouse.wheel({deltaX: 10, deltaY: 10});16const {touchEnd} = require('playwright/lib/input');17await touchEnd(page, {x: 10, y: 10});18await page.touchscreen.tap(10, 10);19const {touchMove} = require('playwright/lib/input');20await touchMove(page, {x: 10, y: 10});21await page.touchscreen.tap(10, 10);22const {touchStart} = require('playwright/lib/input');23await touchStart(page, {x: 10, y: 10});24await page.touchscreen.tap(10, 10);25const {tap} = require('playwright/lib/input');26await tap(page, {x: 10, y: 10});27await page.touchscreen.tap(10, 10);
Using AI Code Generation
1const { mouseUp } = require('playwright/lib/input');2await mouseUp(page, { button: 'left', x: 100, y: 100 });3await page.mouse.up();4const { mouseDown } = require('playwright/lib/input');5await mouseDown(page, { button: 'left', x: 100, y: 100 });6await page.mouse.down();7const { mouseMove } = require('playwright/lib/input');8await mouseMove(page, { button: 'left', x: 100, y: 100 });9await page.mouse.move(100, 100);10const { mouseClick } = require('playwright/lib/input');11await mouseClick(page, { button: 'left', x: 100, y: 100 });12await page.mouse.click(100, 100);13const { mouseDown } = require('playwright/lib/input');14await mouseDown(page, { button: 'left', x: 100, y: 100 });15await page.mouse.down();16const { mouseUp } = require('playwright/lib/input');17await mouseUp(page, { button: 'left', x: 100, y: 100 });18await page.mouse.up();19const { mouseMove } = require('playwright/lib/input');20await mouseMove(page, { button: 'left', x: 100, y: 100 });21await page.mouse.move(100, 100);22const { mouseClick } = require('playwright/lib/input');23await mouseClick(page, { button: 'left', x: 100, y: 100 });24await page.mouse.click(100, 100);25const { mouseDown } = require('playwright/lib/input');
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
