dragAndDropBy() function Encountering Exception

Question

I am a beginner in Selenium and m trying to automate the drag and drop functionality. But everytime I am trying to execute the dragAndDrop() functionality, Eclipse is Giving off Exception.

PF the code and the Exceptions below.

Code:

public class DragAndDropEvents 
{
    WebDriver driver=new FirefoxDriver();

    public void dragElement()
    {
        driver.get("http://jqueryui.com/demos/draggable/"); 
        WebElement draggable = driver.findElement(By.id("draggable")); 
        new Actions(driver).dragAndDropBy(draggable, 120, 120).build() .perform();
    }

    public static void main(String[] args) 
    {
    DragAndDropEvents dragDrop=new DragAndDropEvents();
    dragDrop.dragElement();
    }
}

Exception:

    Exception in thread "main" org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"id","selector":"draggable"}
Command duration or timeout: 34 milliseconds
For documentation on this error, please visit: http://seleniumhq.org/exceptions/no_such_element.html
Build info: version: '2.38.0', revision: 'bd32d4e', time: '2013-12-05 16:16:40'
System info: host: 'MyLappy', ip: '14.99.107.172', os.name: 'Windows 8.1', os.arch: 'amd64', os.version: '6.3', java.version: '1.8.0'
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities [{applicationCacheEnabled=true, rotatable=false, handlesAlerts=true, databaseEnabled=true, version=28.0, platform=XP, browserConnectionEnabled=true, nativeEvents=false, acceptSslCerts=true, webStorageEnabled=true, locationContextEnabled=true, browserName=firefox, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true}]
Session ID: 7dc1eb06-deb9-42e3-9994-2e7a3a41517f
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source)
    at java.lang.reflect.Constructor.newInstance(Unknown Source)
    at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:193)
    at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:145)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:554)
    at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:307)
    at org.openqa.selenium.remote.RemoteWebDriver.findElementById(RemoteWebDriver.java:348)
    at org.openqa.selenium.By$ById.findElement(By.java:220)
    at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:299)
    at DragAndDropEvents.dragElement(DragAndDropEvents.java:30)
    at DragAndDropEvents.main(DragAndDropEvents.java:59)
Caused by: org.openqa.selenium.remote.ErrorHandler$UnknownServerException: Unable to locate element: {"method":"id","selector":"draggable"}
Build info: version: '2.38.0', revision: 'bd32d4e', time: '2013-12-05 16:16:40'
System info: host: 'MyLappy', ip: '14.99.107.172', os.name: 'Windows 8.1', os.arch: 'amd64', os.version: '6.3', java.version: '1.8.0'
Driver info: driver.version: unknown
    at <anonymous class>.FirefoxDriver.prototype.findElementInternal_(file:///C:/Users/Pratibha/AppData/Local/Temp/anonymous8582348192003844770webdriver-profile/extensions/fxdriver@googlecode.com/components/driver_component.js:8860)
    at <anonymous class>.FirefoxDriver.prototype.findElement(file:///C:/Users/Pratibha/AppData/Local/Temp/anonymous8582348192003844770webdriver-profile/extensions/fxdriver@googlecode.com/components/driver_component.js:8869)
    at <anonymous class>.DelayedCommand.prototype.executeInternal_/h(file:///C:/Users/Pratibha/AppData/Local/Temp/anonymous8582348192003844770webdriver-profile/extensions/fxdriver@googlecode.com/components/command_processor.js:10831)
    at <anonymous class>.DelayedCommand.prototype.executeInternal_(file:///C:/Users/Pratibha/AppData/Local/Temp/anonymous8582348192003844770webdriver-profile/extensions/fxdriver@googlecode.com/components/command_processor.js:10836)
    at <anonymous class>.DelayedCommand.prototype.execute/<(file:///C:/Users/Pratibha/AppData/Local/Temp/anonymous8582348192003844770webdriver-profile/extensions/fxdriver@googlecode.com/components/command_processor.js:10778)

I tried the Above code using different types of locators like 01. xpath 02. className 03. Name etc. Always I am encountering the same exception. Only when tried with xpath, the Exception does not occur but it won't do the required function. It will select the the text at the bottom of the page.

Am at a fix!! Please help me with this issue. Thanks in Advance:)

Answer 1

Coincidentally I was working on the same url, trying my hands at handling the Jquery pop-up and kept getting the same error you are.

I was just messing around with the source code of the page and accidentally found the solution. In our haste to handle the pop-ups we missed a simple thing. The website uses an iframe.

Just add the following line right after the driver.get command and you'll be good to go:

driver.switchTo().frame(driver.findElement(By.className("demo-frame")));