Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to to drag and drop an element

See original GitHub issue

The test is passing however the element is not dragged or dropped in the desired target. element Is not moving at all

Environment (please complete the following information):

  • WebdriverIO version: 7.2.0
  • Mode: [Standalone mode or WDIO Testrunner]
  • If WDIO Testrunner, running sync/async: [e.g. sync/async] sync
  • Node.js version: v14.16.0
  • NPM version: 6.14.11
  • Browser name and version: 89.0.4389.90
  • Platform name and version: linux
  • Additional wdio packages used (if applicable): mocha-fw, selenium-standalone-service, mocha, chai

Config of WebdriverIO

const { config } = require('./shared.conf')
const drivers = {
    chrome: { version: '89.0.4389.23' }, 
}

exports.config = {
    ...config,
    ...{

        specs: ['src/test/specs/02.01_WebApp_suite.js'],
        capabilities: caps.ChromeDesktopCaps,
        services: [['selenium-standalone', {
            installArgs: {
                version : "3.141.59",
                baseURL : "https://selenium-release.storage.googleapis.com",
                drivers : {
                    chrome : {
                        version : "89.0.4389.23",
                        baseURL : "https://chromedriver.storage.googleapis.com",
                        'goog:chromeOptions': {
                            args: [
                                '--disable-web-security',
                            ],
                        }
                    }
                }
            },
            args: {
                seleniumArgs: ['-host','localhost','-port', '4455'],
                drivers
            },
        }],
        ],
    }
}

Describe the bug Unable to drag and drop and element to a target however test is passing, but actually no dragging is happening

To Reproduce

describe('Web App Test Suite', () => {

    before(() => {
        browser.url('https://jqueryui.com/droppable/')
    });

    it('01. Drag and drop', () => {
        browser.switchToFrame(0)
        $('#draggable').waitForDisplayed()
        const elem = $('#draggable')
        const target = $('#droppable')
        elem.dragAndDrop(target,2000)
        browser.pause(3000)
    });

});

[Include code or an example repository that can easily be set up]

Expected behavior Should be able to drag and drop element and see the element moves

Log

[0-0] 2021-03-16T17:49:27.426Z DEBUG @wdio/sync: Finished to run "before" hook in 0ms
[0-0] 2021-03-16T17:49:27.433Z INFO webdriver: COMMAND navigateTo("https://jqueryui.com/droppable/")
[0-0] 2021-03-16T17:49:27.433Z INFO webdriver: [POST] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/url
[0-0] 2021-03-16T17:49:27.433Z INFO webdriver: DATA { url: 'https://jqueryui.com/droppable/' }
[0-0] 2021-03-16T17:49:32.754Z INFO webdriver: COMMAND switchToFrame(0)
[0-0] 2021-03-16T17:49:32.755Z INFO webdriver: [POST] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/frame
[0-0] 2021-03-16T17:49:32.755Z INFO webdriver: DATA { id: 0 }
[0-0] 2021-03-16T17:49:32.801Z INFO webdriver: COMMAND findElement("css selector", "#draggable")
[0-0] 2021-03-16T17:49:32.801Z INFO webdriver: [POST] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/element
[0-0] 2021-03-16T17:49:32.802Z INFO webdriver: DATA { using: 'css selector', value: '#draggable' }
[0-0] 2021-03-16T17:49:32.837Z INFO webdriver: RESULT {
  'element-6066-11e4-a52e-4f735466cecf': '26775842-f7a0-4e8d-b2a7-f9b172bc4997'
}
[0-0] 2021-03-16T17:49:32.851Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
[0-0] 2021-03-16T17:49:32.851Z INFO webdriver: [POST] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/execute/sync
[0-0] 2021-03-16T17:49:32.851Z INFO webdriver: DATA {
  script: 'return (function isElementDisplayed(element) {\n' +
    '    function nodeIsElement(node) {\n' +
    '        if (!node) {\n' +
    '            return false;\n' +
    '        }\n' +
    '        switch (node.nodeType) {\n' +
    '            case Node.ELEMENT_NODE:\n' +
    '            case Node.DOCUMENT_NODE:\n' +
    '            case Node.DOCUMENT_FRAGMENT_NODE:\n' +
    '                return true;\n' +
    '            default:\n' +
    '                return false;\n' +
    '        }\n' +
    '    }\n' +
    '    function parentElementForElement(element) {\n' +
    '        if (!element) {\n' +
    '            return null;\n' +
    '        }\n' +
    '        return enclosingNodeOrSelfMatchingPredicate(element.parentNode, nodeIsElement);\n' +
    '    }\n' +
    '    function enclosingNodeOrSelfMatchingPredicate(targetNode, predicate) {\n' +
    '        for (let node = targetNode; node && node !== targetNode.ownerDocument; node = node.parentNode)\n' +
    '            if (predicate(node)) {\n' +
    '                return node;\n' +
    '            }\n' +
    '        return null;\n' +
    '    }\n' +
    '    function enclosingElementOrSelfMatchingPredicate(targetElement, predicate) {\n' +
    '        for (let element = targetElement; element && element !== targetElement.ownerDocument; element = parentElementForElement(element))\n' +
    '            if (predicate(element)) {\n' +
    '                return element;\n' +
    '            }\n' +
    '        return null;\n' +
    '    }\n' +
    '    function cascadedStylePropertyForElement(element, property) {\n' +
    '        if (!element || !property) {\n' +
    '            return null;\n' +
    '        }\n' +
    '        // if document-fragment, skip it and use element.host instead. This happens\n' +
    '        // when the element is inside a shadow root.\n' +
    '        // window.getComputedStyle errors on document-fragment.\n' +
    '        if (element instanceof DocumentFragment) {\n' +
    '            element = element.host;\n' +
    '        }\n' +
    '        let computedStyle = window.getComputedStyle(element);\n' +
    '        let computedStyleProperty = computedStyle.getPropertyValue(property);\n' +
    "        if (computedStyleProperty && computedStyleProperty !== 'inherit') {\n" +
    '            return computedStyleProperty;\n' +
    '        }\n' +
    "        // Ideally getPropertyValue would return the 'used' or 'actual' value, but\n" +
    "        // it doesn't for legacy reasons. So we need to do our own poor man's cascade.\n" +
    "        // Fall back to the first non-'inherit' value found in an ancestor.\n" +
    "        // In any case, getPropertyValue will not return 'initial'.\n" +
    '        // FIXME: will this incorrectly inherit non-inheritable CSS properties?\n' +
    '        // I think all important non-inheritable properties (width, height, etc.)\n' +
    '        // for our purposes here are specially resolved, so this may not be an issue.\n' +
    '        // Specification is here: https://drafts.csswg.org/cssom/#resolved-values\n' +
    '        let parentElement = parentElementForElement(element);\n' +
    '        return cascadedStylePropertyForElement(parentElement, property);\n' +
    '    }\n' +
    '    function elementSubtreeHasNonZeroDimensions(element) {\n' +
    '        let boundingBox = element.getBoundingClientRect();\n' +
    '        if (boundingBox.width > 0 && boundingBox.height > 0) {\n' +
    '            return true;\n' +
    '        }\n' +
    '        // Paths can have a zero width or height. Treat them as shown if the stroke width is positive.\n' +
    "        if (element.tagName.toUpperCase() === 'PATH' && boundingBox.width + boundingBox.height > 0) {\n" +
    "            let strokeWidth = cascadedStylePropertyForElement(element, 'stroke-width');\n" +
    '            return !!strokeWidth && (parseInt(strokeWidth, 10) > 0);\n' +
    '        }\n' +
    "        let cascadedOverflow = cascadedStylePropertyForElement(element, 'overflow');\n" +
    "        if (cascadedOverflow === 'hidden') {\n" +
    '            return false;\n' +
    '        }\n' +
    "        // If the container's overflow is not hidden and it has zero size, consider the\n" +
    '        // container to have non-zero dimensions if a child node has non-zero dimensions.\n' +
    '        return Array.from(element.childNodes).some((childNode) => {\n' +
    '            if (childNode.nodeType === Node.TEXT_NODE) {\n' +
    '                return true;\n' +
    '            }\n' +
    '            if (nodeIsElement(childNode)) {\n' +
    '                return elementSubtreeHasNonZeroDimensions(childNode);\n' +
    '            }\n' +
    '            return false;\n' +
    '        });\n' +
    '    }\n' +
    '    function elementOverflowsContainer(element) {\n' +
    "        let cascadedOverflow = cascadedStylePropertyForElement(element, 'overflow');\n" +
    "        if (cascadedOverflow !== 'hidden') {\n" +
    '            return false;\n' +
    '        }\n' +
    '        // FIXME: this needs to take into account the scroll position of the element,\n' +
    '        // the display modes of it and its ancestors, and the container it overflows.\n' +
    "        // See Selenium's bot.dom.getOverflowState atom for an exhaustive list of edge cases.\n" +
    '        return true;\n' +
    '    }\n' +
    '    function isElementSubtreeHiddenByOverflow(element) {\n' +
    '        if (!element) {\n' +
    '            return false;\n' +
    '        }\n' +
    '        if (!elementOverflowsContainer(element)) {\n' +
    '            return false;\n' +
    '        }\n' +
    '        if (!element.childNodes.length) {\n' +
    '            return false;\n' +
    '        }\n' +
    "        // This element's subtree is hidden by overflow if all child subtrees are as well.\n" +
    '        return Array.from(element.childNodes).every((childNode) => {\n' +
    '            // Returns true if the child node is overflowed or otherwise hidden.\n' +
    "            // Base case: not an element, has zero size, scrolled out, or doesn't overflow container.\n" +
    '            // Visibility of text nodes is controlled by parent\n' +
    '            if (childNode.nodeType === Node.TEXT_NODE) {\n' +
    '                return false;\n' +
    '            }\n' +
    '            if (!nodeIsElement(childNode)) {\n' +
    '                return true;\n' +
    '            }\n' +
    '            if (!elementSubtreeHasNonZeroDimensions(childNode)) {\n' +
    '                return true;\n' +
    '            }\n' +
    '            // Recurse.\n' +
    '            return isElementSubtreeHiddenByOverflow(childNode);\n' +
    '        });\n' +
    '    }\n' +
    '    // walk up the tree testing for a shadow root\n' +
    '    function isElementInsideShadowRoot(element) {\n' +
    '        if (!element) {\n' +
    '            return false;\n' +
    '        }\n' +
    '        if (element.parentNode && element.parentNode.host) {\n' +
    '            return true;\n' +
    '        }\n' +
    '        return isElementInsideShadowRoot(element.parentNode);\n' +
    '    }\n' +
    `    // This is a partial reimplementation of Selenium's "element is displayed" algorithm.\n` +
    "    // When the W3C specification's algorithm stabilizes, we should implement that.\n" +
    '    // If this command is misdirected to the wrong document (and is NOT inside a shadow root), treat it as not shown.\n' +
    '    if (!isElementInsideShadowRoot(element) && !document.contains(element)) {\n' +
    '        return false;\n' +
    '    }\n' +
    '    // Special cases for specific tag names.\n' +
    '    switch (element.tagName.toUpperCase()) {\n' +
    "        case 'BODY':\n" +
    '            return true;\n' +
    "        case 'SCRIPT':\n" +
    "        case 'NOSCRIPT':\n" +
    '            return false;\n' +
    "        case 'OPTGROUP':\n" +
    "        case 'OPTION': {\n" +
    '            // Option/optgroup are considered shown if the containing <select> is shown.\n' +
    "            let enclosingSelectElement = enclosingNodeOrSelfMatchingPredicate(element, (e) => e.tagName.toUpperCase() === 'SELECT');\n" +
    '            return isElementDisplayed(enclosingSelectElement);\n' +
    '        }\n' +
    "        case 'INPUT':\n" +
    '            // <input type="hidden"> is considered not shown.\n' +
    "            if (element.type === 'hidden') {\n" +
    '                return false;\n' +
    '            }\n' +
    '            break;\n' +
    "        // case 'MAP':\n" +
    "        // FIXME: Selenium has special handling for <map> elements. We don't do anything now.\n" +
    '        default:\n' +
    '            break;\n' +
    '    }\n' +
    "    if (cascadedStylePropertyForElement(element, 'visibility') !== 'visible') {\n" +
    '        return false;\n' +
    '    }\n' +
    '    let hasAncestorWithZeroOpacity = !!enclosingElementOrSelfMatchingPredicate(element, (e) => {\n' +
    "        return Number(cascadedStylePropertyForElement(e, 'opacity')) === 0;\n" +
    '    });\n' +
    '    let hasAncestorWithDisplayNone = !!enclosingElementOrSelfMatchingPredicate(element, (e) => {\n' +
    "        return cascadedStylePropertyForElement(e, 'display') === 'none';\n" +
    '    });\n' +
    '    if (hasAncestorWithZeroOpacity || hasAncestorWithDisplayNone) {\n' +
    '        return false;\n' +
    '    }\n' +
    '    if (!elementSubtreeHasNonZeroDimensions(element)) {\n' +
    '        return false;\n' +
    '    }\n' +
    '    if (isElementSubtreeHiddenByOverflow(element)) {\n' +
    '        return false;\n' +
    '    }\n' +
    '    return true;\n' +
    '}).apply(null, arguments)',
  args: [
    {
      'element-6066-11e4-a52e-4f735466cecf': '26775842-f7a0-4e8d-b2a7-f9b172bc4997',
      ELEMENT: '26775842-f7a0-4e8d-b2a7-f9b172bc4997'
    }
  ]
}
[0-0] 2021-03-16T17:49:32.869Z INFO webdriver: RESULT true
[0-0] 2021-03-16T17:49:32.870Z INFO webdriver: COMMAND findElement("xpath", ".//p[normalize-space() = "Drag me to my target"]")
[0-0] 2021-03-16T17:49:32.870Z INFO webdriver: [POST] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/element
[0-0] 2021-03-16T17:49:32.870Z INFO webdriver: DATA {
  using: 'xpath',
  value: './/p[normalize-space() = "Drag me to my target"]'
}
[0-0] 2021-03-16T17:49:32.882Z INFO webdriver: RESULT {
  'element-6066-11e4-a52e-4f735466cecf': 'fac98a76-f8ed-44aa-96e3-c286ddfefa32'
}
[0-0] 2021-03-16T17:49:32.884Z INFO webdriver: COMMAND findElement("xpath", ".//p[normalize-space() = "Drop here"]")
[0-0] 2021-03-16T17:49:32.884Z INFO webdriver: [POST] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/element
[0-0] 2021-03-16T17:49:32.884Z INFO webdriver: DATA { using: 'xpath', value: './/p[normalize-space() = "Drop here"]' }
[0-0] 2021-03-16T17:49:32.897Z INFO webdriver: RESULT {
  'element-6066-11e4-a52e-4f735466cecf': 'c8dd72bb-a534-462e-8665-1e6e46b94590'
}
[0-0] 2021-03-16T17:49:32.899Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
[0-0] 2021-03-16T17:49:32.899Z INFO webdriver: [POST] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/execute/sync
[0-0] 2021-03-16T17:49:32.900Z INFO webdriver: DATA {
  script: 'return (function () {\n' +
    '        return { scrollX: this.pageXOffset, scrollY: this.pageYOffset };\n' +
    '    }).apply(null, arguments)',
  args: []
}
[0-0] 2021-03-16T17:49:32.905Z INFO webdriver: RESULT { scrollX: 0, scrollY: 0 }
[0-0] 2021-03-16T17:49:32.906Z INFO webdriver: COMMAND getElementRect("fac98a76-f8ed-44aa-96e3-c286ddfefa32")
[0-0] 2021-03-16T17:49:32.906Z INFO webdriver: [GET] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/element/fac98a76-f8ed-44aa-96e3-c286ddfefa32/rect
[0-0] 2021-03-16T17:49:32.913Z INFO webdriver: RESULT { height: 36, width: 100, x: 17, y: 43 }
[0-0] 2021-03-16T17:49:32.914Z INFO webdriver: COMMAND getElementRect("c8dd72bb-a534-462e-8665-1e6e46b94590")
[0-0] 2021-03-16T17:49:32.914Z INFO webdriver: [GET] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/element/c8dd72bb-a534-462e-8665-1e6e46b94590/rect
[0-0] 2021-03-16T17:49:32.921Z INFO webdriver: RESULT { height: 18, width: 150, x: 155, y: 43 }
[0-0] 2021-03-16T17:49:32.922Z INFO webdriver: COMMAND performActions(<object>)
[0-0] 2021-03-16T17:49:32.922Z INFO webdriver: [POST] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/actions
[0-0] 2021-03-16T17:49:32.922Z INFO webdriver: DATA {
  actions: [
    {
      type: 'pointer',
      id: 'finger1',
      parameters: [Object],
      actions: [Array]
    }
  ]
}
[0-0] 2021-03-16T17:49:32.960Z INFO webdriver: COMMAND releaseActions()
2021-03-16T17:49:32.960Z INFO webdriver: [DELETE] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2/actions
[0-0] 2021-03-16T17:49:35.966Z DEBUG @wdio/sync: Finished to run "afterTest" hook in 0ms
[0-0] 2021-03-16T17:49:35.976Z INFO webdriver: COMMAND deleteSession()
[0-0] 2021-03-16T17:49:35.976Z INFO webdriver: [DELETE] http://localhost:4455/wd/hub/session/d1a0815a06ab65f5330f9eab8597efe2
2021-03-16T17:49:36.141Z DEBUG @wdio/local-runner: Runner 0-0 finished with exit code 0
[0-0] PASSED in chrome - /src/test/specs/02.01_WebApp_suite.js
2021-03-16T17:49:36.142Z INFO @wdio/cli:launcher: Run onComplete hook
2021-03-16T17:49:36.142Z INFO @wdio/selenium-standalone-service: shutting down all browsers
2021-03-16T17:49:36.142Z DEBUG @wdio/cli:utils: Finished to run "onComplete" hook in 0ms

 "spec" Reporter:
