Drag and drop not working in unlayer web site

Question

I have performed drag and drop on unlayer web site and all positive combination I have used. but drap and drop not working.

We have tried following code with selenium 4.

@Test()
     public void test() throws InterruptedException {
        driver.get("https://dashboard.unlayer.com/create/blank?_gl=1*afclpx*_ga*NzU0NTMwNzU3LjE2NzYzMTAyOTk.*_ga_VMP9QH8KW8*MTY3NjMxMDI5OC4xLjEuMTY3NjMxMDMwOS41OC4wLjA.");
        Thread.sleep(9000);
        driver.switchTo().frame(0);
        
        Thread.sleep(9000);
        
                //driver.findElement(By.xpath("//div [text ()='Text']"));
        
        WebElement source = driver.findElement(By.xpath("//div [text ()='Text']"));
        
        //source.click();
        
        Thread.sleep(9000);
        WebElement target = driver.findElement(By.xpath("//div[text()='No content here. Drag content from right.']"));
        System.out.println("target");
        System.out.println("target= "+target.getText());
        
        Thread.sleep(5000);
          Actions a = new Actions(driver); 
          Thread.sleep(5000);
          //a.clickAndHold(source).moveToElement(target).release().build().perform();
          //a.clickAndHold(target);
          //a.dragAndDrop(source, target);
          //a.moveToElement(target);
          a.click(source);
          System.out.println("Click on="+"source");
          Thread.sleep(5000);
          a.release(target);
          a.click(target);
          System.out.println("Click on="+"target");
        
    }

Answer 1

The desired element is within an <iframe>. So to perform Drag and Drop you have to:

• Induce WebDriverWait for the desired frameToBeAvailableAndSwitchToIt.

• You can use either of the following Locator Strategies: solutions:

  • Using dragAndDrop() method:

    driver.get("https://dashboard.unlayer.com/create/blank?_gl=1afclpx_gaNzU0NTMwNzU3LjE2NzYzMTAyOTk._ga_VMP9QH8KW8*MTY3NjMxMDI5OC4xLjEuMTY3NjMxMDMwOS41OC4wLjA.");
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("button[data-tid='banner-accept']"))).click();
    wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe[src*='https://editor.unlayer.com']")));
    Thread.sleep(10);
    WebElement dragMe = driver.findElement(By.xpath("//div[@class='blockbuilder-content-tool' and @draggable='true']//div[text()='Text']"));
    WebElement dropHere = driver.findElement(By.xpath("//div[text()='No content here. Drag content from right.']"));
    Actions actions = new Actions(driver);
    actions.dragAndDrop(dragMe, dropHere).build().perform();
    

  • Using clickAndHold().moveToElement().release() methods:

    driver.get("https://dashboard.unlayer.com/create/blank?_gl=1afclpx_gaNzU0NTMwNzU3LjE2NzYzMTAyOTk._ga_VMP9QH8KW8*MTY3NjMxMDI5OC4xLjEuMTY3NjMxMDMwOS41OC4wLjA.");
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("button[data-tid='banner-accept']"))).click();
    wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe[src*='https://editor.unlayer.com']")));
    Thread.sleep(10);
    WebElement drag = driver.findElement(By.xpath("//div[@class='blockbuilder-content-tool' and @draggable='true']//div[text()='Text']"));
    WebElement drop = driver.findElement(By.xpath("//div[text()='No content here. Drag content from right.']"));
    Actions actions = new Actions(driver);
    actions.clickAndHold(drag).moveToElement(drop).release(drop).build().perform();