Як перетягнути Selenium (Приклад)

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

Перетягніть у селен

Деякі веб-програми мають функцію перетягування веб-елементів і опускання їх у визначену область або елемент. Ми можемо автоматизувати перетягування таких елементів за допомогою Selenium Веб-драйвер.

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

Клас Actions має два методи, які підтримують Drag and Drop. Вивчимо їх -

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Як перетягнути Selenium

Ось як перетягнути елемент за допомогою Selenium Веб-драйвер

У методі dragAndDrop ми передаємо два параметри –

  1. Перший параметр «Sourcelocator» - це елемент, який нам потрібно перетягнути
  2. Другий параметр «Destinationlocator» — це елемент, на який нам потрібно відкинути перший елемент
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

Методом dragAndDrop ми передаємо 3 параметри –

  1. Перший параметр «Sourcelocator» - це елемент, який нам потрібно перетягнути
  2. Другим параметром є піксельне значення осі абсцис 2nd елемент, на який нам потрібно скинути перший елемент.
  3. Третій параметр - це значення пікселя по осі ординат другого елемента, на якому нам потрібно відкинути перший елемент.

    Перетягніть і опустіть 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"));

По-друге, ми захоплюємо 2-й елемент, на який нам потрібно відкинути 1-й елемент у змінній «To».

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

По-третє, ми створюємо об’єкт класу Actions, оскільки використовуємо методи класу Actions.

Actions act=new Actions(driver);

Для елемента перетягування ми використовуємо метод dragAndDrop класу Actions і передаємо параметри як перший елемент (Sourcelocator) «Від» і другий елемент (Destinationlocator) «To». Під рядком буде перетягнуто 1st елемент і опустіть його на 2nd елемент.

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

Виконання сценарію.

Тепер ви можете виконати наведений вище сценарій один за одним із eclipse, як показано на знімку екрана нижче.

Перетягніть і опустіть Selenium

Ось результат під час запуску сценарію

Перетягніть і опустіть Selenium

СТАТТІ ПО ТЕМІ

Сценарій 2: елемент BANK перетягується в певну комірку за допомогою методу DragAndDropBy.

У цьому сценарії ми запускаємо вказану URL-адресу в браузері, а потім перетягуємо елемент BANK і скидаємо його на блок DEBIT SIDE за допомогою методу dragAndDropBy. Щоб dragAndDropBy, нам потрібно знайти піксель елемента.

Як знайти Pixel?

Відкрийте URL-адресу в Chrome або FireFox і натисніть на стрілку синього кольору.

Потім клацніть будь-який елемент, для якого ви хочете дізнатися піксель.

Ви знайдете піксель над елементом, як показано на знімку екрана нижче.

Перетягніть і опустіть 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-адресу в браузері, а потім перетягуємо такі елементи, як BANK, SALES, 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 виходу.

Підсумки

  • У наведених вище посібниках ми ілюструємо функцію перетягування веб-програми за допомогою методів Action у Webdriver:
  • dragAndDrop(локатор джерела, локатор призначення)
  • dragAndDropBy(Sourcelocator, піксель по осі X для Destinationlocator, піксель по осі Y для Destinationlocator)
  • Щоб перетягнути елемент, спочатку ми використали метод DragAndDrop із класу Actions, у якому ми передаємо 2 параметри, 1st параметр - це елемент, який нам потрібно перетягнути, і 2nd параметр — це елемент, на який нам потрібно відкинути 1st елемент.
  • По-друге, ми використали метод dragAndDropBy з класу Actions, у якому ми передаємо 3 параметри, 1-й параметр – це елемент, який нам потрібно перетягнути, 2nd Параметр — це значення пікселя 2 по осі xnd елемент, 3rd параметр — це значення пікселів осі y для 2nd елемент.