KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use dragAndDrop method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

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

1var webdriverio = require('webdriverio');2var options = {3    desiredCapabilities: {4    }5};6var client = webdriverio.remote(options);7    .init()8    .dragAndDrop('#drag1', '#div2')9    .end();

Using AI Code Generation

1const { remote } = require('webdriverio');2(async () => {3    const browser = await remote({4        capabilities: {5        }6    })7    const elem = await browser.$('#drag')8    await elem.dragAndDrop({ x: 100, y: 100 })9    await browser.deleteSession()10})()11[0-0] 2020-05-27T11:44:31.583Z INFO webdriver: DATA { capabilities: { alwaysMatch: { browserName: 'chrome' }, firstMatch: [ {} ] },  desiredCapabilities: { browserName: 'chrome' } }12[0-0] 2020-05-27T11:44:32.231Z INFO webdriver: COMMAND findElement("css selector", "#drag")

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = { desiredCapabilities: { browserName: 'chrome' } };3var client = webdriverio.remote(options);4    .init()5    .dragAndDrop('#column-a', '#column-b')6    .end();7var webdriverio = require('webdriverio');8var options = { desiredCapabilities: { browserName: 'chrome' } };9var client = webdriverio.remote(options);10    .init()11    .dragAndDrop('#column-a', '#column-b')12    .end();

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = { desiredCapabilities: { browserName: 'chrome' } };3var client = webdriverio.remote(options);4.init()5.dragAndDrop('#gbqfbb', 'body')6.end();7{8  "scripts": {9  },10  "devDependencies": {11  }12}13var webdriverio = require('webdriverio');14var options = { desiredCapabilities: { browserName: 'firefox' } };15var client = webdriverio.remote(options);16.init()17.dragAndDrop('#gbqfbb', 'body')18.end();19var webdriverio = require('webdriverio');20var options = { desiredCapabilities: { browserName: 'internet explorer' } };21var client = webdriverio.remote(options);22.init()23.dragAndDrop('#gbqfbb', 'body')24.end();

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = {3    desiredCapabilities: {4    }5};6var client = webdriverio.remote(options);7    .init()8    .dragAndDrop('#one', '#bin')9    .end();10var webdriverio = require('webdriverio');11var options = {12    desiredCapabilities: {13    }14};15var client = webdriverio.remote(options);16    .init()17    .dragAndDrop('#one', '#bin')18    .end();

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = { desiredCapabilities: { browserName: 'chrome' } };3var client = webdriverio.remote(options);4var source = '#draggable';5var target = '#droppable';6    .init()7    .dragAndDrop(source, target)8    .end();

Using AI Code Generation

1it('should drag and drop an element', () => {2    browser.switchToFrame(0);3    const source = $('#drag1');4    const target = $('#div2');5    source.dragAndDrop(target);6});7exports.config = {8};9{10    "devDependencies": {11    }12}

Using AI Code Generation

1browser.dragAndDrop('#drag', '#drop');2browser.dragAndDrop('#drag', { x: 100, y: 100 });3browser.dragAndDrop('#drag', { x: 100, y: 100 }, { x: 100, y: 100 });4browser.dragAndDrop('#drag', { x: 100, y: 100 }, '#drop');5browser.dragAndDrop('#drag', { x: 100, y: 100 }, { x: 100, y: 100 }, { x: 100, y: 100 });6browser.dragAndDrop('#drag', { x: 100, y: 100 }, '#drop', { x: 100, y: 100 });7browser.dragAndDrop('#drag', '#drop', { x: 100, y: 100 });8browser.dragAndDrop('#drag', '#drop', { x: 100, y: 100 }, { x: 100, y: 100 });9browser.dragAndDrop('#drag', '#drop', '#drop', { x: 100, y: 100 });10browser.dragAndDrop('#drag', '#drop', { x: 100, y: 100 }, { x: 100, y: 100 }, { x: 100, y: 100 });11browser.dragAndDrop('#drag', '#drop', '#drop', { x: 100, y: 100 }, { x: 100, y: 100 });12browser.dragAndDrop('#drag', '#drop', '#drop', { x: 100, y: 100 }, { x: 100, y: 100 }, { x: 100, y: 100 });

Using AI Code Generation

1const webdriverio = require('webdriverio');2const chai = require('chai');3const expect = chai.expect;4const chaiAsPromised = require('chai-as-promised');5chai.use(chaiAsPromised);6const chaiWebdriverio = require('chai-webdriverio');7chai.use(chaiWebdriverio(browser));8const path = require('path');9const fs = require('fs');10const assert = require('assert');11const config = require('./config.json');12const login = require('./login');13const logout = require('./logout');14const addNew = require('./addNew');15const addNewUser = require('./addNewUser');16const addNewGroup = require('./addNewGroup');17const addNewRole = require('./addNewRole');18const addNewPermission = require('./addNewPermission');19const addNewPermissionSet = require('./addNewPermissionSet');20const addNewPermissionSetAssignment = require('./addNewPermissionSetAssignment');21const addNewContent = require('./addNewContent');22const addNewContentFolder = require('./addNewContentFolder');23const addNewContentResource = require('./addNewContentResource');24const addNewContentLink = require('./addNewContentLink');25const addNewContentFile = require('./addNewContentFile');26const addNewContentFileFromUrl = require('./addNewContentFileFromUrl');27const addNewContentFileFromComputer = require('./addNewContentFileFromComputer');28const addNewContentFileFromCloud = require('./addNewContentFileFromCloud');

WebdriverIO Tutorial

Wondering what could be a next-gen browser and mobile test automation framework that is also simple and concise? Yes, that’s right, it's WebdriverIO. Since the setup is very easy to follow compared to Selenium testing configuration, you can configure the features manually thereby being the center of attraction for automation testing. Therefore the testers adopt WedriverIO to fulfill their needs of browser testing.

Learn to run automation testing with WebdriverIO tutorial. Go from a beginner to a professional automation test expert with LambdaTest WebdriverIO tutorial.

Chapters

Running Your First Automation Script - Learn the steps involved to execute your first Test Automation Script using WebdriverIO since the setup is very easy to follow and the features can be configured manually.
Selenium Automation With WebdriverIO - Read more about automation testing with WebdriverIO and how it supports both browsers and mobile devices.
Browser Commands For Selenium Testing - Understand more about the barriers faced while working on your Selenium Automation Scripts in WebdriverIO, the ‘browser’ object and how to use them?
Handling Alerts & Overlay In Selenium - Learn different types of alerts faced during automation, how to handle these alerts and pops and also overlay modal in WebdriverIO.
How To Use Selenium Locators? - Understand how Webdriver uses selenium locators in a most unique way since having to choose web elements very carefully for script execution is very important to get stable test results.
Deep Selectors In Selenium WebdriverIO - The most popular automation testing framework that is extensively adopted by all the testers at a global level is WebdriverIO. Learn how you can use Deep Selectors in Selenium WebdriverIO.
Handling Dropdown In Selenium - Learn more about handling dropdowns and how it's important while performing automated browser testing.
Automated Monkey Testing with Selenium & WebdriverIO - Understand how you can leverage the amazing quality of WebdriverIO along with selenium framework to automate monkey testing of your website or web applications.
JavaScript Testing with Selenium and WebdriverIO - Speed up your Javascript testing with Selenium and WebdriverIO.
Cross Browser Testing With WebdriverIO - Learn more with this step-by-step tutorial about WebdriverIO framework and how cross-browser testing is done with WebdriverIO.