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

by: Krishna Rungta Krishna Rungta
Hours Päivitetty

⚡ Älykäs yhteenveto

Vedä ja pudota sisään Selenium WebDriver mahdollistaa hiirellä tehtävien vuorovaikutusten automaattisen simuloinnin, joissa lähdeelementtiä siirretään ja se vapautetaan määritetyssä kohteessa. Actions-luokka tukee näitä eleitä dragAndDrop- ja dragAndDropBy-metodien avulla tarkkaa ja toistettavaa selainautomaatiota varten.

  • 🎓 Käytä Actions-luokkaa näppäimistö- ja hiirieleiden luomiseen ja suorita ne sitten sivulla kutsumalla build()- ja perform()-funktioita.
  • 🌟 Valitse dragAndDrop(source, target), kun sinulla on molemmat elementit, ja dragAndDropBy(source, xOffset, yOffset), kun tarvitset pikselitason tarkkuutta.
  • 🚀 Odota aina, että lähde- ja kohdeelementit ovat läsnä ennen vetämistä, jotta vältyt epätasaisilta testeiltä.
  • 🎖️ Varmista pudotus visuaalisesti tai määrittämällä kohteen attribuuttimuutoksia, jotta testi vahvistaa todellisen vuorovaikutuksen, ei vain jonossa olevan toiminnon.
  • 🏆 Tekoälyavusteiset paikantimet korjaavat rikkinäiset XPath-polyt käyttöliittymäpäivitysten jälkeen, mikä vähentää ylläpitotarvetta CI-putkistoissa toimivissa vedä ja pudota -sovelluksissa.
Lue lisää

Vedä ja pudota sisään Selenium

Mikä on vetäminen ja pudottaminen Selenium?

Vedä ja pudota sisään Selenium on automatisoitu vuorovaikutus, joka simuloi lähdeelementin napsauttamista ja pitämistä painettuna, sen siirtämistä sivulla ja sen vapauttamista kohdepaikassa. Sitä käytetään laajalti testaamaan nykyaikaisia ​​verkkosovelluksia, jotka perustuvat vedä ja pudota -käyttöliittymiin, kuten tiedostojen latausohjelmiin, kanban-tauluihin, verkkokauppaanping kärryt ja kojelaudan rakentajat.

In Selenium WebDriver, vedä ja pudota -toiminto suoritetaan Toiminnot luokka, joka tarjoaa erikoistuneita metodeja hiiren eleiden ketjuttamiseen ja niiden suorittamiseen yhtenä yhdistelmätoimintona.

Vedä ja pudota sisään Selenium

Actions-luokka tarjoaa kaksi ensisijaista menetelmää vedä ja pudota -automaatiolle:

Syntaksi:

Actions act = new Actions(driver);
//for drag and drop directly on an element
act.dragAndDrop(Source, Destination).build().perform();

//for drag and drop with pixel offsets
act.dragAndDropBy(WebElement Source, int xOffset, int yOffset).build().perform();

Täällä dragAndDrop() ottaa lähde- ja kohde-WebElementit, kun taas dragAndDropBy() ottaa lähdeelementin ja x/y-pikselioffsetit siirtääkseen sitä.

Kuinka vetää ja pudottaa sisään Selenium

Seuraavat kolme skenaariota havainnollistavat käytännön vetämällä ja pudottamalla tapahtuvaa automaatiota Guru99 demosivu https://demo.guru99.com/test/drag_drop.htmlTavoitteena on siirtää PANKKI veloituselementti Tili debet-puolen alueella, jotta 5000 dollarin summa kirjataan oikein debit-tapahtumaksi.

Skenaario 1: Vedä ja pudota dragAndDrop-metodilla

Tässä skenaariossa lähdeelementti (PANKKI) vedetään kohteeseen (tilin veloituspuoli) käyttämällä dragAndDrop(source, target) metodi, joka hyväksyy lähde- ja kohde-WebElementit suoraan.

