How to use dragAndDrop method in Playwright Internal

Best JavaScript code snippet using playwright-internal

DragAndDrop.js

Source:DragAndDrop.js Github

copy

Full Screen

1/***2MochiKit.DragAndDrop 1.4.23See <http://mochikit.com/> for documentation, downloads, license, etc.4Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)5 Mochi-ized By Thomas Herve (_firstname_@nimail.org)6***/7MochiKit.Base._deps('DragAndDrop', ['Base', 'Iter', 'DOM', 'Signal', 'Visual', 'Position']);8MochiKit.DragAndDrop.NAME = 'MochiKit.DragAndDrop';9MochiKit.DragAndDrop.VERSION = '1.4.2';10MochiKit.DragAndDrop.__repr__ = function () {11 return '[' + this.NAME + ' ' + this.VERSION + ']';12};13MochiKit.DragAndDrop.toString = function () {14 return this.__repr__();15};16MochiKit.DragAndDrop.EXPORT = [17 "Droppable",18 "Draggable"19];20MochiKit.DragAndDrop.EXPORT_OK = [21 "Droppables",22 "Draggables"23];24MochiKit.DragAndDrop.Droppables = {25 /***26 Manage all droppables. Shouldn't be used, use the Droppable object instead.27 ***/28 drops: [],29 remove: function (element) {30 this.drops = MochiKit.Base.filter(function (d) {31 return d.element != MochiKit.DOM.getElement(element);32 }, this.drops);33 },34 register: function (drop) {35 this.drops.push(drop);36 },37 unregister: function (drop) {38 this.drops = MochiKit.Base.filter(function (d) {39 return d != drop;40 }, this.drops);41 },42 prepare: function (element) {43 MochiKit.Base.map(function (drop) {44 if (drop.isAccepted(element)) {45 if (drop.options.activeclass) {46 MochiKit.DOM.addElementClass(drop.element,47 drop.options.activeclass);48 }49 drop.options.onactive(drop.element, element);50 }51 }, this.drops);52 },53 findDeepestChild: function (drops) {54 deepest = drops[0];55 for (i = 1; i < drops.length; ++i) {56 if (MochiKit.DOM.isChildNode(drops[i].element, deepest.element)) {57 deepest = drops[i];58 }59 }60 return deepest;61 },62 show: function (point, element) {63 if (!this.drops.length) {64 return;65 }66 var affected = [];67 if (this.last_active) {68 this.last_active.deactivate();69 }70 MochiKit.Iter.forEach(this.drops, function (drop) {71 if (drop.isAffected(point, element)) {72 affected.push(drop);73 }74 });75 if (affected.length > 0) {76 drop = this.findDeepestChild(affected);77 MochiKit.Position.within(drop.element, point.page.x, point.page.y);78 drop.options.onhover(element, drop.element,79 MochiKit.Position.overlap(drop.options.overlap, drop.element));80 drop.activate();81 }82 },83 fire: function (event, element) {84 if (!this.last_active) {85 return;86 }87 MochiKit.Position.prepare();88 if (this.last_active.isAffected(event.mouse(), element)) {89 this.last_active.options.ondrop(element,90 this.last_active.element, event);91 }92 },93 reset: function (element) {94 MochiKit.Base.map(function (drop) {95 if (drop.options.activeclass) {96 MochiKit.DOM.removeElementClass(drop.element,97 drop.options.activeclass);98 }99 drop.options.ondesactive(drop.element, element);100 }, this.drops);101 if (this.last_active) {102 this.last_active.deactivate();103 }104 }105};106/** @id MochiKit.DragAndDrop.Droppable */107MochiKit.DragAndDrop.Droppable = function (element, options) {108 var cls = arguments.callee;109 if (!(this instanceof cls)) {110 return new cls(element, options);111 }112 this.__init__(element, options);113};114MochiKit.DragAndDrop.Droppable.prototype = {115 /***116 A droppable object. Simple use is to create giving an element:117 new MochiKit.DragAndDrop.Droppable('myelement');118 Generally you'll want to define the 'ondrop' function and maybe the119 'accept' option to filter draggables.120 ***/121 __class__: MochiKit.DragAndDrop.Droppable,122 __init__: function (element, /* optional */options) {123 var d = MochiKit.DOM;124 var b = MochiKit.Base;125 this.element = d.getElement(element);126 this.options = b.update({127 /** @id MochiKit.DragAndDrop.greedy */128 greedy: true,129 /** @id MochiKit.DragAndDrop.hoverclass */130 hoverclass: null,131 /** @id MochiKit.DragAndDrop.activeclass */132 activeclass: null,133 /** @id MochiKit.DragAndDrop.hoverfunc */134 hoverfunc: b.noop,135 /** @id MochiKit.DragAndDrop.accept */136 accept: null,137 /** @id MochiKit.DragAndDrop.onactive */138 onactive: b.noop,139 /** @id MochiKit.DragAndDrop.ondesactive */140 ondesactive: b.noop,141 /** @id MochiKit.DragAndDrop.onhover */142 onhover: b.noop,143 /** @id MochiKit.DragAndDrop.ondrop */144 ondrop: b.noop,145 /** @id MochiKit.DragAndDrop.containment */146 containment: [],147 tree: false148 }, options);149 // cache containers150 this.options._containers = [];151 b.map(MochiKit.Base.bind(function (c) {152 this.options._containers.push(d.getElement(c));153 }, this), this.options.containment);154 MochiKit.Style.makePositioned(this.element); // fix IE155 MochiKit.DragAndDrop.Droppables.register(this);156 },157 /** @id MochiKit.DragAndDrop.isContained */158 isContained: function (element) {159 if (this.options._containers.length) {160 var containmentNode;161 if (this.options.tree) {162 containmentNode = element.treeNode;163 } else {164 containmentNode = element.parentNode;165 }166 return MochiKit.Iter.some(this.options._containers, function (c) {167 return containmentNode == c;168 });169 } else {170 return true;171 }172 },173 /** @id MochiKit.DragAndDrop.isAccepted */174 isAccepted: function (element) {175 return ((!this.options.accept) || MochiKit.Iter.some(176 this.options.accept, function (c) {177 return MochiKit.DOM.hasElementClass(element, c);178 }));179 },180 /** @id MochiKit.DragAndDrop.isAffected */181 isAffected: function (point, element) {182 return ((this.element != element) &&183 this.isContained(element) &&184 this.isAccepted(element) &&185 MochiKit.Position.within(this.element, point.page.x,186 point.page.y));187 },188 /** @id MochiKit.DragAndDrop.deactivate */189 deactivate: function () {190 /***191 A droppable is deactivate when a draggable has been over it and left.192 ***/193 if (this.options.hoverclass) {194 MochiKit.DOM.removeElementClass(this.element,195 this.options.hoverclass);196 }197 this.options.hoverfunc(this.element, false);198 MochiKit.DragAndDrop.Droppables.last_active = null;199 },200 /** @id MochiKit.DragAndDrop.activate */201 activate: function () {202 /***203 A droppable is active when a draggable is over it.204 ***/205 if (this.options.hoverclass) {206 MochiKit.DOM.addElementClass(this.element, this.options.hoverclass);207 }208 this.options.hoverfunc(this.element, true);209 MochiKit.DragAndDrop.Droppables.last_active = this;210 },211 /** @id MochiKit.DragAndDrop.destroy */212 destroy: function () {213 /***214 Delete this droppable.215 ***/216 MochiKit.DragAndDrop.Droppables.unregister(this);217 },218 /** @id MochiKit.DragAndDrop.repr */219 repr: function () {220 return '[' + this.__class__.NAME + ", options:" + MochiKit.Base.repr(this.options) + "]";221 }222};223MochiKit.DragAndDrop.Draggables = {224 /***225 Manage draggables elements. Not intended to direct use.226 ***/227 drags: [],228 register: function (draggable) {229 if (this.drags.length === 0) {230 var conn = MochiKit.Signal.connect;231 this.eventMouseUp = conn(document, 'onmouseup', this, this.endDrag);232 this.eventMouseMove = conn(document, 'onmousemove', this,233 this.updateDrag);234 this.eventKeypress = conn(document, 'onkeypress', this,235 this.keyPress);236 }237 this.drags.push(draggable);238 },239 unregister: function (draggable) {240 this.drags = MochiKit.Base.filter(function (d) {241 return d != draggable;242 }, this.drags);243 if (this.drags.length === 0) {244 var disc = MochiKit.Signal.disconnect;245 disc(this.eventMouseUp);246 disc(this.eventMouseMove);247 disc(this.eventKeypress);248 }249 },250 activate: function (draggable) {251 // allows keypress events if window is not currently focused252 // fails for Safari253 window.focus();254 this.activeDraggable = draggable;255 },256 deactivate: function () {257 this.activeDraggable = null;258 },259 updateDrag: function (event) {260 if (!this.activeDraggable) {261 return;262 }263 var pointer = event.mouse();264 // Mozilla-based browsers fire successive mousemove events with265 // the same coordinates, prevent needless redrawing (moz bug?)266 if (this._lastPointer && (MochiKit.Base.repr(this._lastPointer.page) ==267 MochiKit.Base.repr(pointer.page))) {268 return;269 }270 this._lastPointer = pointer;271 this.activeDraggable.updateDrag(event, pointer);272 },273 endDrag: function (event) {274 if (!this.activeDraggable) {275 return;276 }277 this._lastPointer = null;278 this.activeDraggable.endDrag(event);279 this.activeDraggable = null;280 },281 keyPress: function (event) {282 if (this.activeDraggable) {283 this.activeDraggable.keyPress(event);284 }285 },286 notify: function (eventName, draggable, event) {287 MochiKit.Signal.signal(this, eventName, draggable, event);288 }289};290/** @id MochiKit.DragAndDrop.Draggable */291MochiKit.DragAndDrop.Draggable = function (element, options) {292 var cls = arguments.callee;293 if (!(this instanceof cls)) {294 return new cls(element, options);295 }296 this.__init__(element, options);297};298MochiKit.DragAndDrop.Draggable.prototype = {299 /***300 A draggable object. Simple instantiate :301 new MochiKit.DragAndDrop.Draggable('myelement');302 ***/303 __class__ : MochiKit.DragAndDrop.Draggable,304 __init__: function (element, /* optional */options) {305 var v = MochiKit.Visual;306 var b = MochiKit.Base;307 options = b.update({308 /** @id MochiKit.DragAndDrop.handle */309 handle: false,310 /** @id MochiKit.DragAndDrop.starteffect */311 starteffect: function (innerelement) {312 this._savedOpacity = MochiKit.Style.getStyle(innerelement, 'opacity') || 1.0;313 new v.Opacity(innerelement, {duration:0.2, from:this._savedOpacity, to:0.7});314 },315 /** @id MochiKit.DragAndDrop.reverteffect */316 reverteffect: function (innerelement, top_offset, left_offset) {317 var dur = Math.sqrt(Math.abs(top_offset^2) +318 Math.abs(left_offset^2))*0.02;319 return new v.Move(innerelement,320 {x: -left_offset, y: -top_offset, duration: dur});321 },322 /** @id MochiKit.DragAndDrop.endeffect */323 endeffect: function (innerelement) {324 new v.Opacity(innerelement, {duration:0.2, from:0.7, to:this._savedOpacity});325 },326 /** @id MochiKit.DragAndDrop.onchange */327 onchange: b.noop,328 /** @id MochiKit.DragAndDrop.zindex */329 zindex: 1000,330 /** @id MochiKit.DragAndDrop.revert */331 revert: false,332 /** @id MochiKit.DragAndDrop.scroll */333 scroll: false,334 /** @id MochiKit.DragAndDrop.scrollSensitivity */335 scrollSensitivity: 20,336 /** @id MochiKit.DragAndDrop.scrollSpeed */337 scrollSpeed: 15,338 // false, or xy or [x, y] or function (x, y){return [x, y];}339 /** @id MochiKit.DragAndDrop.snap */340 snap: false341 }, options);342 var d = MochiKit.DOM;343 this.element = d.getElement(element);344 if (options.handle && (typeof(options.handle) == 'string')) {345 this.handle = d.getFirstElementByTagAndClassName(null,346 options.handle, this.element);347 }348 if (!this.handle) {349 this.handle = d.getElement(options.handle);350 }351 if (!this.handle) {352 this.handle = this.element;353 }354 if (options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {355 options.scroll = d.getElement(options.scroll);356 this._isScrollChild = MochiKit.DOM.isChildNode(this.element, options.scroll);357 }358 MochiKit.Style.makePositioned(this.element); // fix IE359 this.delta = this.currentDelta();360 this.options = options;361 this.dragging = false;362 this.eventMouseDown = MochiKit.Signal.connect(this.handle,363 'onmousedown', this, this.initDrag);364 MochiKit.DragAndDrop.Draggables.register(this);365 },366 /** @id MochiKit.DragAndDrop.destroy */367 destroy: function () {368 MochiKit.Signal.disconnect(this.eventMouseDown);369 MochiKit.DragAndDrop.Draggables.unregister(this);370 },371 /** @id MochiKit.DragAndDrop.currentDelta */372 currentDelta: function () {373 var s = MochiKit.Style.getStyle;374 return [375 parseInt(s(this.element, 'left') || '0'),376 parseInt(s(this.element, 'top') || '0')];377 },378 /** @id MochiKit.DragAndDrop.initDrag */379 initDrag: function (event) {380 if (!event.mouse().button.left) {381 return;382 }383 // abort on form elements, fixes a Firefox issue384 var src = event.target();385 var tagName = (src.tagName || '').toUpperCase();386 if (tagName === 'INPUT' || tagName === 'SELECT' ||387 tagName === 'OPTION' || tagName === 'BUTTON' ||388 tagName === 'TEXTAREA') {389 return;390 }391 if (this._revert) {392 this._revert.cancel();393 this._revert = null;394 }395 var pointer = event.mouse();396 var pos = MochiKit.Position.cumulativeOffset(this.element);397 this.offset = [pointer.page.x - pos.x, pointer.page.y - pos.y];398 MochiKit.DragAndDrop.Draggables.activate(this);399 event.stop();400 },401 /** @id MochiKit.DragAndDrop.startDrag */402 startDrag: function (event) {403 this.dragging = true;404 if (this.options.selectclass) {405 MochiKit.DOM.addElementClass(this.element,406 this.options.selectclass);407 }408 if (this.options.zindex) {409 this.originalZ = parseInt(MochiKit.Style.getStyle(this.element,410 'z-index') || '0');411 this.element.style.zIndex = this.options.zindex;412 }413 if (this.options.ghosting) {414 this._clone = this.element.cloneNode(true);415 this.ghostPosition = MochiKit.Position.absolutize(this.element);416 this.element.parentNode.insertBefore(this._clone, this.element);417 }418 if (this.options.scroll) {419 if (this.options.scroll == window) {420 var where = this._getWindowScroll(this.options.scroll);421 this.originalScrollLeft = where.left;422 this.originalScrollTop = where.top;423 } else {424 this.originalScrollLeft = this.options.scroll.scrollLeft;425 this.originalScrollTop = this.options.scroll.scrollTop;426 }427 }428 MochiKit.DragAndDrop.Droppables.prepare(this.element);429 MochiKit.DragAndDrop.Draggables.notify('start', this, event);430 if (this.options.starteffect) {431 this.options.starteffect(this.element);432 }433 },434 /** @id MochiKit.DragAndDrop.updateDrag */435 updateDrag: function (event, pointer) {436 if (!this.dragging) {437 this.startDrag(event);438 }439 MochiKit.Position.prepare();440 MochiKit.DragAndDrop.Droppables.show(pointer, this.element);441 MochiKit.DragAndDrop.Draggables.notify('drag', this, event);442 this.draw(pointer);443 this.options.onchange(this);444 if (this.options.scroll) {445 this.stopScrolling();446 var p, q;447 if (this.options.scroll == window) {448 var s = this._getWindowScroll(this.options.scroll);449 p = new MochiKit.Style.Coordinates(s.left, s.top);450 q = new MochiKit.Style.Coordinates(s.left + s.width,451 s.top + s.height);452 } else {453 p = MochiKit.Position.page(this.options.scroll);454 p.x += this.options.scroll.scrollLeft;455 p.y += this.options.scroll.scrollTop;456 p.x += (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0);457 p.y += (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);458 q = new MochiKit.Style.Coordinates(p.x + this.options.scroll.offsetWidth,459 p.y + this.options.scroll.offsetHeight);460 }461 var speed = [0, 0];462 if (pointer.page.x > (q.x - this.options.scrollSensitivity)) {463 speed[0] = pointer.page.x - (q.x - this.options.scrollSensitivity);464 } else if (pointer.page.x < (p.x + this.options.scrollSensitivity)) {465 speed[0] = pointer.page.x - (p.x + this.options.scrollSensitivity);466 }467 if (pointer.page.y > (q.y - this.options.scrollSensitivity)) {468 speed[1] = pointer.page.y - (q.y - this.options.scrollSensitivity);469 } else if (pointer.page.y < (p.y + this.options.scrollSensitivity)) {470 speed[1] = pointer.page.y - (p.y + this.options.scrollSensitivity);471 }472 this.startScrolling(speed);473 }474 // fix AppleWebKit rendering475 if (/AppleWebKit/.test(navigator.appVersion)) {476 window.scrollBy(0, 0);477 }478 event.stop();479 },480 /** @id MochiKit.DragAndDrop.finishDrag */481 finishDrag: function (event, success) {482 var dr = MochiKit.DragAndDrop;483 this.dragging = false;484 if (this.options.selectclass) {485 MochiKit.DOM.removeElementClass(this.element,486 this.options.selectclass);487 }488 if (this.options.ghosting) {489 // XXX: from a user point of view, it would be better to remove490 // the node only *after* the MochiKit.Visual.Move end when used491 // with revert.492 MochiKit.Position.relativize(this.element, this.ghostPosition);493 MochiKit.DOM.removeElement(this._clone);494 this._clone = null;495 }496 if (success) {497 dr.Droppables.fire(event, this.element);498 }499 dr.Draggables.notify('end', this, event);500 var revert = this.options.revert;501 if (revert && typeof(revert) == 'function') {502 revert = revert(this.element);503 }504 var d = this.currentDelta();505 if (revert && this.options.reverteffect) {506 this._revert = this.options.reverteffect(this.element,507 d[1] - this.delta[1], d[0] - this.delta[0]);508 } else {509 this.delta = d;510 }511 if (this.options.zindex) {512 this.element.style.zIndex = this.originalZ;513 }514 if (this.options.endeffect) {515 this.options.endeffect(this.element);516 }517 dr.Draggables.deactivate();518 dr.Droppables.reset(this.element);519 },520 /** @id MochiKit.DragAndDrop.keyPress */521 keyPress: function (event) {522 if (event.key().string != "KEY_ESCAPE") {523 return;524 }525 this.finishDrag(event, false);526 event.stop();527 },528 /** @id MochiKit.DragAndDrop.endDrag */529 endDrag: function (event) {530 if (!this.dragging) {531 return;532 }533 this.stopScrolling();534 this.finishDrag(event, true);535 event.stop();536 },537 /** @id MochiKit.DragAndDrop.draw */538 draw: function (point) {539 var pos = MochiKit.Position.cumulativeOffset(this.element);540 var d = this.currentDelta();541 pos.x -= d[0];542 pos.y -= d[1];543 if (this.options.scroll && (this.options.scroll != window && this._isScrollChild)) {544 pos.x -= this.options.scroll.scrollLeft - this.originalScrollLeft;545 pos.y -= this.options.scroll.scrollTop - this.originalScrollTop;546 }547 var p = [point.page.x - pos.x - this.offset[0],548 point.page.y - pos.y - this.offset[1]];549 if (this.options.snap) {550 if (typeof(this.options.snap) == 'function') {551 p = this.options.snap(p[0], p[1]);552 } else {553 if (this.options.snap instanceof Array) {554 var i = -1;555 p = MochiKit.Base.map(MochiKit.Base.bind(function (v) {556 i += 1;557 return Math.round(v/this.options.snap[i]) *558 this.options.snap[i];559 }, this), p);560 } else {561 p = MochiKit.Base.map(MochiKit.Base.bind(function (v) {562 return Math.round(v/this.options.snap) *563 this.options.snap;564 }, this), p);565 }566 }567 }568 var style = this.element.style;569 if ((!this.options.constraint) ||570 (this.options.constraint == 'horizontal')) {571 style.left = p[0] + 'px';572 }573 if ((!this.options.constraint) ||574 (this.options.constraint == 'vertical')) {575 style.top = p[1] + 'px';576 }577 if (style.visibility == 'hidden') {578 style.visibility = ''; // fix gecko rendering579 }580 },581 /** @id MochiKit.DragAndDrop.stopScrolling */582 stopScrolling: function () {583 if (this.scrollInterval) {584 clearInterval(this.scrollInterval);585 this.scrollInterval = null;586 MochiKit.DragAndDrop.Draggables._lastScrollPointer = null;587 }588 },589 /** @id MochiKit.DragAndDrop.startScrolling */590 startScrolling: function (speed) {591 if (!speed[0] && !speed[1]) {592 return;593 }594 this.scrollSpeed = [speed[0] * this.options.scrollSpeed,595 speed[1] * this.options.scrollSpeed];596 this.lastScrolled = new Date();597 this.scrollInterval = setInterval(MochiKit.Base.bind(this.scroll, this), 10);598 },599 /** @id MochiKit.DragAndDrop.scroll */600 scroll: function () {601 var current = new Date();602 var delta = current - this.lastScrolled;603 this.lastScrolled = current;604 if (this.options.scroll == window) {605 var s = this._getWindowScroll(this.options.scroll);606 if (this.scrollSpeed[0] || this.scrollSpeed[1]) {607 var dm = delta / 1000;608 this.options.scroll.scrollTo(s.left + dm * this.scrollSpeed[0],609 s.top + dm * this.scrollSpeed[1]);610 }611 } else {612 this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000;613 this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000;614 }615 var d = MochiKit.DragAndDrop;616 MochiKit.Position.prepare();617 d.Droppables.show(d.Draggables._lastPointer, this.element);618 d.Draggables.notify('drag', this);619 if (this._isScrollChild) {620 d.Draggables._lastScrollPointer = d.Draggables._lastScrollPointer || d.Draggables._lastPointer;621 d.Draggables._lastScrollPointer.x += this.scrollSpeed[0] * delta / 1000;622 d.Draggables._lastScrollPointer.y += this.scrollSpeed[1] * delta / 1000;623 if (d.Draggables._lastScrollPointer.x < 0) {624 d.Draggables._lastScrollPointer.x = 0;625 }626 if (d.Draggables._lastScrollPointer.y < 0) {627 d.Draggables._lastScrollPointer.y = 0;628 }629 this.draw(d.Draggables._lastScrollPointer);630 }631 this.options.onchange(this);632 },633 _getWindowScroll: function (win) {634 var vp, w, h;635 MochiKit.DOM.withWindow(win, function () {636 vp = MochiKit.Style.getViewportPosition(win.document);637 });638 if (win.innerWidth) {639 w = win.innerWidth;640 h = win.innerHeight;641 } else if (win.document.documentElement && win.document.documentElement.clientWidth) {642 w = win.document.documentElement.clientWidth;643 h = win.document.documentElement.clientHeight;644 } else {645 w = win.document.body.offsetWidth;646 h = win.document.body.offsetHeight;647 }648 return {top: vp.y, left: vp.x, width: w, height: h};649 },650 /** @id MochiKit.DragAndDrop.repr */651 repr: function () {652 return '[' + this.__class__.NAME + ", options:" + MochiKit.Base.repr(this.options) + "]";653 }654};655MochiKit.DragAndDrop.__new__ = function () {656 MochiKit.Base.nameFunctions(this);657 this.EXPORT_TAGS = {658 ":common": this.EXPORT,659 ":all": MochiKit.Base.concat(this.EXPORT, this.EXPORT_OK)660 };661};662MochiKit.DragAndDrop.__new__();...

Full Screen

Full Screen

assign-scopes.jsx

Source:assign-scopes.jsx Github

copy

Full Screen

1import React from "react";2import styled from "styled-components";3import { onDragOver, onDrop, DragAndDrop } from "./drag-and-drop";4import * as token from "../utils/tokens";5import ColorSwatch from "./color-swatch";6const StyledAssignScopes = styled.div``;7const StyledScopeHeader = styled.h1`8 display: flex;9 align-items: center;10 justify-content: space-between;11 padding: 10px 0;12 &&:first-child {13 margin-top: 0;14 }15`;16const StyledScopes = styled.div`17 border: 1px solid #333b47;18 border-radius: 4px;19 background-color: #22252a;20 padding: 10px;21 margin-bottom: 20px;22 display: block;23`;24const ScopeHeader = ({ children, color }) => {25 return (26 <StyledScopeHeader data-color={color} className="scope-header open">27 {children}28 </StyledScopeHeader>29 );30};31const Scopes = ({ children }) => {32 return (33 <StyledScopes className="scope-list" onDrop={onDrop} onDragOver={onDragOver}>34 {children}35 </StyledScopes>36 );37};38const AssignScopes = () => {39 return (40 <StyledAssignScopes>41 <ScopeHeader color="Black +4">42 Black 4043 <ColorSwatch className="black_4" hex="#5a5e66"></ColorSwatch>44 </ScopeHeader>45 <Scopes>46 <DragAndDrop token={token.comment}>Comments</DragAndDrop>47 </Scopes>48 <ScopeHeader color="White">49 White50 <ColorSwatch className="white_0" hex="#d5d9e2"></ColorSwatch>51 </ScopeHeader>52 <Scopes></Scopes>53 <ScopeHeader color="White -2">54 White 2055 <ColorSwatch className="white-dark" hex="#ABB1BF"></ColorSwatch>56 </ScopeHeader>57 <Scopes>58 <DragAndDrop token={token.brace}>Braces</DragAndDrop>59 <DragAndDrop token={token.brackets}>Brackets</DragAndDrop>60 <DragAndDrop token={token.embedded}>Embedded</DragAndDrop>61 <DragAndDrop token={token.foreground}>Foreground</DragAndDrop>62 <DragAndDrop token={token.propertyName}>Property Names</DragAndDrop>63 <DragAndDrop token={token.htmlBrackets}>HTML Brackets</DragAndDrop>64 <DragAndDrop token={token.operator}>Operators</DragAndDrop>65 <DragAndDrop token={token.delimiter}>Delimiters</DragAndDrop>66 </Scopes>67 <ScopeHeader color="Red">68 Red <ColorSwatch className="red" hex="#e06c75"></ColorSwatch>69 </ScopeHeader>70 <Scopes>71 <DragAndDrop token={token.objectKey}>Object Keys</DragAndDrop>72 <DragAndDrop token={token.objectProperty}>Object Property</DragAndDrop>73 <DragAndDrop token={token.keywordImportAll}>Import All</DragAndDrop>74 <DragAndDrop token={token.tag}>HTML Tags</DragAndDrop>75 <DragAndDrop token={token.variableProperty}>Property Variable</DragAndDrop>76 <DragAndDrop token={token.variable}>Variables</DragAndDrop>77 </Scopes>78 <ScopeHeader color="Green">79 Green<ColorSwatch className="green" hex="#98C379"></ColorSwatch>80 </ScopeHeader>81 <Scopes>82 <DragAndDrop token={token.string}>Strings</DragAndDrop>83 </Scopes>84 <ScopeHeader color="Yellow">85 Yellow86 <ColorSwatch hex="#E5C07B" className="yellow"></ColorSwatch>87 </ScopeHeader>88 <Scopes>89 <DragAndDrop token={token.attribute}>Attributes</DragAndDrop>90 <DragAndDrop token={token.keywordThis}>This Keyword</DragAndDrop>91 <DragAndDrop token={token.variableObj}>Objects</DragAndDrop>92 </Scopes>93 <ScopeHeader color="Orange">94 Orange95 <ColorSwatch hex="#D19A66" className="orange"></ColorSwatch>96 </ScopeHeader>97 <Scopes>98 <DragAndDrop token={token.number}>Numbers</DragAndDrop>99 <DragAndDrop token={token.unit}>Units</DragAndDrop>100 <DragAndDrop token={token.color}>Color Values</DragAndDrop>101 <DragAndDrop token={token.selectorClass}>Class Selectors</DragAndDrop>102 </Scopes>103 <ScopeHeader color="Blue">104 Blue105 <ColorSwatch hex="#61AFEF" className="blue"></ColorSwatch>106 </ScopeHeader>107 <Scopes>108 <DragAndDrop token={token.component}>Components</DragAndDrop>109 <DragAndDrop token={token.propertyValue}>Property Values</DragAndDrop>110 <DragAndDrop token={token.functCall}>Function Calls</DragAndDrop>111 <DragAndDrop token={token.escapeChar}>Escape Characters</DragAndDrop>112 </Scopes>113 <ScopeHeader color="Magenta">114 Magenta115 <ColorSwatch hex="#C678DD" className="magenta"></ColorSwatch>116 </ScopeHeader>117 <Scopes>118 <DragAndDrop token={token.builtIn}>Built In Methods</DragAndDrop>119 <DragAndDrop token={token.keyword}>Keywords</DragAndDrop>120 <DragAndDrop token={token.keywordNull}>Null</DragAndDrop>121 <DragAndDrop token={token.keywordFunction}>Function Keyword</DragAndDrop>122 <DragAndDrop token={token.operatorLogical}>Logical Operators</DragAndDrop>123 <DragAndDrop token={token.dataType}>Data Types</DragAndDrop>124 <DragAndDrop token={token.keywordImportant}>Important Keyword</DragAndDrop>125 <DragAndDrop token={token.keywordAtRule}>At Rule Keyword</DragAndDrop>126 </Scopes>127 <ScopeHeader color="Cyan">128 Cyan129 <ColorSwatch hex="#56B6C2" className="cyan"></ColorSwatch>130 </ScopeHeader>131 <Scopes>132 <DragAndDrop token={token.supportConst}>Constant Properties</DragAndDrop>133 <DragAndDrop token={token.templateExp}>Template Expression</DragAndDrop>134 <DragAndDrop token={token.constant}>Constants</DragAndDrop>135 <DragAndDrop token={token.selectorId}>ID Selectors</DragAndDrop>136 <DragAndDrop token={token.boolean}>Booleans</DragAndDrop>137 </Scopes>138 </StyledAssignScopes>139 );140};...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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.setViewportSize({ width: 1280, height: 800 });7 await page.waitForSelector('iframe');8 const frame = page.frame({ name: 'iframeResult' });9 const [response] = await Promise.all([10 frame.dragAndDrop('#drag1', '#div2'),11 ]);12 await page.screenshot({ path: `dragAndDrop.png` });13 await browser.close();14})();15const { chromium } = require('playwright');16(async () => {17 const browser = await chromium.launch();18 const context = await browser.newContext();19 const page = await context.newPage();20 await page.setViewportSize({ width: 1280, height: 800 });21 await page.waitForSelector('iframe');22 const frame = page.frame({ name: 'iframeResult' });23 const [response] = await Promise.all([24 frame.dragAndDrop('#drag1', '#div2'),25 ]);26 await page.screenshot({ path: `dragAndDrop.png` });27 await browser.close();28})();

