Menu

Come prendere screenshot in selenio

how take screenshot selenium

Prova Il Nostro Strumento Per Eliminare I Problemi

Questo tutorial spiega l'importanza di Selenium Screenshot e come utilizzare Ashot per acquisire Screenshot nell'applicazione Selenium con esempi:

Gli screenshot sono fondamentalmente utilizzati nell'analisi dei bug. Aiutano a capire se l'applicazione funziona secondo i requisiti dell'utente o meno.

Per ogni caso di test, l'output ricevuto potrebbe essere diverso, a volte viene ricevuto l'output corretto, a volte otteniamo un errore, a volte viene ricevuto un messaggio di errore a causa di dati di input mancanti o insufficienti, ecc. Lo screenshot aiuta a tenere traccia delle prove di azioni / output ricevuto.

=> Controlla TUTTI i tutorial sul selenio qui

Screenshot del selenio

In questo tutorial, impareremo dove sono necessari gli screenshot di Selenium. Discuteremo Ashot e come possiamo usare Ashot in Selenium (installazione e configurazione di ashot ()), impareremo a catturare schermate in Selenium (per l'intera pagina web, per un singolo elemento nella pagina e per una finestra attualmente aperta, anche confrontando 2 immagini) e poi guarda alcuni esempi in cui gli screenshot vengono spesso catturati.

Cosa imparerai:

Capire gli screenshot del selenio

GmailLogin

L'immagine sopra è un esempio di uno screenshot acquisito durante l'esecuzione del codice dal sito Web di Gmail. L'immagine aiuta a confermare che l'utente ha effettuato correttamente l'accesso all'account e-mail con il nome utente e la password corretti.

Pertanto, gli screenshot sono molto utili per acquisire le azioni / output ricevuti dopo che un'azione è stata eseguita e quindi aiuta a confermare che un'azione viene eseguita senza alcun problema.

Il selenio può acquisire automaticamente screenshot; dobbiamo solo aggiungere codice per screenshot nel processo di esecuzione di codice in cui sono necessari screenshot.

Dove sono necessari gli screenshot del selenio

Di seguito sarebbero le possibilità:

  • Quando si verificano problemi nel trovare un elemento in una pagina web.
  • Dove c'è un timeout nella ricerca di elementi web su una pagina.
  • Quando si verifica un errore o un problema nel sistema / applicazione.
  • Quando si verifica un errore di asserzione.

Cos'è Ashot

Ashot () è un'utilità di terze parti supportata dal driver web Selenium per catturare gli screenshot.

Ashot () fornisce le seguenti operazioni per l'acquisizione di schermate:

  • Catturare l'intera pagina
  • Acquisizione dell'elemento web
  • Confronto di immagini

Vediamo come funziona esattamente nella prossima sezione.

Caratteristiche di Ashot:

  • È possibile acquisire uno screenshot dell'intera pagina.
  • È anche possibile acquisire uno screenshot di un elemento web, che è supportato su varie piattaforme come Android Emulator Browser, iOS Simulator Mobile Safari, i diversi browser desktop).
  • Fornisce un confronto flessibile degli screenshot.
  • Decora gli screenshot.

Ashot può acquisire schermate in tre passaggi:

  • Cattura uno screenshot della pagina intera.
  • Trova le dimensioni e la posizione dell'elemento.
  • Ritaglia lo screenshot originale.

Come possiamo usare Ashot in selenio

Considera i seguenti passaggi per scaricare e configurare Ashot sulla tua macchina:

  1. Vai al collegamento.
  2. Trova l'ultima versione del file jar presente per Ashot.
  3. Scarica e salva il file jar in un percorso specifico sul tuo computer.
  4. Ora per aggiungere il file jar al tuo progetto in Eclipse: vai al tuo progetto -> fai clic con il pulsante destro del mouse -> vai alle proprietà -> seleziona Build Path -> Librerie -> aggiungi vasi esterni
  5. Sfoglia il percorso in cui viene salvato il file jar scaricato.
  6. Seleziona il file jar, fai clic su Applica e chiudi.

Come acquisire schermate in selenio

Selenium fornisce funzionalità integrate per l'acquisizione di screenshot. Secondo il requisito, TakesScreenshot l'interfaccia viene utilizzata per acquisire schermate durante l'esecuzione degli script Selenium. Pertanto, Selenium Webdriver aiuta ad acquisire schermate durante l'esecuzione del codice.

Nella sezione seguente, impareremo i diversi tipi di screenshot che vengono catturati.

Di seguito sono i tipi:

Acquisizione di uno screenshot di:

  • Finestra aperta corrente
  • L'intera pagina web
  • Solo un elemento web specifico
  • Confronto dell'immagine dello screenshot con l'immagine originale

Cerchiamo di capire i punti precedenti in dettaglio.

# 1) Finestra aperta corrente

