Menu

Come individuare gli elementi nei browser Chrome e IE per la creazione di script di selenio - Tutorial sul selenio n. 7

  • Principale
  • Test Di Automazione
  • Come individuare gli elementi nei browser Chrome e IE per la creazione di script di selenio - Tutorial sul selenio n. 7

how locate elements chrome

Prova Il Nostro Strumento Per Eliminare I Problemi

Questo è il tutorial n. 7 nella nostra serie di formazione online sul selenio. Se vuoi controllare tutti i tutorial sul selenio di questa serie, controlla questa pagina .

Nel tutorial precedente, abbiamo cercato di far luce su vari tipi di localizzatori in Selenium e sui loro meccanismi di localizzazione per costruire script di test. Il tutorial consisteva principalmente nella breve introduzione di diversi tipi di localizzatori come ID, classi, Xpaths, testi di collegamento , Selettori CSS ecc. e la loro identificazione.

Andando avanti con il nostro prossimo tutorial, coglieremo l'occasione per presentarvi un'estensione delle strategie di localizzazione. Quindi, in prossimo tutorial, studieremmo il meccanismo per individuare gli elementi web su Google Chrome e Internet Explorer.

Individua gli elementi nei browser Chrome e IE

Poiché tutti siamo ben consapevoli del fatto che vi è una rapida crescita della base di utenti di Internet, le parti interessate e i programmatori stanno creando applicazioni Web che probabilmente funzioneranno sulla maggior parte dei browser.

Quindi, immagina una situazione in cui la tua applicazione web non supporta Firefox ma funziona bene per Chrome e Internet Explorer.

Ora come automatizzerai un'applicazione del genere utilizzando Selenium? O per essere precisi come individuerai gli elementi web in Chrome e Internet Explorer. Quindi la risposta è avanti in questo tutorial.

strumenti di test cross browser open source

Cosa imparerai:

Individuazione degli elementi web in Google Chrome

Cominciamo con la comprensione delle strategie di localizzazione in Google Chrome.

Come Firebug in Firefox, Google Chrome ha il suo proprio strumento di sviluppo che può essere utilizzato per identificare e individuare elementi web nella pagina web. A differenza di Firebug, un utente non è tenuto a scaricare o installare alcun plug-in separato; lo strumento per sviluppatori viene prontamente fornito in bundle con Google Chrome.

Segui i passaggi seguenti per individuare gli elementi web utilizzando lo strumento per sviluppatori di Chrome:

Passo 1: Il passaggio principale è avviare lo strumento per sviluppatori di Google Chrome. Premi F12 per avviare lo strumento. L'utente sarebbe in grado di vedere qualcosa di simile alla schermata sottostante.

Script al selenio 1

Prendi nota che la scheda 'Elemento' è evidenziata nello screenshot qui sopra. Pertanto, la scheda dell'elemento è quella che mostra tutte le proprietà HTML appartenenti alla pagina web corrente. Vai alla scheda 'Elemento' se non è aperta per impostazione predefinita all'avvio.

Puoi anche avviare lo strumento per sviluppatori facendo clic con il pulsante destro del mouse in un punto qualsiasi della pagina web e selezionando 'Ispeziona elemento', che è molto simile a quello dell'ispezione di Firebug.

Passo 2: Il passaggio successivo consiste nell'individuare l'oggetto desiderato all'interno della pagina web. Un modo per fare lo stesso è fare clic con il pulsante destro del mouse sull'elemento web desiderato e ispezionarlo. La proprietà HTML appartenente a quell'elemento web verrà evidenziata nello strumento per sviluppatori. Un altro modo è passare il mouse sulle proprietà HTML e l'elemento web corrispondente verrà evidenziato. Pertanto, in questo modo l'utente può individuare ID, classe, collegamenti ecc.

Script selenio 2

Creazione di un Xpath in Developer Tool

Abbiamo già discusso di Xpaths nell'ultimo tutorial. Abbiamo anche discusso la sua strategia di creazione. Qui baseremo la nostra discussione per verificare la validità dell'XPath creato nello strumento per sviluppatori di Chrome.

Passo 1: Per creare XPath nello strumento per sviluppatori, apri la scheda della console.

Passo 2: Digita l'Xpath creato e racchiudilo tra $ x ('// input (@ id =’ Email ’)')

Script al selenio 3

Passaggio 3: Premere il tasto Invio per vedere tutti gli elementi HTML corrispondenti con l'Xpath specificato. Nel nostro caso, c'è solo un elemento HTML corrispondente. Passa il mouse su quell'elemento HTML e l'elemento web corrispondente verrà evidenziato nella pagina web.

Script al selenio 4

In questo modo, tutti gli Xpath possono essere creati e controllati per la loro validità all'interno della console.

Le informazioni relative al CSS corrispondente all'elemento web sono disponibili nello strumento per sviluppatori di Chrome. Fare riferimento allo screenshot qui sotto:

Script selenio 5

Individuazione degli elementi Web in Internet Explorer

Come Google Chrome, Internet Explorer ha anche il proprio strumento per sviluppatori che possono essere utilizzati per identificare gli elementi web in base alle loro proprietà all'interno della pagina web. L'utente non è tenuto a scaricare o installare alcun plug-in separato, lo strumento per sviluppatori viene prontamente fornito in bundle con Internet Explorer.

Segui i passaggi seguenti per individuare gli elementi web utilizzando lo strumento IE Developer:

Passo 1: Il passaggio principale è avviare lo strumento IE Developer. Premi F12 per avviare lo strumento. L'utente sarebbe in grado di vedere qualcosa di simile alla schermata sottostante.

Script selenio 6

Prendi nota che la scheda 'HTML' è evidenziata nello screenshot qui sopra. Pertanto, la scheda HTML è quella che mostra tutte le proprietà HTML appartenenti alla pagina web corrente. Espandi la scheda HTML per visualizzare le proprietà di tutti gli elementi web appartenenti alla pagina web corrente.

Passo 2: Il passaggio successivo consiste nell'individuare l'oggetto desiderato all'interno della pagina web. Un modo per farlo è selezionare l'elemento HTML e l'elemento web corrispondente verrà evidenziato. Pertanto, in questo modo l'utente può individuare ID, classe, collegamenti ecc. Controlla nello screenshot qui sotto in cui la casella di testo dell'email verrà evidenziata non appena selezioniamo la proprietà HTML corrispondente.

Script selenio 7

Un altro modo per individuare l'elemento web è fare clic sul pulsante “Trova” presente nel menu in alto e fare clic sull'elemento web desiderato all'interno della pagina web. Di conseguenza, le proprietà HTML corrispondenti sarebbero evidenziate.

Script selenio 8

Pertanto, utilizzando lo strumento per sviluppatori, un utente può trovare ID, classi, nomi di tag e può creare Xpath per individuare elementi web.

Come lo strumento per sviluppatori di Chrome, lo strumento per sviluppatori di IE ha una sezione separata che mostra le informazioni relative ai CSS. Guarda lo screenshot qui sotto.

Script al selenio 9

Conclusione

In questo tutorial, facciamo luce sulle strategie di localizzazione degli elementi di base utilizzando lo strumento per sviluppatori per Google Chrome e Internet Explorer.

Prossimo tutorial n. 8 : Andando avanti con il nostro prossimo tutorial, avremmo il piacere di presentarti uno strumento più avanzato chiamato WebDriver. WebDriver è uno degli strumenti di test di automazione più convincenti. Quindi, dal nostro prossimo tutorial in poi, instraderemo e baseremo le nostre discussioni su WebDriver e tutte le sue parti essenziali.

Lettura consigliata

^