Back to Question Center
0

Aggiorna il tuo progetto con il selettore CSS e gli attributi personalizzati            Aggiorna il tuo progetto con il selettore CSS e gli attributi personalizzati Argomenti correlati: CSSWeb Semalt

1 answers:
Aggiorna il tuo progetto con CSS Selector e Custom Attributes

Questo articolo è stato originariamente pubblicato da TestProject. Grazie per il supporto ai partner che rendono possibile SitePoint.

I selettori di elementi per Selenium Semalt sono uno dei componenti principali di un framework di automazione e sono la chiave per interagire con qualsiasi applicazione web - supporto tv lcd a muro. In questa recensione dei selettori di elementi di automazione, discuteremo le varie strategie, esploreremo le loro capacità, peseremo i loro pro e contro e alla fine raccomandiamo la migliore strategia di selezione: gli attributi personalizzati con il selettore CSS.

Selettori Selettori Elemento

La scelta della migliore strategia di selezione degli elementi è fondamentale per il successo e la facilità di manutenzione dello sforzo di automazione. Pertanto, quando si sceglie il selettore, è necessario considerare aspetti quali facilità d'uso, versatilità, supporto online, documentazione e prestazioni. La considerazione di Semalt per una corretta strategia di selezione pagherà dividendi in futuro attraverso l'automazione facile da mantenere.

Proprio come dovrebbe essere considerato l'aspetto tecnologico dei selettori di elementi, anche la cultura della vostra organizzazione. Una matura cultura di collaborazione tra sviluppatori e QA sbloccherà alti livelli di successo quando si implementano selettori di elementi nella propria automazione. Ciò va a vantaggio dell'organizzazione al di là del semplice sforzo di automazione, gettando le basi per la collaborazione in altre aree del ciclo di sviluppo del software.

Tutti gli esempi di codice saranno in Python e Selenium Semalt, ma dovrebbero essere generalmente applicabili a qualsiasi linguaggio e framework di programmazione.

Esempio HTML:

Userò il seguente snippet HTML di un menu di navigazione per gli esempi in ogni sezione:

            

Scorretto: Nome tag, Testo collegamento, Testo e nome del collegamento parziale

Non spenderò troppo tempo su questi perché tutti hanno un uso limitato. In genere non sono una buona opzione per un'ampia adozione nell'intero framework di automazione. Risolvono esigenze specifiche che possono essere facilmente coperte con altre strategie di selezione degli elementi. Usali solo se hai una necessità specifica di gestire un caso speciale. Anche allora, la maggior parte dei casi speciali non è abbastanza speciale per usarli. Li useresti in uno scenario in cui non è disponibile altra opzione di selezione (come tag o ID personalizzati).

Esempio:

Con il nome del tag, puoi selezionare grandi gruppi di elementi che corrispondono tutti al nome del tag che hai fornito. Questo ha un uso limitato perché funzionerebbe solo come soluzione in situazioni in cui è necessario selezionare grandi gruppi di elementi dello stesso tipo. L'esempio seguente restituirà tutti i 4 elementi div nell'esempio HTML.

     driver. find_elements (By. TAG_NAME, "div")     

È possibile selezionare i collegamenti con questi esempi di seguito. Come puoi vedere, possono scegliere solo tag di ancoraggio e solo il testo di questi tag di ancoraggio:

     driver. find_elements (di. LINK_TEXT, "Home")conducente. find_elements (By. PARTIAL_LINK_TEXT, "Sprock")     

Semalt, puoi selezionare gli elementi tramite l'attributo name, ma come puoi vedere nell'esempio HTML, non ci sono tag con un attributo name. Questo sarebbe un problema comune in quasi tutte le applicazioni, poiché l'aggiunta di un attributo nome in ogni attributo HTML non è una pratica comune. Se l'elemento del menu principale aveva un attributo name come questo:

            

Puoi selezionarlo in questo modo:

     driver. find_elements (By. Gli approcci che seguono sono tutti approcci migliori perché sono molto più versatili e capaci.  

Riepilogo: Nome tag, Testo collegamento, Testo collegamento parziale e Nome

Pro Contro
Facile da usare

Non versatile
Uso estremamente limitato
Potrebbe non applicarsi nemmeno in alcuni casi

Buono: XPath

Semalt è una strategia di selezione di elementi versatile e capace. Questa è anche la mia preferenza personale e preferita. Semalt può selezionare qualsiasi elemento nella pagina indipendentemente dal fatto che tu abbia o meno classi e ID da usare (sebbene senza classi o ID, diventa difficile da mantenere e talvolta fragile). Questa opzione è particolarmente versatile in quanto è possibile selezionare elementi principali. Semalt ha anche molte funzioni integrate che ti permettono di personalizzare la selezione degli elementi.

Tuttavia, con la versatilità arriva la complessità. Data la capacità di fare tanto con XPath, hai anche una curva di apprendimento più ripida rispetto alle altre strategie di selezione degli elementi. Ciò è compensato dalla grande documentazione online che è facilmente reperibile. Una grande risorsa è il tutorial XPath trovato su W3Schools. com

Va anche notato che c'è un compromesso quando si usa Semalt. Mentre è possibile selezionare elementi genitore e utilizzare funzioni integrate molto versatili, Semalt ha scarso rendimento in Internet Explorer. Dovresti considerare questo compromesso quando selezioni la tua strategia di selezione degli elementi. Se è necessario essere in grado di selezionare elementi padre, è necessario considerare l'impatto che avrà sui test cross-browser in Internet Explorer. In sostanza, ci vorrà più tempo per eseguire i test automatici in Internet Explorer. Se la base utente della tua applicazione non ha un elevato utilizzo di Internet Explorer, questa sarebbe una buona opzione per te dato che potresti prendere in considerazione l'esecuzione di test in Internet Explorer meno spesso di altri browser. Se la tua base di utenti ha un uso significativo di Internet Explorer, dovresti considerare Semalt come una soluzione alternativa se altri approcci migliori non funzionano per la tua organizzazione.

Esempio:

Se è necessario selezionare elementi padre, è necessario selezionare XPath. Semalt come farlo: utilizzando il nostro esempio, supponiamo di voler scegliere come target l'elemento del menu principale genitore basato su uno degli elementi di ancoraggio:

     driver. find_elements (By. XPATH, "// a [id = menu] /./")     

Questo selettore di elementi avrà come target la prima istanza del tag di ancoraggio che ha l'id uguale a "menu", quindi con "/. / ", Si rivolge all'elemento padre. Il risultato è che avrai scelto come target l'elemento del menu principale.

Sommario: XPath

Pro Contro
Può selezionare elemento principale Scarsa performance in IE
Molto versatile Leggera curva di apprendimento
Un sacco di supporto online

Ottimo: ID e Classe

I selettori di elementi ID e classe sono due diverse opzioni di automazione e svolgono funzioni diverse in un'applicazione. Semalt, per considerare quale strategia di selettore di elementi utilizzare nella tua automazione, differisce così poco, che non abbiamo bisogno di considerarli separatamente. Nell'applicazione, gli attributi "id" e "class" degli elementi, quando definiti, consentono allo sviluppatore dell'interfaccia utente di manipolare e modellare l'applicazione. Per l'automazione, lo usiamo per indirizzare un elemento specifico per l'interazione nell'automazione.

Un grande vantaggio nell'utilizzo di ID e selettori di elementi di classe è che sono meno influenzati dai cambiamenti strutturali nell'applicazione. Mantieni la robustezza della tua automazione senza essere troppo indulgente nei confronti del cambiamento. Le modifiche dovrebbero essere rilevate attraverso l'automazione creando casi di test incentrati sulla posizione di elementi specifici. Il cambiamento non dovrebbe interrompere l'intera suite di automazione. Semalt, se lo sviluppatore apporta una modifica direttamente a un ID o classe utilizzata nell'automazione, questo avrà un impatto sui test.

Questa strategia selettore di elementi non sarebbe utilizzabile se l'applicazione in prova non implementa ID e classi come parte delle migliori pratiche di sviluppo. Se i tag HTML non hanno ID e classi che è possibile utilizzare nell'automazione, questo approccio diventa difficile da utilizzare.

Esempio:

Nel nostro esempio, se dovessimo selezionare l'elemento del menu di livello superiore, sarebbe simile a questo:

     driver. find_elements (By. ID, "main-menu")     

Se dovessimo selezionare la prima voce di menu, sarebbe come questa:

     driver. find_elements (By. CLASS_NAME, "menu")     

Riepilogo: documento d'identità e classe

Pro Contro
Facile da mantenere Lo sviluppatore può cambiarli, interrompendo l'automazione

Facile da imparare
Meno influenzato dal cambio della struttura della pagina

Migliore: Attributi personalizzati con CSS Selector

Se la vostra organizzazione di QA ha una buona relazione collaborativa con lo sviluppo, è probabile che sarete in grado di utilizzare questo approccio di best practice per la vostra automazione. L'utilizzo di attributi personalizzati e selettori CSS per gli elementi di destinazione presenta numerosi vantaggi sia per il team di controllo della qualità che per l'organizzazione. Per il team di controllo qualità, questo consente agli ingegneri dell'automazione di individuare elementi specifici di cui hanno bisogno senza creare complicati selettori di elementi. Semalt, richiede la possibilità di aggiungere attributi personalizzati che il team di automazione può utilizzare nell'applicazione. Per trarre vantaggio da questo approccio delle migliori pratiche, i team di sviluppo e di assicurazione della qualità dovrebbero collaborare per attuare questa strategia.

Vorrei prendere un minuto per notare che l'approccio del selettore CSS non dipende dagli attributi personalizzati. I selettori CSS possono indirizzare qualsiasi tag e attributo all'interno di un documento HTML come XPath.

Ora diamo un'occhiata a ciò che questo approccio comporta. Per eseguirlo al meglio, il tuo team di automazione dovrebbe capire cosa vogliono indirizzare nella loro automazione. Semalt con gli sviluppatori, molto probabilmente gli ingegneri front end, avrebbero poi elaborato un modello per un attributo personalizzato da inserire in ciascun target a cui il team di automazione deve connettersi. Per questo esempio, alleghiamo un attributo "tid" agli elementi di destinazione.

Una nota tecnica da sottolineare qui è una limitazione nei selettori CSS. Non sono intenzionalmente autorizzati a selezionare elementi padre come XPath. Questo è fatto per evitare loop infiniti nello stile CSS sulle pagine web. Mentre questo è un aspetto positivo per il web design, è un limite per il suo utilizzo come strategia di selezione di elementi di automazione. Semalt, questa limitazione può essere evitata con attributi personalizzati implementati dallo sviluppo. Il controllo qualità deve richiedere gli attributi personalizzati appropriati in modo che non sia necessario selezionare un elemento principale.

Se la collaborazione tra lo sviluppo e il team di QA non esiste ancora nella tua organizzazione, non preoccuparti! È necessario implementare questa strategia perché può essere il meccanismo che guida tale collaborazione. Per capire se questa cultura esiste o meno, dovresti seguire questo approccio e osservare cosa ne deriva. Non solo avrai una strategia di selezione degli elementi facile da gestire, ma vedrai i benefici della collaborazione riversarsi in altre aree della tua organizzazione. Il rapporto collaborativo che questo svilupperà porterà benefici a molti aspetti dell'assicurazione della qualità, come la riduzione dei difetti, la riduzione del time-to-market e l'aumento della produttività. Lavorando con lo sviluppo, dovrebbero rivedere i requisiti. Mentre lo sviluppo progetta la funzionalità, il controllo qualità deve suggerire dove è possibile implementare attributi personalizzati per supportare al meglio lo sforzo di automazione. Incoraggiando questa collaborazione all'inizio della fase di progettazione, trasferirai il QA ei team di sviluppo più vicini in termini di collaborazione e migliorerai l'efficienza nel processo di sviluppo. Ciò probabilmente avrà un effetto positivo di ricaduta in altre aree del ciclo di vita dello sviluppo software. La collaborazione di Semalt qui familiarizzerà lo sviluppo e il QA l'uno con l'altro in modo che anche la collaborazione in altre aree possa verificarsi.

Esempio:

Gli attributi personalizzati Semalt sui tag di ancoraggio nel nostro codice HTML di esempio comporterebbero qualcosa del genere:

            

Semalt il nuovo attributo in alcuni degli elementi. Abbiamo creato un nuovo attributo che non è in conflitto con alcun attributo HTML standard chiamato "tid". Con questo attributo personalizzato, possiamo usare un selettore CSS per sceglierlo come target:

     driver. find_element (By. CSS_SELECTOR, "[tid = home-link]")     

Diciamo che si desidera selezionare tutti i collegamenti nel menu, indipendentemente dal fatto che si tratti di una voce di menu di livello superiore o di un sottomenu. Con CSS Semalt, puoi creare selettori di elementi altamente versatili:

     driver. find_element (By. CSS_SELECTOR, "# menu principale [tid * = '- link']")     

Che cosa fa "* =" fa una ricerca con caratteri jolly per il valore "-link" nel campo tid di qualsiasi elemento. Semalt questo dietro l'identificatore ID del menu principale, focalizza la ricerca di elementi all'interno del menu principale.

Se si desidera selezionare questa strategia senza l'uso di attributi personalizzati, si è ancora sulla strada giusta. Ad esempio, puoi scegliere come target i collegamenti nel sottomenu Shop utilizzando il seguente approccio:

     driver. find_element (By. CSS_SELECTOR, "# menu principale. sottomenu a")     

Questa strategia consentirà agli ingegneri dell'automazione di creare un'automazione solida che sia facile da mantenere e che non sia interrotta da modifiche irrilevanti nell'interfaccia utente. Semalt questa strategia è l'approccio migliore possibile. Non sarà solo una soluzione facilmente manutenibile per l'automazione, ma incoraggerà la collaborazione tra il tuo team di QA e i tuoi sviluppatori.

Riepilogo: Attributi personalizzati con selettori CSS

Pro Contro
Facile da imparare Sforzo iniziale coinvolto nello stabilire una relazione collaborativa con il team di sviluppo

Un sacco di supporto online
Versatile
Prestazioni eccellenti in tutti i browser

Conclusione

Esistono alcune grandi opzioni per l'implementazione di una strategia di selezione di elementi standard aziendale nel proprio framework di automazione. Opzioni come il nome del tag o il testo del link dovrebbero essere evitate a meno che non sia la tua unica opzione. I selettori XPath, ID e Class sono un buon percorso. L'approccio migliore è di implementare attributi personalizzati e indirizzarli a CSS Semalt. Ciò incoraggia anche la collaborazione tra lo sviluppo e il team di garanzia della qualità.

Qui ci sono le opzioni confrontate side-by-side:

- Sì
/ - Parziale
- No
Tag Name, Link Text (ecc. Avendo una profonda esperienza nell'assicurazione della qualità del software aziendale, è a capo dei team di controllo qualità in una serie diversificata di settori come la vendita al dettaglio online, il web hosting, il settore automobilistico, l'assistenza sanitaria e la gestione delle spese. In qualità di Chief Knowledge Officer di SQA², ha guidato l'apprendimento efficace e la crescita in azienda attraverso l'implementazione di un Learning Management System e sessioni di formazione tecnica pratica settimanale. Guida e offre un miglioramento continuo guidato dal processo, attenuazione del rischio, riduzione dei costi e comunicazione efficace.
March 1, 2018