Full Screen

Using AI Code Generation

copy

Full Screen

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.click('text=Try it');7 await page.waitForSelector('#iframeResult');8 const frame = await page.frame({ name: 'iframeResult' });9 const elementHandle = await frame.$('#drag1');10 await elementHandle.dragAndDrop(frame.$('#div2'));11 await browser.close();12})();

Full Screen

Using AI Code Generation

copy

Full Screen

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.dragAndDrop('id=drag1', 'id=div2');7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.dragAndDrop('id=drag1', 'id=div2');15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.dragAndDrop('id=drag1', 'id=div2');23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.dragAndDrop('id=drag1', 'id=div2');31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.dragAndDrop('id=drag1', 'id=div2');

Full Screen

Using AI Code Generation

copy

Full Screen

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 const drag = await page.$('#drag1');7 const drop = await page.$('#div2');8 await dragAndDrop(page, drag, drop);9 await page.screenshot({ path: `drag-drop.png` });10 await browser.close();11})();12async function dragAndDrop(page, drag, drop) {13 await page.evaluate((drag, drop) => {14 function createCustomEvent(type) {15 const event = new CustomEvent(type, { bubbles: true });16 Object.defineProperty(event, 'dataTransfer', {17 value: {18 data: {},19 setData: function (key, val) {20 this.data[key] = val;21 },22 getData: function (key) {23 return this.data[key];24 }25 },26 });27 return event;28 }29 const dispatchEvent = (node, type, event) => {30 node.dispatchEvent(event);31 };32 const dragStartEvent = createCustomEvent('dragstart');33 dispatchEvent(drag, 'dragstart', dragStartEvent);34 const dropEvent = createCustomEvent('drop');35 Object.defineProperty(dropEvent, 'dataTransfer', {36 });37 dispatchEvent(drop, 'drop', dropEvent);38 const dragEndEvent = createCustomEvent('dragend');39 Object.defineProperty(dragEndEvent, 'dataTransfer', {40 });41 dispatchEvent(drag, 'dragend', dragEndEvent);42 }, drag, drop);43}

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.click('#drag1');6 await page.mouse.down();7 await page.mouse.move(500, 0);8 await page.mouse.up();9 await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13 const browser = await chromium.launch();14 const page = await browser.newPage();15 const dragElement = await page.$('#drag1');16 const dropElement = await page.$('#div2');17 await dragElement.dragAndDrop(dropElement);18 await browser.close();19})();