Vedä ja pudota -skenaarion 1 asennus

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;

public class DragAndDropExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/drag_drop.html");

        // Locate the source (BANK) element
        WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a"));
        // Locate the target (Account debit side) element
        WebElement Dest = driver.findElement(By.xpath("//*[@id='bank']/li"));

        // Create the Actions instance
        Actions act = new Actions(driver);
        // Perform drag and drop
        act.dragAndDrop(Source, Dest).build().perform();
    }
}

Skriptin suorittamisen jälkeen PANKKI laatta siirtyy sisään Tili debit-alueella ja 5000 dollarin summa rekisteröidään debitiksi.

Eclipse vedä ja pudota -skriptin suorittaminen

Demosivun visuaalinen tulos näyttää tältä:

Vedä ja pudota -tulosanimaatio

AIHEESEEN LIITTYVÄT ARTIKKELIT

Skenaario 2: Vedä ja pudota dragAndDropBy-metodilla

dragAndDropBy(source, xOffset, yOffset) menetelmä tarjoaa pikselitason tarkkuuden. Pudotuksen sijaanping kohdeelementissä se siirtää lähdettä tietyn määrän pikseleitä X- ja Y-akseleita pitkin.

Voit määrittää siirtymän viemällä hiiren osoittimen kohdealueen päälle selaimessasi ja lukemalla pikselikoordinaatit työkalulla, kuten tarkastusviivaimella tai näyttökoordinaatit-laajennuksella.

Pikselioffsettien tunnistaminen dragAndDropBy-funktiolla

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;

public class DragAndDropByExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/drag_drop.html");

        // Locate the source (BANK) element
        WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a"));

        // Create the Actions instance
        Actions act = new Actions(driver);
        // Drag the source by 400 pixels right and 0 pixels down
        act.dragAndDropBy(Source, 400, 0).build().perform();
    }
}

Skripti siirtää BANK-ruutua annetun siirtymän verran ja pudottaa sen tilin veloituspuolelle, jolloin tuloksena on sama taloudellinen tulos kuin skenaariossa 1.

Skenaario 3: Vedä, pudota ja tarkista useita elementtejä

Tässä skenaariossa ketjutetaan useita vedä ja pudota -operaatioita ja varmistetaan tulos asettamalla lopullinen summa kohteeseen. Useita lähdeelementtejä (PANKKI, MYYNTI, 5000, 500) siirretään omille debit- ja kredit-alueilleen, ja skripti vahvistaa, että kokonaissummat vastaavat odotettua saldoa.

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;

public class DragAndDropMultiple {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/drag_drop.html");

        // Locate sources
        WebElement srcBank = driver.findElement(By.xpath("//*[@id='credit2']/a"));
        WebElement srcSales = driver.findElement(By.xpath("//*[@id='credit1']/a"));
        WebElement src5000 = driver.findElement(By.xpath("//*[@id='fourth']/a"));
        WebElement src500 = driver.findElement(By.xpath("//*[@id='fourth']/a"));

        // Locate targets
        WebElement debitSide = driver.findElement(By.xpath("//*[@id='bank']/li"));
        WebElement creditSide = driver.findElement(By.xpath("//*[@id='loan']/li"));
        WebElement amount7 = driver.findElement(By.xpath("//*[@id='amt7']/li"));
        WebElement amount8 = driver.findElement(By.xpath("//*[@id='amt8']/li"));

        Actions act = new Actions(driver);
        act.dragAndDrop(srcBank, debitSide).build().perform();
        act.dragAndDrop(srcSales, creditSide).build().perform();
        act.dragAndDrop(src5000, amount7).build().perform();
        act.dragAndDrop(src500, amount8).build().perform();

        // Verify the displayed total
        String total = driver.findElement(By.xpath("//*[@id='totamt']")).getText();
        if (total.equals("5500")) {
            System.out.println("Test Passed: total matches expected 5500");
        } else {
            System.out.println("Test Failed: actual total " + total);
        }
    }
}

Tämä malli osoittaa, kuinka vetämällä ja pudottamalla voidaan validoida toiminnallista käyttäytymistä, ei pelkästään visuaalista liikettä.

Vedä ja pudota -automaation parhaat käytännöt

Vedä ja pudota -testit ovat epävakaimpia skriptejä Selenium sviittiä, koska ne ovat riippuvaisia ​​tarkoista hiiren koordinaateista ja DOM-valmiudesta. Seuraavat käytännöt pitävät ne luotettavina:

  • Odota elementtejä: Käyttää WebDriverWait ExpectedConditions.elementToBeClickable ennen vedon käynnistämistä.
  • Mieluummin vedä ja pudota kuin JavaSkriptihakkeroinnit: Natiivit HTML5-vetotapahtumat tarvitsevat joskus JavaSkriptin vararatkaisu, mutta käytä ensin Actions API:a.
  • Vieritä kohde näkyviin: Näytön ulkopuolinen kohde aiheuttaa hiljaisia ​​virheitä. Actions.scrollToElement tai JavaSkriptin vieritys ennen vetämistä.
  • Varmista tulos: Väitä aina mitattavaa tilanmuutosta (teksti, attribuutti, määrä) pudotuksen jälkeen sen sijaan, että luottaisit toiminnon suorittamiseen.
  • Suorita vakaalla resoluutiolla: Pikselioffset-vetoketjut katkeavat, jos näyttöalueen koko poikkeaa offset-arvojen laskemiseen käytetystä koosta.

UKK

Vedä ja pudota sisään Selenium on automaattinen hiiriele, joka poimii lähdeelementin ja vapauttaa sen kohteessa. Se suoritetaan Actions-luokan kautta käyttämällä dragAndDrop- tai dragAndDropBy-metodia.

dragAndDrop hyväksyy lähde- ja kohde-WebElement-elementit. dragAndDropBy hyväksyy lähteen sekä x- ja y-pikselioffsetit, mikä antaa tarkan hallinnan, kun kohde ei ole erillinen elementti.

build() kokoaa ketjutetut vuorovaikutukset yhdeksi yhdistetyksi toiminnoksi ja perform() suorittaa sen. Ilman perform()-funktiota jonossa olevia vaiheita ei koskaan suoriteta selaimessa.

Monet HTML5-sivustot käyttävät natiiveja drag-tapahtumia, joita Actions API ei aina laukaise. Näissä tapauksissa lähetä dragstart-, dragover- ja drop-tapahtumat executeScriptin kautta JavaSkriptin varajärjestelmä.

Avaa selaimen DevTools, vie hiiri kohteen päälle ja lue elementin getBoundingClientRect-arvot. Subtract lähdesijainti kohdesijainnista saadaksesi x- ja y-siirtymät pikseleinä.

Kyllä. Yhdistä lähde- ja kohdehaut WebDriverWaitin elementtiin ExpectedConditions.elementToBeClickable-elementin kanssa, jotta raahaus suoritetaan vasta molempien elementtien vuorovaikutuksen jälkeen, mikä vähentää CI-suoritusten epätasaisuutta.

Tekoälytyökalut tarjoavat itsekorjautuvia paikantimia, jotka mukautuvat XPath-polkujen muuttuessa ja suosittelevat vakaita valitsimia lähde- ja kohdeelementeille. Tämä vähentää ylläpitotarvetta eri versioissa toimivissa vedä ja pudota -ohjelmistoissa.

Kyllä. Tekoälykoodausavustajat muuttavat yksinkertaisen skenaarion, kuten "vedä BANK debit-puolelle ja vaadi summa", täydelliseksi toimintoketjuksi, joka sisältää vetämällä ja pudottamalla, luomalla, suorittamalla ja vahvistamalla.

Tiivistä tämä viesti seuraavasti: