Jak přetáhnout a pustit Selenium (Příklad)

Od: Krishna Rungta Krishna Rungta
Hours aktualizováno

Drag and Drop in selen

Některé webové aplikace mají funkci přetažení webových prvků a jejich umístění na definovanou oblast nebo prvek. Pomocí drag and drop takových prvků můžeme automatizovat Selenium Webdriver.

Syntaxe Drag and Drop

Třída Actions má dvě metody, které podporují Drag and Drop. Pojďme je studovat -

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Jak přetáhnout a pustit Selenium

Zde je návod, jak přetáhnout prvek pomocí Selenium Webdriver

V metodě dragAndDrop předáme dva parametry –

  1. První parametr „Sourcelocator“ je prvek, který musíme přetáhnout
  2. Druhý parametr „Destinationlocator“ je prvek, na který musíme umístit první prvek
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

metodou dragAndDropBy předáme 3 parametry –

  1. První parametr „Sourcelocator“ je prvek, který musíme přetáhnout
  2. Druhým parametrem je hodnota pixelu na ose x 2nd prvek, na který potřebujeme upustit první prvek.
  3. Třetím parametrem je hodnota pixelu na ose y 2. prvku, na který potřebujeme umístit první prvek.

    Drag and Drop In Selenium

Pojďme si prakticky ukázat přetažení prvku pomocí selenového webového ovladače s následujícími 3 scénáři

Scénář 1: Element BANK je přetažen na konkrétní buňku metodou DragAndDrop.

V následujícím kódu spustíme danou adresu URL Firefox prohlížeče a poté přetáhněte prvek BANK a pusťte na blok DEBIT SIDE metodou dragAndDrop.

Drag and Drop In 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("http://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();		
	}		
}

Vysvětlení kódu: Ve výše uvedeném kódu spustíme danou URL Firefox prohlížeče a poté přetáhněte prvek BANK a pusťte na blok DEBIT SIDE metodou dragAndDrop. Stručně vysvětleno níže:

Nejprve zachytíme 1st prvek, který musíme přetáhnout do proměnné „Od“.

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

Za druhé, zachytíme 2. prvek, na který potřebujeme umístit 1. prvek v proměnné „To“.

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

Za třetí, vytvoříme objekt třídy Actions, protože používáme metody třídy Actions.

Actions act=new Actions(driver);

Pro prvek drag and drop používáme metodu dragAndDrop třídy Actions a předáváme parametry jako první prvek (Sourcelocator) „From“ a druhý prvek (Destinationlocator) „To“. Pod čarou přetáhnete 1st prvek a pusťte jej na 2nd prvek.

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

Provedení skriptu.

Nyní můžete spustit výše uvedený skript jeden po druhém z Eclipse, jak je znázorněno na níže uvedeném snímku obrazovky.

Drag and Drop In Selenium

Zde je výstup při spuštění skriptu

Drag and Drop In Selenium

SOUVISEJÍCÍ ČLÁNKY

Scénář 2: Element BANK je přetažen na konkrétní buňku metodou DragAndDropBy.

V tomto scénáři spustíme danou URL v prohlížeči a poté přetáhneme prvek BANK a pustíme na blok DEBIT SIDE metodou dragAndDropBy. Pro dragAndDropBy musíme najít pixel prvku.

Jak najít Pixel?

Otevřete adresu URL v prohlížeči Chrome nebo FireFox a klikněte na modrou šipku.

Dále klikněte na libovolný prvek, pro který chcete zjistit pixel.

Pixel najdete nad prvkem, jak je znázorněno na snímku obrazovky níže.

Drag and Drop In 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("http://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();		
 }		
}

POZNÁMKA: Hodnoty pixelů se mění s rozlišením obrazovky a velikostí prohlížeče. Tato metoda tedy není spolehlivá a málo používaná.

Scénář 3: Přetáhněte a pusťte několik prvků a poté ověřte, zda se zpráva zobrazuje nebo ne.

V následujícím kódu spustíme danou URL v prohlížeči a poté přetáhneme prvky jako BANK, SALES, 500 a pustíme na příslušný blok. Po dokončení ověříme výstupní zprávu.

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("http://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 !!!");					
     	}		
}

Výstupní analýza

Ve výstupu můžete vidět, že je prvek přetažen na definovaný prvek. Můžete zkontrolovat GIF výstupu.

Shrnutí

  • Ve výše uvedených výukových programech ilustrujeme funkci přetažení webové aplikace pomocí metod akcí ve Webdriveru:
  • dragAndDrop (Sourcelocator, Destinationlocator)
  • dragAndDropBy(Sourcelocator, pixel na ose x Destinationlocator, pixel na ose y na Destinationlocator)
  • K přetažení prvku jsme nejprve použili metodu DragAndDrop ze třídy Actions, ve které předáme 2 parametry, 1st parametr je prvek, který musíme přetáhnout, a 2nd parametr je prvek, na který musíme vypustit 1st prvek.
  • Za druhé jsme použili metodu dragAndDropBy ze třídy Actions, ve které předáváme 3 parametry, 1. parametr je prvek, který musíme přetáhnout, 2nd parametr je hodnota pixelu na ose x 2nd prvek, 3rd parametr je hodnota pixelu na ose y 2nd prvek.

Máš rád: