How to use dragAndDrop method in Puppeteer

Best JavaScript code snippet using puppeteer

DragAndDrop.js

Source:DragAndDrop.js

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__();...

assign-scopes.jsx

Source:assign-scopes.jsx

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};...

Using AI Code Generation

1const puppeteer = require('puppeteer');2const dragAndDrop = require('puppeteer-drag-and-drop');3(async () => {4  const browser = await puppeteer.launch();5  const page = await browser.newPage();6  await page.setViewport({width: 1366, height: 768});7  await page.waitForSelector('#iframeResult');8  const frame = await page.frames().find(f => f.name() === 'iframeResult');9  await frame.waitForSelector('#drag1');10  const drag = await frame.$('#drag1');11  const drop = await frame.$('#div2');12  await dragAndDrop(page, drag, drop);13  await browser.close();14})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.screenshot({path: 'example.png'});6  await browser.close();7})();8const puppeteer = require('puppeteer');9(async () => {10  const browser = await puppeteer.launch();11  const page = await browser.newPage();12  await page.screenshot({path: 'example.png'});13  await browser.close();14})();15### puppeteer.launch([options])

Using AI Code Generation

1const puppeteer = require('puppeteer');2const devices = require('puppeteer/DeviceDescriptors');3const iPhone = devices['iPhone 6'];4(async () => {5  const browser = await puppeteer.launch({headless: false});6  const page = await browser.newPage();7  await page.emulate(iPhone);8  await page.screenshot({path: 'google.png'});9  await browser.close();10})();11const puppeteer = require('puppeteer');12In order to run Puppeteer, you need to create an async IIFE (Immediately Invoked Function Expression):13(async () => {14})();15In order to launch Puppeteer, you need to create an async IIFE (Immediately Invoked Function Expression):16(async () => {17  const browser = await puppeteer.launch();18})();19In order to create a new browser instance, you need to use puppeteer.launch() method:20const browser = await puppeteer.launch();21In order to create a new page, you need to use browser.newPage() method:22const page = await browser.newPage();23In order to navigate to a page, you need to use page.goto() method:24In order to take a screenshot, you need to use page.screenshot() method:25await page.screenshot({path: 'google.png'});26In order to close the browser, you need to use browser.close() method:27await browser.close();

Using AI Code Generation

1const puppeteer = require('puppeteer');2const fs = require('fs');3(async () => {4    const browser = await puppeteer.launch({5    });6    const page = await browser.newPage();7    await page.setViewport({ width: 1280, height: 800 });8    const dimensions = await page.evaluate(() => {9        return {10        };11    });12    console.log('Dimensions:', dimensions);13    const dimensions2 = await page.evaluate(() => {14        return {15        };16    });17    console.log('Dimensions:', dimensions2);18    const elementHandle = await page.$('#drag');19    const boundingBox = await elementHandle.boundingBox();20    await page.mouse.move(21    );22    await page.mouse.down();23    await page.mouse.move(24        { steps: 10 }25    );26    await page.mouse.up();27    await page.screenshot({ path: 'example.png' });28    await browser.close();29})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3    const browser = await puppeteer.launch();4    const page = await browser.newPage();5    await page.waitForSelector('#drag-target');6    await page.waitForSelector('#drop-target');7    const dragTarget = await page.$('#drag-target');8    const dropTarget = await page.$('#drop-target');9    await dragTarget.hover();10    await page.mouse.down();11    await dropTarget.hover();12    await page.mouse.up();13    await browser.close();14})();15- [Puppeteer API - page.mouse](

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async() => {3  const browser = await puppeteer.launch({headless: false});4  const page = await browser.newPage();5  await page.waitForSelector('#drag');6  const dragHandle = await page.$('#drag');7  await dragHandle.boundingBox();8  await dragHandle.hover();9  await page.mouse.down();10  await page.mouse.move(100, 100);11  await page.mouse.up();12  await browser.close();13})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3    const browser = await puppeteer.launch();4    const page = await browser.newPage();5    await page.setViewport({ width: 1280, height: 800 });6    await page.waitForSelector('input[name="q"]');7    await page.type('input[name="q"]', 'puppeteer');8    await page.waitForSelector('input[value="Google Search"]');9    await page.click('input[value="Google Search"]');10    await page.waitForSelector('div.g > a');11    await page.click('div.g > a');12    await page.waitForSelector('input[name="q"]');13    await page.type('input[name="q"]', 'puppeteer');14    await page.waitForSelector('input[value="Google Search"]');15    await page.click('input[value="Google Search"]');16    await page.waitForSelector('div.g > a');17    await page.click('div.g > a');18    await page.waitForSelector('input[name="q"]');19    await page.type('input[name="q"]', 'puppeteer');20    await page.waitForSelector('input[value="Google Search"]');21    await page.click('input[value="Google Search"]');22    await page.waitForSelector('div.g > a');23    await page.click('div.g > a');24    await page.waitForSelector('input[name="q"]');25    await page.type('input[name="q"]', 'puppeteer');26    await page.waitForSelector('input[value="Google Search"]');27    await page.click('input[value="Google Search"]');28    await page.waitForSelector('div.g > a');29    await page.click('div.g > a');30    await page.waitForSelector('input[name="q"]');31    await page.type('input[name="q"]', 'puppeteer');32    await page.waitForSelector('input[value="Google Search"]');33    await page.click('input[value="Google Search"]');34    await page.waitForSelector('div.g > a');35    await page.click('div.g > a');36    await page.waitForSelector('input[name="q"]');37    await page.type('input[name="q"]', 'puppeteer');38    await page.waitForSelector('input[value="Google Search"]');39    await page.click('input[value="Google Search"]');40    await page.waitForSelector('div.g > a');41    await page.click('div.g > a');42    await page.waitForSelector('input[name="q"]');

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.