Issue with Drag and Drop command using Actions class in Selenium WebDriver using Java

Question

Code trials:

import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
import org.testng.annotations.Test;

public class DragDrop {
    
WebDriver driver;
    
@Test
public void dragdrop() throws InterruptedException {
        
    System.setProperty("webdriver.chrome.driver", "./Drivers/chromedriver.exe");
    driver = new ChromeDriver();
    driver.manage().window().maximize();
    driver.get("https://dhtmlx.com/docs/products/dhtmlxTree/");
    //Bring the element to focus                
    JavascriptExecutor js = (JavascriptExecutor)driver;
    js.executeScript("scroll(0,600)");      
    Actions act = new Actions(driver);
    Thread.sleep(5000);
    //driver.findElement(By.xpath("//span[text()='Nancy Atherton']//parent::div//parent::li"));
    //The below web element is where the issue is and unable to locate the web element      
    WebElement allBooks = driver.findElement(By.xpath("//span[text()='Nancy Atherton']"));      
    WebElement myLib = driver.findElement(By.xpath("//ul[@role='listbox']"));
    act.dragAndDrop(allBooks, myLib).perform();     
   }
}

Error Message:

FAILED: dragdrop
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"//span[text()='Nancy Atherton']"}
  (Session info: chrome=109.0.5414.75)
For documentation on this error, please visit: https://selenium.dev/exceptions/#no_such_element

I am unable to locate the element even after trying different locators like xpath, css, etc. I have also noticed that there are iframes tag present up the hierarchy. I even tried by identifying and moving to that particular iframe and then locating the element but it didn't help.

I would really appreciate if anyone can take a look at the program and tell where am i going wrong?

Answer 1

The desired elements are within a iframe so you have to:

• Induce WebDriverWait for the desired frameToBeAvailableAndSwitchToIt.

• Induce WebDriverWait for the desired elementToBeClickable.

• You can use the following Locator Strategies:

  driver.get("https://dhtmlx.com/docs/products/dhtmlxTree/");
  WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
  wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe[src*='//dhtmlxcode.com']")));
  WebElement books = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[@class='dhx_tree-label' and text()='All Books']")));
  JavascriptExecutor js = (JavascriptExecutor)driver;
  js.executeScript("return arguments[0].scrollIntoView(true)", books);
  WebElement dragMe = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//span[@class='dhx_tree-list-item__text' and text()='Nancy Atherton']")));
  WebElement dropHere = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("div#treeTarget>ul")));
  Actions actions = new Actions(driver);
  actions.dragAndDrop(dragMe, dropHere).build().perform();