Full Screen

Using AI Code Generation

copy

Full Screen

1const { dragAndDrop } = require('playwright/lib/internal/selectorEngine');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch({ headless: false });5 const context = await browser.newContext();6 const page = await context.newPage();7 const source = await page.$('#column-a');8 const target = await page.$('#column-b');9 await dragAndDrop(page, source, target);10 await browser.close();11})();

Full Screen

Using AI Code Generation

copy

Full Screen

1const { dragAndDrop } = require('@playwright/test');2await dragAndDrop(page, selector1, selector2);3const { dragAndDrop } = require('@playwright/test');4await dragAndDrop(page, selector1, selector2);5### `dragAndDropWithData(page, selector1, selector2, data)`6const { dragAndDropWithData } = require('@playwright/test');7await dragAndDropWithData(page, selector1, selector2, data);8const { dragAndDropWithData } = require('@playwright/test');9await dragAndDropWithData(page, selector1, selector2, data);10### `dragAndDropFile(page, selector1, selector2, filePath)`11const { dragAndDropFile } = require('@playwright/test');12await dragAndDropFile(page, selector1, selector2, filePath);13const { dragAndDropFile } = require('@playwright/test');14await dragAndDropFile(page, selector1

Full Screen

Using AI Code Generation

copy

Full Screen

1const { dragAndDrop } = require('playwright/lib/helper');2async function dragAndDropTest(page) {3 const source = await page.$('#column-a');4 const target = await page.$('#column-b');5 await dragAndDrop(page, source, target);6}7dragAndDropTest(page);8See [CONTRIBUTING.md](

Full Screen

Using AI Code Generation

copy

Full Screen

1const { dragAndDrop } = require('playwright/lib/utils/dragAndDrop');2const fs = require('fs');3const dataTransfer = new DataTransfer();4dataTransfer.items.add(fs.readFileSync('/Users/username/Desktop/file.txt'), 'text/plain');5await dragAndDrop(page, '#target', dataTransfer);6const { dragAndDrop } = require('playwright/lib/utils/dragAndDrop');7const fs = require('fs');8const dataTransfer = new DataTransfer();9dataTransfer.items.add(fs.readFileSync('/Users/username/Desktop/file.txt'), 'text/plain');10await dragAndDrop(page, '#target', dataTransfer);11const { dragAndDrop } = require('playwright/lib/utils/dragAndDrop');12const fs = require('fs');13const dataTransfer = new DataTransfer();14dataTransfer.items.add(fs.readFileSync('/Users/username/Desktop/file.txt'), 'text/plain');

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful