Menu

Come utilizzare il selettore CSS per identificare gli elementi Web per gli script Selenium - Selenium Tutorial # 6

  • Principale
  • Test Di Automazione
  • Come utilizzare il selettore CSS per identificare gli elementi Web per gli script Selenium - Selenium Tutorial # 6

how use css selector

Prova Il Nostro Strumento Per Eliminare I Problemi

Nel nostro precedente tutorial sul selenio , abbiamo imparato diversi tipi di localizzatori. Abbiamo anche imparato a usare: ID, ClassName, Name, Link Text e XPath locator per identificare gli elementi web su una pagina web.

In continuazione con ciò, oggi impareremo come utilizzare CSS Selector come un localizzatore . Questo è il nostro sesto tutorial nel nostro serie gratuita Selenium Training .

Utilizzo del selettore CSS come localizzatore:

CSS Selector è la combinazione di un selettore di elementi e un valore di selettore che identifica l'elemento web all'interno di una pagina web. Il composto di un selettore di elementi e del valore del selettore è noto come modello di selezione.

Selettore CSS Selenium Locator

Selector Pattern è costruito utilizzando tag HTML, attributi e relativi valori. Il tema centrale dietro la procedura per creare CSS Selector e Xpath sono molto simili sottostanti all'unica differenza nel loro protocollo di costruzione.

Come Xpath, il selettore CSS può anche individuare elementi web privi di ID, classe o nome.

il miglior software spia per cellulari

Quindi ora andando avanti, discutiamo i tipi primitivi di selettori CSS:

Utilizzo del selettore CSS come localizzatore

Cosa imparerai:

Selettore CSS: ID

In questo esempio, accediamo alla casella di testo 'Email' presente nel modulo di accesso su Gmail.com.

La casella di testo Email ha un attributo ID il cui valore è definito come 'Email'. Pertanto l'attributo ID e il suo valore possono essere utilizzati per creare CSS Selector per accedere alla casella di testo dell'email.

Creazione di selettore CSS per elemento web

Passo 1 : Individua / ispeziona l'elemento web (casella di testo 'Email' nel nostro caso) e nota che il tag HTML è 'input' e il valore dell'attributo ID è 'Email' ed entrambi fanno collettivamente un riferimento alla 'Casella di testo email'. Quindi i dati di cui sopra verrebbero utilizzati per creare CSS Selector.

Utilizzo del selettore CSS come localizzatore 2

Verifica il valore del localizzatore

Passo 1 : Digitare 'css = input # Email', ovvero il valore del localizzatore nella casella di destinazione nell'IDE Selenium e fare clic sul pulsante Trova. Si noti che la casella di testo e-mail verrà evidenziata.

Utilizzo del selettore CSS come localizzatore 3

Sintassi

css =

  • Tag HTML - È il tag che viene utilizzato per indicare l'elemento web a cui vogliamo accedere.
  • # - Il segno cancelletto viene utilizzato per simboleggiare l'attributo ID. È obbligatorio utilizzare il segno cancelletto se viene utilizzato l'attributo ID per creare CSS Selector.
  • Valore dell'attributo ID - È il valore di un attributo ID a cui si accede.
  • Il valore di ID è sempre preceduto da un segno cancelletto.

Nota: Applicabile anche per altri tipi di selettori CSS

  • Quando si specifica CSS Selector nella casella di testo di destinazione dell'IDE Selenium, ricordarsi sempre di anteporre 'css ='.
  • La sequenza dei suddetti artefatti è inalterabile.
  • Se due o più elementi web hanno lo stesso tag HTML e lo stesso valore dell'attributo, verrà identificato il primo elemento contrassegnato nell'origine della pagina.

Selettore CSS: classe

In questo esempio, dovremmo accedere alla casella di controllo 'Resta connesso' presente sotto il modulo di accesso su gmail.com.

La casella di controllo 'Rimani connesso' ha un attributo Classe il cui valore è definito come 'ricorda'. Pertanto l'attributo Class e il suo valore possono essere utilizzati per creare un selettore CSS per accedere all'elemento web designato.

L'individuazione di un elemento utilizzando Class come selettore CSS è molto simile all'utilizzo di ID, l'unica differenza sta nella formazione della sintassi.

Creazione di un selettore CSS per elemento web

Passo 1 : Individua / ispeziona l'elemento web (casella di controllo 'Resta connesso' nel nostro caso) e nota che il tag HTML è 'etichetta' e il valore dell'attributo ID è 'ricorda' ed entrambi fanno collettivamente un riferimento al 'Resta connesso' nella casella di controllo '.

Verifica il valore del localizzatore

Passo 1 : Digita 'css = label.remember' ovvero il valore del localizzatore nella casella di destinazione nell'IDE Selenium e fai clic sul pulsante Trova. Notare che la casella di controllo 'Resta connesso' sarebbe evidenziata.

Utilizzo del selettore CSS come localizzatore 4

Sintassi

css =

  • . - Il segno del punto viene utilizzato per simboleggiare l'attributo di classe. È obbligatorio utilizzare il segno del punto se viene utilizzato un attributo Class per creare un selettore CSS.
  • Il valore di Class è sempre preceduto da un segno di punto.

Selettore CSS: attributo

In questo esempio, avremmo accesso al pulsante 'Accedi' presente sotto il modulo di accesso su gmail.com.

Il pulsante 'Accedi' ha un attributo di tipo il cui valore è definito come 'invia'. Pertanto l'attributo type e il suo valore possono essere utilizzati per creare un selettore CSS per accedere all'elemento web designato.

Creazione di un selettore CSS per elemento web

Passo 1 : Individua / ispeziona l'elemento web (pulsante 'Accedi' nel nostro caso) e nota che il tag HTML è 'input', l'attributo è tipo e il valore dell'attributo tipo sono 'invia' e tutti insieme fanno riferimento a il pulsante 'Accedi'.

Verifica il valore del localizzatore

Passo 1 : Digita 'css = input (type =’ submit ’)', ovvero il valore del localizzatore nella casella di destinazione nell'IDE Selenium e fai clic sul pulsante Trova. Notare che il pulsante 'Accedi' verrà evidenziato.

Utilizzo del selettore CSS come localizzatore 5

Sintassi

css =

  • Attributo - È l'attributo che vogliamo utilizzare per creare CSS Selector. Può valore, tipo, nome ecc. Si consiglia di scegliere un attributo il cui valore identifica in modo univoco l'elemento web.
  • Valore dell'attributo - È il valore di un attributo a cui si accede.

Selettore CSS: ID / classe e attributo

In questo esempio, accediamo alla casella di testo 'Password' presente nel modulo di accesso su gmail.com.

La casella di testo 'Password' ha un attributo ID il cui valore è definito come 'Passwd', attributo di tipo il cui valore è definito come 'password'. Pertanto l'attributo ID, l'attributo di tipo ei loro valori possono essere utilizzati per creare CSS Selector per accedere all'elemento web designato.

miglior task manager per Windows 10

Creazione di un selettore CSS per elemento web

Passo 1 : Individuare / ispezionare l'elemento web (casella di testo 'Password' nel nostro caso) e notare che il tag HTML è 'input', gli attributi sono ID e tipo e i valori corrispondenti sono 'Passwd' e 'password' e tutti insieme fare un riferimento alla casella di testo 'Password'.

Verifica il valore del localizzatore

Passo 1 : Digita 'css = input # Passwd (name =’ Passwd ’)' cioè il valore del localizzatore nella casella di destinazione nell'IDE Selenium e fai clic sul pulsante Trova. Notare che la casella di testo 'Password' verrà evidenziata.

Utilizzo del selettore CSS come localizzatore 5

Sintassi

css =

È inoltre possibile fornire due o più attributi nella sintassi.Per esempio, 'Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)'.

Selettore CSS: sottostringa

CSS in Selenium permette di abbinare una stringa parziale e quindi derivare una caratteristica molto interessante per creare selettori CSS usando sottostringhe. Ci sono tre modi in cui i selettori CSS possono essere creati in base al meccanismo utilizzato per abbinare la sottostringa.

Tipi di meccanismi

Tutti i meccanismi sottostanti hanno un significato simbolico.

  • Trova la corrispondenza con un prefisso
  • Trova la corrispondenza con un suffisso
  • Trova una sottostringa

Cerchiamo di discuterli in dettaglio.

Trova la corrispondenza con un prefisso

Viene utilizzato per corrispondere alla stringa con l'aiuto di un prefisso corrispondente.

Sintassi

css =

  • ^ - Notazione simbolica per abbinare una stringa utilizzando il prefisso.
  • Prefisso - È la stringa in base alla quale viene eseguita l'operazione di corrispondenza. La probabile stringa dovrebbe iniziare con la stringa specificata.

Per esempio: Consideriamo la 'casella di testo della password', quindi il selettore CSS corrispondente sarebbe:

css = input # Passwd (name ^ = ’Pass’)

Trova la corrispondenza con un suffisso

Viene utilizzato per corrispondere alla stringa con l'aiuto di un suffisso corrispondente.

Sintassi

css =

  • # - Notazione simbolica per abbinare una stringa utilizzando il suffisso.
  • Il suffisso - È la stringa in base alla quale viene eseguita l'operazione di corrispondenza. La probabile stringa dovrebbe terminare con la stringa specificata.

Per esempio,Consideriamo nuovamente la 'casella di testo della password', quindi il selettore CSS corrispondente sarebbe:

css = input # Passwd (name $ = ’wd’)

Trova una sottostringa

Viene utilizzato per corrispondere alla stringa con l'aiuto di una sottostringa corrispondente.

Sintassi

css =

  • * - Notazione simbolica per abbinare una stringa utilizzando una sottostringa.
  • Sottostringa - È la stringa in base alla quale viene eseguita l'operazione di corrispondenza. La probabile stringa dovrebbe avere lo schema di stringa specificato.

Per esempio,consideriamo di nuovo la 'casella di testo della password', quindi il selettore CSS corrispondente sarebbe:

css = input # Passwd (name $ = ’wd’)

Selettore CSS: testo interno

Il testo interno ci aiuta a identificare e creare CSS Selector utilizzando uno schema di stringa che il tag HTML manifesta sulla pagina web.

Considera: 'Hai bisogno di aiuto?' collegamento ipertestuale presente sotto il form di login su gmail.com.

Il tag di ancoraggio che rappresenta il collegamento ipertestuale ha un testo racchiuso all'interno. Quindi questo testo può essere utilizzato per creare un selettore CSS per accedere all'elemento web designato.

Sintassi:

css =

  • : - Il segno del punto viene utilizzato per simbolizzare il metodo contiene
  • Contiene: è il valore di un attributo di classe a cui si accede.
  • Testo: il testo visualizzato in un punto qualsiasi della pagina Web indipendentemente dalla sua posizione.

Questa è una delle strategie più utilizzate per individuare l'elemento web a causa della sua sintassi semplificata.

A causa del fatto che la creazione di CSS Selector e Xpath richiede molti sforzi e pratica, quindi il processo viene esercitato solo da utenti più sofisticati e formati.

Prossimo tutorial n. 7 : Andando avanti con il nostro prossimo tutorial, coglieremo l'occasione per presentarvi un'estensione delle strategie di localizzazione. Quindi, nel prossimo tutorial, studieremo il file meccanismo per individuare elementi web su Google Chrome e Internet Explorer.

servizi web intervista domande e risposte per esperti in java

Stiamo trattando Selenium Locator in modo più dettagliato in quanto è una parte importante della creazione di Selenium Script.

Fateci sapere le vostre domande / commenti qui sotto.

Lettura consigliata

^