Kuinka vetää ja pudottaa sisään Selenium (Esimerkki)

Vedä ja pudota seleeniin

Joissakin verkkosovelluksissa on toiminto vetää verkkoelementtejä ja pudottaa ne määritetylle alueelle tai elementille. Voimme automatisoida tällaisten elementtien vetämällä ja pudottamalla Selenium Web-ajuri.

Vedä ja pudota -syntaksi

Actions-luokassa on kaksi menetelmää, jotka tukevat vedä ja pudota. Tutkitaan niitä -

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Kuinka vetää ja pudottaa sisään Selenium

Näin vedät ja pudotat elementin käyttämällä Selenium Web-ohjain

dragAndDrop-menetelmässä välitämme kaksi parametria -

1. Ensimmäinen parametri "Sourcelocator" on elementti, joka meidän täytyy vetää
2. Toinen parametri "Destinationlocator" on elementti, johon meidän on pudotettava ensimmäinen elementti

Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

dragAndDropBy-menetelmä välitämme 3 parametria -

1. Ensimmäinen parametri "Sourcelocator" on elementti, joka meidän täytyy vetää
2. Toinen parametri on 2:n x-akselin pikseliarvo^nd elementti, jolle meidän on pudotettava ensimmäinen elementti.
3. Kolmas parametri on y-akselin 2. elementin pikseliarvo, jolle meidän on pudotettava ensimmäinen elementti.

   

Käytännössä näytetään elementin vetäminen ja pudottaminen seleeni-webdriverin avulla seuraavilla 3 skenaariolla

Skenaario 1: BANK-elementti vedetään ja pudotetaan tiettyyn soluun DragAndDrop-menetelmällä.

Seuraavassa koodissa käynnistämme annetun URL-osoitteen Firefox selain ja vedä sitten PANKKI-elementti ja pudota DEBIT SIDE -lohkoon dragAndDrop-menetelmällä.

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

Koodin selitys: Yllä olevassa koodissa käynnistämme annetun URL-osoitteen Firefox selain ja vedä sitten PANKKI-elementti ja pudota DEBIT SIDE -lohkoon dragAndDrop-menetelmällä. Alla lyhyesti selitettynä:

Ensin vangitaan 1^st elementti, joka meidän täytyy vetää muuttujassa "From".

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

Toiseksi sieppaamme toisen elementin, jolle meidän on pudotettava ensimmäinen elementti muuttujaan "To".

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

Kolmanneksi luomme Actions-luokan objektin, kun käytämme Actions-luokan menetelmiä.

Actions act=new Actions(driver);

Vedä ja pudota -elementille käytämme Actions-luokan dragAndDrop-menetelmää ja välitämme parametrit ensimmäisenä elementtinä (Sourcelocator) "From" ja toisena elementtinä (Destinationlocator) "To". Alla oleva rivi vetää 1^st elementti ja pudota se 2^nd elementti.

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

Käsikirjoituksen toteutus.

Nyt voit suorittaa yllä olevan skriptin yksitellen eclipsestä alla olevan kuvakaappauksen mukaisesti.

Tässä on tulos, kun suoritat skriptin

Skenaario 2: BANK-elementti vedetään ja pudotetaan tiettyyn soluun DragAndDropBy-menetelmällä.

Tässä skenaariossa käynnistämme annetun URL-osoitteen selaimessa ja vedämme sitten BANK-elementin ja pudotamme DEBIT SIDE -lohkoon dragAndDropBy-menetelmän kautta. DragAndDropBy:tä varten meidän on löydettävä elementin pikseli.

Kuinka löytää Pixel?

Avaa URL-osoite Chromessa tai FiressäFox ja napsauta Sinistä nuolta.

Napsauta seuraavaksi mitä tahansa elementtiä, jonka pikselin haluat tietää.

Löydät pikselin elementin yläpuolelta alla olevan kuvakaappauksen mukaisesti.

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

HUOMAUTUS: Pikseliarvot muuttuvat näytön tarkkuuden ja selaimen koon mukaan. Tämä menetelmä ei siksi ole luotettava eikä laajalti käytetty.

Skenaario 3: Muutamia elementtejä vedetään ja pudotetaan, ja sitten tarkistetaan, näkyykö viesti vai ei.

Seuraavassa koodissa käynnistämme selaimessa annetun URL-osoitteen ja vedämme sitten elementit kuten BANK, SALES, 500 ja pudotamme vastaavaan lohkoon. Kun se on valmis, tarkistamme lähtöviestin.

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

Lähtöanalyysi

Output-kohdassa voit nähdä, että elementti vedetään ja pudotetaan määritetyn elementin päälle. Voit tarkistaa lähdön GIF-tiedoston.

Yhteenveto

• Yllä olevissa opetusohjelmissa havainnollistetaan verkkosovelluksen vedä ja pudota -toimintoja Webdriverin toimintomenetelmien avulla:
• dragAndDrop (lähdepaikannus, määränpään paikannus)
• dragAndDropBy(Sourcelocator, Destinationlocatorin x-akselin pikseli, Destinationlocatorin y-akselin pikseli)
• Vedäksesi ja pudottaaksesi elementin käytimme ensin DragAndDrop -menetelmää Actions-luokasta, jossa välitämme 2 parametria, 1^st parametri on elementti, joka meidän täytyy vetää, ja 2^nd parametri on elementti, johon meidän on pudotettava 1^st elementti.
• Toiseksi, käytimme dragAndDropBy-menetelmää Actions-luokasta, jossa välitämme 3 parametria, ensimmäinen parametri on elementti, joka meidän täytyy vetää, 1^nd parametri on x-akselin pikseliarvo 2^nd elementti, 3^rd parametri on y-akselin pikseliarvo 2^nd elementti.