Hogyan húzz be és vidd be Selenium (Példa)

By: Krishna Rungta Krishna Rungta
Hours korszerűsített

Drag and Drop in szelén

Egyes webalkalmazások rendelkeznek webes elemek húzásával és meghatározott területre vagy elemre történő bedobásával. Az ilyen elemek áthúzásával automatizálhatjuk Selenium Webdriver.

Drag and Drop szintaxis

Az Actions osztálynak két olyan metódusa van, amely támogatja a Drag and Drop funkciót. Tanulmányozzuk őket...

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Hogyan húzz be és vidd be Selenium

A következőképpen húzhat át egy elemet a használatával Selenium Webdriver

A dragAndDrop metódusban a két paramétert adjuk át -

  1. Az első paraméter „Sourcelocator” az az elem, amelyet húznunk kell
  2. A második paraméter „Destinationlocator” az az elem, amelyre az első elemet el kell dobnunk
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

dragAndDropBy metódussal adjuk át a 3 paramétert –

  1. Az első paraméter „Sourcelocator” az az elem, amelyet húznunk kell
  2. A második paraméter a 2 x tengely pixelértékend elem, amelyre az első elemet el kell dobnunk.
  3. A harmadik paraméter a 2. elem y-tengely pixelértéke, amelyre az első elemet el kell dobnunk.

    Drag and Drop In Selenium

Gyakorlatilag mutassuk meg egy elem húzását a szelén webdriver segítségével a következő 3 forgatókönyvvel

1. forgatókönyv: A BANK elemet a DragAndDrop módszerrel húzza át az adott cellára.

A következő kódban elindítjuk a megadott URL-t Firefox böngészőben, majd húzza a BANK elemet, és dobja a BANK OLDAL blokkra a dragAndDrop módszerrel.

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();		
	}		
}

Kód magyarázata: A fenti kódban elindítjuk a megadott URL-t Firefox böngészőben, majd húzza a BANK elemet, és dobja a BANK OLDAL blokkra a dragAndDrop módszerrel. Az alábbiakban röviden kifejtve:

Először is rögzítjük az 1st elem, amelyet be kell húznunk a „From” változóba.

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

Másodszor, rögzítjük a 2. elemet, amelyre el kell dobnunk az 1. elemet a „To” változóban.

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

Harmadszor, létrehozzuk az Actions osztály objektumát, miközben az Actions osztály metódusait használjuk.

Actions act=new Actions(driver);

A drag and drop elemhez az Actions osztály dragAndDrop metódusát használjuk, és a paramétereket az első elemként (Sourcelocator) „From” és a második elemként (Destinationlocator) „To”ként adjuk át. Az alábbi sor húzza az 1-etst elemet, és dobja rá a 2nd elem.

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

A forgatókönyv végrehajtása.

Most már egyenként is végrehajthatja a fenti szkriptet az eclipse-ből, az alábbi képernyőképen látható módon.

Drag and Drop In Selenium

Ez a kimenet a szkript futtatásakor

Drag and Drop In Selenium

KAPCSOLÓDÓ CIKKEK

2. forgatókönyv: A BANK elemet a DragAndDropBy metódus húzza át az adott cellára.

Ebben a forgatókönyvben elindítjuk a megadott URL-t a böngészőben, majd a dragAndDropBy metóduson keresztül húzzuk a BANK elemet, és dobjuk a TERVEZÉSI OLDAL blokkra. A dragAndDropBy használatához meg kell találnunk az elem pixelét.

Hogyan lehet megtalálni a Pixelt?

Nyissa meg az URL-t a Chrome-ban vagy a Fire-benFox és kattintson a Kék szín nyílra.

Ezután kattintson arra az elemre, amelynek pixelét meg szeretné tudni.

A képpont az elem felett található, ahogy az alábbi képernyőképen látható.

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();		
 }		
}

JEGYZET: A pixelértékek a képernyő felbontásával és a böngésző méretével változnak. Ez a módszer ezért nem megbízható és nem széles körben alkalmazott.

3. forgatókönyv: Néhány elemet húz és ejt, majd ellenőrizze, hogy az üzenet megjelenik-e vagy sem.

A következő kódban elindítjuk a megadott URL-t a böngészőben, majd húzzuk az elemeket, mint a BANK, SALES, 500, és dobjuk a megfelelő blokkra. Ha kész, ellenőrizzük a kimeneti üzenetet.

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 !!!");					
     	}		
}

Kimenet elemzés

A Kimenetben láthatja, hogy az elem ráhúzódik a meghatározott elemre. Ellenőrizheti a kimenet GIF-jét.

Összegzésként

  • A fenti oktatóanyagokban bemutatjuk a webalkalmazás drag and drop funkcióit a Webdriver Action metódusaival:
  • dragAndDrop (forráskereső, célhelymeghatározó)
  • dragAndDropBy (Forráskereső, a Destinationlocator x tengelyű pixele, a Destinationlocator y tengelyű pixele)
  • Az elem áthúzásához először a DragAndDrop metódust használtuk az Actions osztályból, amelyben átadjuk a 2 paramétert, 1st paraméter az az elem, amelyet húznunk kell, és 2nd paraméter az az elem, amelyen el kell dobnunk az 1-etst elem.
  • Másodszor, az Actions osztály dragAndDropBy metódusát használtuk, amelyben átadjuk a 3 paramétert, az 1. paraméter az az elem, amelyet át kell húznunk, 2nd paraméter a 2 x tengely pixelértékend elem, 3rd paraméter az y tengely pixelértéke a 2nd elem.

Talán tetszene: