Trying to drag an element to an element that is inside of an iFrame (using Webdriver-io)?

Question

I am currently using Webdriver IO, Chimp JS and Cucumber JS, and I'm having a bit of a hard time dragging an element to another element that's inside of an iframe. I've been able to locate the element I want to move, as well as the element in the iframe after using client.frame(0); however I haven't found a way to click on the element, switch to the iframe to locate the element I want to move to, then move the element.

To make it easier, here's a picture. I want to move element 1 to element 2. But element 2 is in an iframe:

Looking through the docs, I see a lot of potentially helpful actions like hold, release ext. But I am working on desktop, and so I can't use any of the mobile actions.

With this limitation, it looks like the only drag and drop function available to me is dragAndDrop, but there doesn't seem to be a way to drag and drop an object into an element in an iframe in the javascript version of Webdriver. Am I correct in thinking this? Is there someway to do this solely using Cucumber JS? I feel like I'm missing something huge here, but I can't seem to figure it out :\

This isn't an answer, more like a suggestion! Have you tried to use [buttonDown](http://webdriver.io/api/protocol/buttonDown.html) and [buttonUp](http://webdriver.io/api/protocol/buttonUp.html) Also, you should reach try the WebdriverIO gitter channel. — Xolv.io, May 19 '16 at 04:27
I was just about to answer this, that's exactly what I had to do to get this working. Thanks for your suggestion! — Nagoshi, May 27 '16 at 15:55

score 0 · Answer 1 · edited Apr 14 '17 at 11:52

The selenium standalone driver I used is selenium-server-standalone-2.50.0.jar(selenium-release.storage.googleapis.com/index.html?path=2.50/) and chrome driver I used is ChromeDriver 2.29 (https://sites.google.com/a/chromium.org/chromedriver/downloads)

    var webdriverio = require('webdriverio'),
      dragAndDrop = require('html-dnd').codeForSelectors,
      should = require('should');


    // a test script block or suite
    describe('Title Test for Web Driver IO - Tutorial Test Page Website', function() {

      // set timeout to 10 seconds
      this.timeout(10000);
      var driver = {};

      // hook to run before tests
      before( function () {
        // load the driver for browser
        driver = webdriverio.remote({ desiredCapabilities: {browserName: 'chrome'} });
        return driver.init();
      });

      // a test spec - "specification"
      it('should be load correct page and title', function () {
        var sectionId = "";
        // load page, then call function()
        return driver     
          .url('http://localhost:9000') //your url
          .pause(7000)  
          .moveToObject('#element1')
          .buttonDown()     
          .moveToObject('#element2')
          .buttonUp()
          .pause(2000)    
         .end()
      });

      // a "hook" to run after all tests in this block
      after(function() {
        return driver.end();
      });
    });

Trying to drag an element to an element that is inside of an iFrame (using Webdriver-io)?

1 Answers1