Diamo un'occhiata all'implementazione del codice per la gestione degli screenshot in Selenium per la finestra attualmente aperta:

package SeleniumPrograms; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import org.apache.commons.io.FileUtils; import org.openqa.selenium.OutputType; import org.openqa.selenium.TakesScreenshot; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; import org.testng.annotations.Test; @Test public class Screenshot { public static void main(String() args) throws IOException { // TODO Auto-generated method stub WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS);//for page load drv.get('https://opensource-demo.orangehrmlive.com/'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait //Capturing the screenshot File f = ((TakesScreenshot) drv).getScreenshotAs(OutputType.FILE); FileUtils.copyFile(f, new File('C:/Users/Chait/Desktop/Screenshots/screenshot01.png')); //screenshot copied from buffer is saved at the mentioned path. System.out.println('The Screenshot is captured.'); } }

L'immagine sotto è l'output dell'implementazione del codice precedente. Qui, il sito OrangeHRM è aperto e viene catturato lo screenshot della pagina di accesso.

tutorial del server della fondazione del team per principianti

Finestra aperta corrente

(Immagine fonte )

Pertanto, possiamo acquisire schermate dove richiesto durante l'esecuzione del codice. Lo screenshot acquisito viene salvato in un file con estensione .png o .jpeg. Dobbiamo fornire il percorso in cui salvare il file immagine.

# 2) L'intera pagina Web

Diamo un'occhiata al codice di implementazione seguente per catturare uno screenshot della pagina completa, con l'aiuto di Ashot in Selenium webdriver. Per questo consideriamo l'esempio di una pagina (Jmeter-user-defined-variables) da - softwaretestinghelp.com .

package SeleniumPrograms; import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import org.apache.commons.io.FileUtils; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.OutputType; import org.openqa.selenium.TakesScreenshot; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.shooting.ShootingStrategies; public class Screenshot_EntirePage { public static void main(String() args) throws InterruptedException, IOException { WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); //for page load drv.get('https://www.softwaretestinghelp.com/'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait WebElement auto = drv.findElement(By.xpath('//ul(@id='mega-menu-primary')/li(6)')); auto.click(); //click Automation tab WebElement jmeter = drv.findElement(By.linkText('JMeter')); //link to JMeter page jmeter.click(); //scroll down to open a link among various links, in the Video Tutorials section of the page JavascriptExecutor js = (JavascriptExecutor) drv; js.executeScript('window.scrollBy(0,1700)'); //scrolling downwards Thread.sleep(1500); WebElement udv = drv.findElement(By.linkText('User-Defined Variables')); udv.click(); //opening User-Defined Variables link Thread.sleep(1500); //Capturing the Screenshot with the help of ashot() Screenshot screenshot=new AShot().takeScreenshot(drv); ImageIO.write(screenshot.getImage(),'PNG',new File('C:\Users\Chait\Desktop\Screenshots\entirepage.png')); //The screenshot to be captured will be in .png image format and would be saved at above mentioned path. System.out.println('Screenshot for full page is captured successfully!'); } }

Qui, il jmeter-variabili-definite dall'utente pagina del nostro sito web: www.softwaretestinghelp.com viene aperto e quindi abbiamo catturato uno screenshot di questa pagina web completa (con l'aiuto di ashot () in selenio) in formato .png e salvato nel percorso desiderato. Allo stesso modo possiamo acquisire uno screenshot dell'intera pagina per qualsiasi pagina web.

Pertanto, implementando il codice sopra per catturare lo screenshot dell'intera pagina, l'output ricevuto è come mostrato nell'immagine sottostante per uno screenshot completo della pagina web.

Pagina_intera

# 3) Un elemento web

Diamo un'occhiata al seguente codice di implementazione, con l'uso di Ashot in Selenium webdriver per catturare screenshot di un elemento web specifico sulla pagina web.

package SeleniumPrograms; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import org.testng.annotations.Test; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.shooting.ShootingStrategies; @Test public class Screenshot_WebEle_Ashot { public static void main(String() args) throws IOException { // TODO Auto-generated method stub WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); //for page load drv.get('https://opensource-demo.orangehrmlive.com/'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait WebElement uname = drv.findElement(By.id('txtUsername')); //Username....ID.... uname.sendKeys('Admin'); WebElement pword = drv.findElement(By.id('txtPassword')); //Password....ID.... pword.sendKeys('admin123'); WebElement login_b = drv.findElement(By.xpath('//input(@id='btnLogin')')); login_b.click(); //Login button....XPATH.... WebElement ele = drv.findElement(By.linkText('Maintenance')); ele.click(); //opening link for element for which we want screenshot // pass driver as well as the element in takeScreenshot() method. Screenshot Screenshot_webele = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(100)).takeScreenshot(drv, ele); // For saving the screenshot in .png/.jpeg format at the desired location ImageIO.write(Screenshot_webele.getImage(),'png',new File('C:\Users\Chait\Desktop\Screenshots\element.jpeg')); System.out.println('Screenshot for specified element captured successfully!'); } }

Quindi, implementando il codice sopra per catturare uno screenshot di un elemento specifico (qui scheda Manutenzione), l'uscita ricevuta è come mostrato nell'immagine sottostante.

Maintenance_WebElement 1

Qui scegliamo la scheda 'Manutenzione' come elemento per il quale è richiesto uno screenshot. Indica il percorso in cui vogliamo salvare lo screenshot. Allo stesso modo possiamo catturare uno screenshot per qualsiasi altro elemento anche su qualsiasi sito web di questo tipo.

# 4) Confronto tra screenshot e immagine originale

Diamo uno sguardo al codice di implementazione sottostante con l'uso di Ashot in Selenium webdriver per catturare uno screenshot di un elemento del logo sulla pagina web e confrontarlo con il logo originale.

Per questo consideriamo l'esempio di naukri.com :

package SeleniumPrograms; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; 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.firefox.FirefoxDriver; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.comparison.ImageDiff; import ru.yandex.qatools.ashot.comparison.ImageDiffer; public class Screen_Compare { public static void main(String() args) throws IOException { // TODO Auto-generated method stub WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); //for page load drv.get('https://www.naukri.com/nlogin/login'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait // Finding the logo element and capturing its screenshot WebElement logo = drv.findElement(By.xpath('//a(@class='nLogo fl')/img')); Screenshot logoSrcshot = new AShot().takeScreenshot(drv, logo); // Reading the image for comparision BufferedImage expectedImage = ImageIO.read(new File('C:\Users\Chait\Desktop\naukri_Logo.png')); BufferedImage actualImage = logoSrcshot.getImage(); ImageDiffer img_differnece = new ImageDiffer(); // Creating ImageDiffer object and calling the method makeDiff() ImageDiff differnece = img_differnece.makeDiff(actualImage, expectedImage); if (differnece.hasDiff() == true) //Checking the difference using in-built functions) { System.out.println('Both logo images matched') //in case when no difference found } else { System.out.println('The logo images are different'); //in case when difference found } } }

Pertanto, implementando il codice sopra per il confronto dello screenshot di un elemento del logo (qui logo naukri.com), l'output ricevuto è come mostrato nell'immagine sottostante.

logo Naukri

Qui, scegliamo il logo di 'naukri.com', ne catturiamo lo screenshot e poi lo confrontiamo con il logo originale. La differenza tra le immagini si trova utilizzando le funzioni integrate. Se non viene rilevata alcuna differenza nelle 2 immagini del logo, il programma stampa l'output come ' Entrambe le immagini del logo corrispondevano 'Else stampa' Le immagini del logo sono diverse '.

Esempi in cui gli screenshot vengono spesso acquisiti

# 1) Conferma del logout

Per accedere a un sito Web, è necessario immettere il nome utente e la password corretti, dopodiché si accede al sito Web. Quindi l'utente esegue le opzioni richieste e una volta terminato il lavoro, l'utente viene disconnesso.

Quindi, se forniamo un codice per lo screenshot dopo essere stato disconnesso, verrà visualizzata nuovamente la pagina di accesso che confermerebbe l'azione di disconnessione. Si prega di vedere l'immagine sottostante per maggiori dettagli:

conferma di logout

quale azienda è attualmente leader nei servizi di web hosting basati su cloud?

# 2) Conferma di un record appena creato

L'aggiunta del codice per lo screenshot dopo la creazione di un nuovo record conferma che il record è stato creato correttamente. Si prega di vedere lo screenshot qui sotto per maggiori dettagli.

Conferma di un record appena creato

Nel caso in cui il record non venga creato, il codice non procederà ulteriormente all'acquisizione dello screenshot e ciò confermerebbe che il record non viene creato correttamente.

# 3) Esempio di output mancante / errato

Questo esempio include la creazione di un nuovo record per la qualifica lavorativa sul sito Web di OrangeHRM. Qui, il campo Job Title è contrassegnato con '*', il che significa che è un campo obbligatorio. Quindi, il record non verrà creato fino a quando i campi obbligatori non saranno riempiti e solo allora saremo in grado di salvare il record. Si prega di vedere lo screenshot qui sotto per maggiori dettagli.

Esempio di output mancante / errato

Conclusione

Quindi, in questo articolo abbiamo visto, dove sono necessari gli screenshot di Selenium, quindi come possiamo gestire gli screenshot in Selenium, cos'è Ashot, come può essere scaricato, configurato e effettivamente utilizzato in Selenium. Abbiamo compreso l'implementazione del codice per la gestione degli screenshot e abbiamo anche visto alcuni esempi in cui gli screenshot vengono spesso acquisiti.

=> Leggere tutta la guida completa al selenio

Lettura consigliata

^