------------------------------------------------------------------
[chrome 89.0.4389.90 linux #0-0] Spec: /home/amrka/Desktop/tech/toptal-fw/src/test/specs/02.01_WebApp_suite.js
[chrome 89.0.4389.90 linux #0-0] Running: chrome (v89.0.4389.90) on linux
[chrome 89.0.4389.90 linux #0-0] Session ID: d1a0815a06ab65f5330f9eab8597efe2
[chrome 89.0.4389.90 linux #0-0]
[chrome 89.0.4389.90 linux #0-0] Web App Test Suite
[chrome 89.0.4389.90 linux #0-0]    ✓ 01. Drag and drop
[chrome 89.0.4389.90 linux #0-0]
[chrome 89.0.4389.90 linux #0-0] 1 passing (8.6s)


Spec Files:      1 passed, 1 total (100% completed) in

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
lacell75commented, Mar 10, 2022

Same issue on my side. I can’t Drag and drop element

2reactions
erwinheitzmancommented, Mar 16, 2021

@Amrkamel1 here’s the test code used btw (I only updated the dragAndDrop’s internal working as shown in the example before and using the above code should achieve the same if you replace the dragAndDrop with the performActions):

describe('using the drag and drop', () => {
    it('should work as expected dammit', () => {
        browser.url('https://jqueryui.com/droppable/')

        const iframe = $('iframe.demo-frame')
        iframe.waitForExist()
        browser.switchToFrame(iframe)

        const draggable = $('#draggable')
        const droppable = $('#droppable')
        draggable.waitForDisplayed()
        droppable.waitForDisplayed()
        draggable.dragAndDrop(droppable)

        browser.pause(5000)
    });
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

Unable to perform drag and drop action even code executed ...
Then first just try to hold the element and drag it , do not drop it . It will more clear that whether...
Read more >
Unable to drag and drop the element using Selenium C# ...
Below is the code tried to achieve the drag and drop, IWebElement from = driver.FindElement(By.XPath("//div[@id='DocSelected-1'] ...
Read more >
Unable to drag and drop blocks - WordPress.org
Now that I've updated my site to WordPress 5.4, I am unable to select a given block and manually drag it to another...
Read more >
841 - Drag and Drop does not do any operation on Chrome ...
I am trying to automate a Drag and Functionality using Selenium Webdriver. Below is the Code I am using. This code performs the...
Read more >
Fix problem: Drag and drop not working in Windows
When drag and drop does not work, left-click a file in File Explorer and keep the left click mouse button pressed. While the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

"wdio:devtoolsOptions" cannot be set on WebDriverIO.RemoteCapability type

Next page

WebdriverIO in watch-mode "forgets" hostname and protocol if not explicitly specified