Как перетащить Selenium (Пример)

Автор: Krishna Рунгта Krishna Рунгта
Hours обновлено

Перетаскивание в селене

Некоторые веб-приложения имеют функцию перетаскивания веб-элементов в определенную область или элемент. Мы можем автоматизировать перетаскивание таких элементов, используя Selenium Вебдрайвер.

Синтаксис перетаскивания

Класс Actions имеет два метода, поддерживающих перетаскивание. Давайте изучим их-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Как перетащить Selenium

Вот как перетащить элемент, используя Selenium Вебдрайвер

В методе dragAndDrop мы передаем два параметра:

  1. Первый параметр «Sourcelocator» — это элемент, который нам нужно перетащить.
  2. Второй параметр «Destinationlocator» — это элемент, на который нам нужно поместить первый элемент.
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

dragAndDropBy мы передаем 3 параметра –

  1. Первый параметр «Sourcelocator» — это элемент, который нам нужно перетащить.
  2. Второй параметр — это значение пикселя по оси X 2.nd элемент, на который нам нужно поместить первый элемент.
  3. Третий параметр — это значение пикселя по оси Y второго элемента, на который нам нужно поместить первый элемент.

    Перетащите Selenium

Давайте практически покажем вам перетаскивание элемента с помощью веб-драйвера Selenium со следующими 3 сценариями.

Сценарий 1: элемент BANK перетаскивается в определенную ячейку с помощью метода DragAndDrop.

В следующем коде мы запускаем указанный URL в Firefox браузере, а затем перетащите элемент BANK на блок DEBIT SIDE с помощью метода dragAndDrop.

Перетащите Selenium

import org.openqa.selenium.By;		
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 DragAndDrop {				

    WebDriver driver;			

    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe ");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
         
		//Element which needs to drag.    		
        	WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
         //Element on which need to drop.		
         WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));					
         		
         //Using Action class for drag and drop.		
         Actions act=new Actions(driver);					

	//Dragged and dropped.		
         act.dragAndDrop(From, To).build().perform();		
	}		
}

Пояснение к коду: В приведенном выше коде мы запускаем данный URL в Firefox браузере, а затем перетащите элемент BANK на блок DEBIT SIDE с помощью метода dragAndDrop. Кратко объяснено ниже:

Сначала мы захватываем 1st элемент, который нам нужно перетащить в переменную «От».

WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));

Во-вторых, мы захватываем второй элемент, на который нам нужно поместить первый элемент в переменной «To».

WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));

В-третьих, мы создаем объект класса Actions, используя методы класса Actions.

Actions act=new Actions(driver);

Для перетаскивания элемента мы используем метод dragAndDrop класса Actions и передаем параметры в качестве первого элемента (локатор источника) «От» и второго элемента (локатор назначения) «Кому». Линия ниже перетащит 1st элемент и поместите его на 2nd элемент.

act.dragAndDrop(From, To).build().perform();

Исполнение скрипта.

Теперь вы можете выполнить приведенный выше скрипт один за другим из eclipse, как показано на снимке экрана ниже.

Перетащите Selenium

Вот вывод при запуске скрипта

Перетащите Selenium

СТАТЬИ ПО ТЕМЕ

Сценарий 2: элемент BANK перетаскивается в определенную ячейку с помощью метода DragAndDropBy.

В этом сценарии мы запускаем указанный URL-адрес в браузере, а затем перетаскиваем элемент BANK в блок DEBIT SIDE с помощью метода dragAndDropBy. Чтобы перетащитьAndDropBy, нам нужно найти пиксель элемента.

Как найти Пикселя?

Откройте URL-адрес в Chrome или Fire.Fox и нажмите на стрелку синего цвета.

Затем нажмите на любой элемент, для которого вы хотите узнать пиксель.

Вы найдете пиксель над элементом, как показано на снимке экрана ниже.

Перетащите Selenium

import org.openqa.selenium.By;		
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 DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
        WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));					
      
        //Using Action class for drag and drop.		
        Actions act=new Actions(driver);					
      
        //Drag and Drop by Offset.		
        act.dragAndDropBy(From,135, 40).build().perform();		
 }		
}

ПРИМЕЧАНИЕ: Значения пикселей меняются в зависимости от разрешения экрана и размера браузера. Следовательно, этот метод ненадежен и широко не используется.

Сценарий 3: несколько элементов перетаскиваются, а затем проверяются, отображается ли сообщение или нет.

В следующем коде мы запускаем указанный URL-адрес в браузере, а затем перетаскиваем такие элементы, как БАНК, ПРОДАЖИ, 500, и помещаем их в соответствующий блок. После этого мы проверяем выходное сообщение.

import org.openqa.selenium.By;		
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 DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
    	 System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
     	 WebElement From1=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
     	//Element(DEBIT SIDE) on which need to drop.		
     	WebElement To1=driver.findElement(By.xpath("//*[@id='bank']/li"));					
      
	//Element(SALES) which need to drag.		
     	WebElement From2=driver.findElement(By.xpath("//*[@id='credit1']/a"));
        
	//Element(CREDIT SIDE) on which need to drop.  		
     	WebElement To2=driver.findElement(By.xpath("//*[@id='loan']/li"));					
     
     	//Element(500) which need to drag.		
        WebElement From3=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(DEBIT SIDE) on which need to drop.		
     	WebElement To3=driver.findElement(By.xpath("//*[@id='amt7']/li"));					
         
	//Element(500) which need to drag.		
        WebElement From4=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(CREDIT SIDE) on which need to drop.		
     	WebElement To4=driver.findElement(By.xpath("//*[@id='amt8']/li"));					
      
	//Using Action class for drag and drop.		
     	Actions act=new Actions(driver);					

	//BANK drag and drop.		
     	act.dragAndDrop(From1, To1).build().perform();
        
	//SALES drag and drop.		
     	act.dragAndDrop(From2, To2).build().perform();
        
	//500 drag and drop debit side.		
     	act.dragAndDrop(From3, To3).build().perform();	
        
	//500 drag and drop credit side. 		
     	act.dragAndDrop(From4, To4).build().perform();		
      
	//Verifying the Perfect! message.		
	if(driver.findElement(By.xpath("//a[contains(text(),'Perfect')]")).isDisplayed())							
     	{		
         	System.out.println("Perfect Displayed !!!");					
     	}
		else
     	{
        	System.out.println("Perfect not Displayed !!!");					
     	}		
}

Выходной анализ

В выводе вы можете видеть, что элемент перетаскивается на определенный элемент. Вы можете проверить GIF вывода.

Резюме

  • В приведенных выше руководствах мы иллюстрируем функцию перетаскивания веб-приложения с помощью методов действий в Webdriver:
  • dragAndDrop (локатор источника, локатор назначения)
  • dragAndDropBy(Sourcelocator, пиксель по оси X локатора назначения, пиксель по оси Y локатора назначения)
  • Чтобы перетащить элемент, мы сначала использовали метод DragAndDrop из класса Actions, в который передаем 2 параметра: 1.st параметр — это элемент, который нам нужно перетащить, а 2nd параметр — это элемент, на который нам нужно поместить 1st элемент.
  • Во-вторых, мы использовали метод dragAndDropBy из класса Actions, в который передаем 3 параметра, первый параметр — это элемент, который нам нужно перетащить, 1nd Параметр — это значение пикселя по оси X 2nd элемент, 3rd Параметр — это значение пикселя по оси Y 2nd элемент.

Вы могли бы: