Menú

Com gestionar la barra de desplaçament a Selenium Webdriver

  • Principal
  • Altres
  • Com gestionar la barra de desplaçament a Selenium Webdriver

how handle scroll bar selenium webdriver

Proveu El Nostre Instrument Per Eliminar Problemes

En aquest tutorial s’expliquen les barres de desplaçament, els tipus de barres de desplaçament i com es maneja la barra de desplaçament a Selenium:

La barra de desplaçament és una secció llarga i fina a la vora de la pantalla de l'ordinador. Mitjançant la barra de desplaçament podem veure tot el contingut o visualitzar la pàgina completa mentre es desplaça cap amunt o cap avall o cap a l’esquerra-dreta amb l’ajut d’un ratolí.

En primer lloc, entenem alguns termes com el botó, la pista i els botons que s’utilitzen amb referència a les barres de desplaçament.

=> Consulteu TOTS els tutorials de Selenium aquí

l'algorisme de dijkstra mitjançant la cua de prioritat java

Manipulació de la barra de desplaçament a Selenium

En aquest tutorial, coneixerem els tipus de barres de desplaçament. També veurem la barra de desplaçament en HTML, comprendreem la implementació del codi per gestionar la barra de desplaçament a Selenium i, finalment, coneixerem els exemples / aplicacions on s’utilitzen habitualment les barres de desplaçament.

Què aprendreu:

Comprensió de les barres de desplaçament

La imatge següent mostra 2 tipus de barres de desplaçament:

tipus de barres de desplaçament

Què són el botó, la pista i els botons

Les barres de desplaçament tenen botons als dos extrems de la barra, que poden ser un botó cap endavant i cap enrere per a la barra de desplaçament horitzontal i cap amunt i cap avall per a la barra de desplaçament vertical.

Pom és la porció de la barra de desplaçament que es pot moure. Es pot moure cap a l'esquerra-dreta per a una barra de desplaçament horitzontal i cap amunt cap avall per a la barra de desplaçament vertical.

Seguiment és la secció de la barra de desplaçament sobre la qual es pot moure el comandament per veure el contingut complet.

La imatge següent explica clarament el concepte:

Botó, rastre i botó

(imatge font )

Tipus de barres de desplaçament

tipus de barres de desplaçament

Bàsicament, n’hi ha de 2 tipus:

  • Barra de desplaçament horitzontal
  • Barra de desplaçament vertical

# 1) Barra de desplaçament horitzontal

Una barra de desplaçament horitzontal permet a l'usuari desplaçar-se cap a l'esquerra o la dreta per veure tot el contingut de la finestra.

barra de desplaçament horitzontal

La imatge superior mostra una barra de desplaçament horitzontal ressaltada en vermell. Podem veure que la barra de desplaçament es pot moure d’esquerra a dreta o viceversa per veure el contingut complet que es mostra a la pantalla.

# 2) Barra de desplaçament vertical

qui respon del valor empresarial lliurat per un equip de scrum

Una barra de desplaçament vertical permet a l'usuari desplaçar-se amunt o avall o viceversa per veure el contingut complet a la finestra.

barra de desplaçament vertical

La imatge superior mostra una barra de desplaçament vertical ressaltada en vermell. Podem veure que la barra de desplaçament es pot moure de dalt a baix o viceversa per veure el contingut complet que es mostra a la pantalla.

Normalment, les pàgines web tenen molt contingut i són bons exemples de tenir barres de desplaçament verticals.

Barra de desplaçament en HTML

S’utilitza molt sovint en diferents llocs web, aplicacions del sistema i gairebé a tot arreu. Permet als usuaris veure completament el contingut de la pàgina desplaçant-se cap amunt-cap avall o cap a l’esquerra-dreta.

La imatge següent és un exemple creat en HTML:

scrollhtml

Vegeu el següent codi HTML per a la imatge superior:

Scroll Bar #text { width: 200px; height: 200px; border: 1px solid; font-size: 30px; overflow: scroll; text-align: center; } Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!

Així, podem veure la pàgina HTML que, quan es desplaça cap avall i cap amunt amb l’ajut d’una barra de desplaçament vertical, es pot visualitzar el contingut complet.

Codi per a la manipulació de la barra de desplaçament al seleni

Selenium gestiona les operacions de desplaçament de diferents maneres. Els diferents mètodes són els següents:

# 1) Utilitzar l'opció de desplaçament integrada O mitjançant la classe Actions

El desplaçament es pot gestionar a Selenium mitjançant una opció de desplaçament integrada, tal com es mostra al següent codi d’implementació:

La sintaxi de la barra de desplaçament mitjançant opcions de desplaçament integrades:

Actions act = new Actions(driver); //Object of Actions class act.sendKeys(Keys. PAGE_DOWN ).build().perform(); //Page Down act.sendKeys(Keys. PAGE_UP ).build().perform(); //Page Up

Codi per gestionar la barra de desplaçament mitjançant una opció de desplaçament integrada.

package SeleniumPrograms; import org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.interactions.Actions; public class Scroll { public static void main(String() args) throws InterruptedException { WebDriver dr = new FirefoxDriver(); dr.manage().window().maximize(); dr.get('https://opensource-demo.orangehrmlive.com/'); //testing webpage WebElement uname = dr.findElement(By.id('txtUsername')); //username uname.sendKeys('Admin'); WebElement pwd = dr.findElement(By.name('txtPassword')); //password pwd.sendKeys('admin123'); WebElement login_button = dr.findElement(By.xpath('//input(@id='btnLogin')')); login_button.click(); //login button WebElement admin = dr.findElement(By.id('menu_admin_viewAdminModule')); admin.click(); WebElement job = dr.findElement(By.id('menu_admin_Job')); job.click(); WebElement jobtitle_link = dr.findElement(By.linkText('Job Titles')); jobtitle_link.click(); Actions act = new Actions(dr); act.sendKeys(Keys.PAGE_DOWN).build().perform(); //Page Down System.out.println('Scroll down perfomed'); Thread.sleep(3000); act.sendKeys(Keys.PAGE_UP).build().perform(); //Page Up System.out.println('Scroll up perfomed'); Thread.sleep(3000); } }

Al codi de programa anterior, el desplaçament es fa a Selenium mitjançant Accions classe. Això es fa creant un objecte de classe Actions passant el controlador. A més, hem vist l’ús d’una opció de desplaçament integrada per al desplaçament cap amunt i cap avall.

La sortida del codi anterior:

scrolldown1

(imatge font )

desplaçar-se cap amunt

Així, podem veure les operacions de desplaçament cap avall i de desplaçament cap amunt realitzades amb l’ajut de Selenium Webdriver mitjançant una opció de desplaçament integrada O amb el Accions mètode de classe.

# 2) Utilitzant JavascriptExecutor OR de Pixel

Aquest mètode ajuda a desplaçar-se per la pàgina web esmentant el recompte de píxels amb el qual volem desplaçar-se cap amunt o cap avall. A continuació es mostra el codi d’implementació de Scrolling by Pixel o amb JavascriptExecutor.

package SeleniumPrograms; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class ScrollBar { public static void main(String() args) throws InterruptedException { WebDriver dr = new FirefoxDriver(); dr.manage().window().maximize(); dr.get('https://opensource-demo.orangehrmlive.com/'); //testing webpage WebElement uname = dr.findElement(By.id('txtUsername')); //username uname.sendKeys('Admin'); WebElement pwd = dr.findElement(By.name('txtPassword')); //password pwd.sendKeys('admin123'); WebElement login_button = dr.findElement(By.xpath('//input(@id='btnLogin')')); login_button.click(); //loginbutton JavascriptExecutor js = (JavascriptExecutor)dr; js.executeScript('window.scrollBy(0,70)'); //Scroll Down(+ve) Thread.sleep(3000); System.out.println('Scrolled down..'); js.executeScript('window.scrollBy(0,-50)'); //Scroll Up (-ve) Thread.sleep(3000); System.out.println('Scrolled up..'); } }

La sortida del codi anterior:

scroll_down2

La imatge anterior mostra el desplaçament cap avall realitzat pel valor del píxel tal com s'esmenta al codi anterior per 70 (cap avall). De la mateixa manera, l'operació de desplaçament cap amunt es realitza proporcionant un valor de píxel = -50 (és a dir, cap amunt).

La imatge següent mostra el desplaçament cap amunt (per 50):

scroll_up2

Així, en aquest mètode, hem utilitzat JavascriptExecutor i hem realitzat Scroll amunt i avall proporcionant valors de píxels.

Exemples / Aplicacions

Hi ha nombroses aplicacions o exemples de barres de desplaçament. Poques d'elles són les que es descriuen a continuació:

# 1) Barres de desplaçament als fitxers Excel:

Com sabem, els fitxers Excel contenen una gran quantitat de dades. Es fa difícil visualitzar tot el contingut en una sola pàgina. Per tant, el desplaçament pot ajudar l'usuari a veure les dades que no es troben a la pantalla actual.

què hi ha a les proves de programari

fitxers exemple_excel

# 2) Desplaçament al bloc de notes

exemple_notepad

A la imatge anterior, es poden veure les barres de desplaçament horitzontalment i verticalment, proporcionant una visibilitat completa de les dades al document del bloc de notes.

# 3) Ús de la barra de desplaçament als navegadors

navegadors_exemple
Mentre llegim les dades, només podem veure la meitat de les dades a la pantalla del navegador. El desplaçament ajuda a avançar-endarrere i amunt-avall per tenir tota la vista. Per tant, en fer servir barres de desplaçament horitzontals i verticals, es pot veure el contingut complet de la pantalla del navegador.

Hi ha molts més exemples d’aquest tipus que ajuden els usuaris a visualitzar les dades completes que es mostren a la pantalla.

Conclusió

En aquest tutorial, hem après sobre les barres de desplaçament, els seus tipus. També hem vist crear i utilitzar la barra de desplaçament a la pàgina HTML

Hem entès els mètodes d’implementació del codi per gestionar les barres de desplaçament mitjançant Selenium, és a dir, l’opció de desplaçament integrada / l’ús de classes d’accions i l’ús de JavascriptExecutor / de Pixel i hem passat per poques aplicacions on s’utilitzen habitualment les barres de desplaçament.

=> Llegiu la guia completa de seleni

Lectura recomanada

^