Sådan undgås kedelige CSS- og XPath-forespørgsler i ende-til-ende og komponenttest

Fem tip til forbedring af dine front-end-tests

Foto af Caleb Jones på Unsplash

Komponenttest og ende-til-ende-test har nogle ting til fælles. Her 'en kort oversigt over de to typer test, vi ser på:

  1. Komponenttest (nogle gange bare kaldet enhedstest) er billige at udvikle og lette at udføre og fejlsøge, fordi de isolerer fejl. Desuden kan de normalt køre uden en browser. Eksempler på rammer: Jest, Mokka.
  2. Ende-til-ende (e2e) tests simulerer virkelige brugerscenarier, som giver dig mulighed for hurtigt at se fejl. Udførelse af disse test tager længere tid, og disse kan være mere komplekse sammenlignet med enhedstest. På den anden side giver ende-til-ende-test en højere gyldighed, som din applikation fungerer som tilsigtet. Eksempler på rammer: Protractor, Selenium.

En af de mest almindelige ting at gøre er at finde et element i DOM og gøre noget med det (f.eks. Klik på det og forvent noget output). Hvis du har arbejdet med JavaScript-baseret vinkel og reaktion før, er du sandsynligvis fortrolig med forespørgsel om DOM-elementer ved hjælp af enten jQuery eller vanilje JavaScript.

De fleste webudviklere skal være noget fortrolige med CSS. Til test eller skrabning er der dog også XPath, der tilbyder nogle interessante funktioner, der ikke er tilgængelige i CSS. Selvom XPath ikke understøttes direkte i JavaScript, kan du bruge det i komponent- og e2e-test såvel som i enhver moderne webbrowser, f.eks. Google Chrome.

Desværre kommer denne kraft ofte med en advarsel:

  • XPath kan gøre alt, hvad CSS kan gøre plus mere: f.eks. Få adgang til overordnet til et element. Dette er undertiden meget værdsat, da XPath understøtter mange pårørende.
  • Denne fordel kan blive til en ulempe - da brug af XPath ofte fører til lange og komplekse forespørgsler, som ikke ville være muligt i CSS

I dette stykke vil jeg se på almindelige problemer med XPath- og CSS-forespørgsler. Derefter undersøger vi nogle måder at undgå disse problemer.

Tip: Browsere som Google Chrome giver dig mulighed for at kopiere og køre CSS- og XPath-forespørgsler i udviklerværktøjerne.

Almindelige problemer, når du bruger XPath til at finde et element

  • XPath-forespørgsler kan hurtigt blive ret store: // tabel [@ id = 'tabel2'] // tr / td [indeholder (@ klasse, 'kontingent')] / a / span vs. # tabel2.
  • XPath-forespørgsler inkluderer ofte for mange hierarkier og betingelser, som gør dem meget skrøbelige og lette at bryde i fremtiden. Eksempel: span [indeholder (@ klasse, 'navn')] /../../../ knap [indeholder (@ klasse, 'lås')].

Almindelige problemer, når du bruger CSS til at finde et element

  • CSS-forespørgsler inkluderer ofte for mange hierarkier og betingelser, som gør dem meget skrøbelige og lette at bryde i fremtiden. Eksempel: .main> sektion: førstebarn .info-sektion a.author + img.
  • CSS har nogle velkendte begrænsninger, som ikke at være i stand til at vælge overordnet til et element

Sådan undgås komplekse XPath- og CSS-forespørgsler

  1. I de fleste enkle tilfælde er CSS-vælgere normalt lettere at forstå.
  2. Ved at reducere hierarkiet i din forespørgsel bliver det mindre skrøbeligt og er det mindre sandsynligt, at det går i stykker, når du ændrer hierarkiet (f.eks. Ved at fjerne et lag).
  3. Med XPath kan du søge efter et overordnet element - hvilket du ikke kan gøre med rene CSS-vælgere. Jeg kan anbefale stamfarvælgeren for at undgå unødigt at krydse DOM for at finde et specifikt overordnet element. Eksempel: // knap [@ attr = 'val'] / stamfar :: div [indeholder (@ klasse, 'post')].
  4. Forespørgsel efter en bestemt streng kan være ret skrøbelig, da tekst ofte kan ændres. Der er stadig brugssager til at finde et element, der indeholder en bestemt streng. Nogle rammer som Protractor har en praktisk måde at finde elementer med CSS og tekst på, som jeg foretrækker frem for XPath.
  5. I stedet for en enkelt lang forespørgsel kan du bruge mindre forespørgsler. Her er et gradskiveeksempel: $ ('min-app. Login-container'). $ ('. Login-knap'). Især for komplekse forespørgsler, vil jeg hellere kæde nogle finde opkald end have en vanskelig at forstå forespørgsel.

Konklusion

Tak for at have læst dette korte stykke. Som du kan se, er der nogle gotchas, når du bruger CSS- eller XPath-forespørgsler til at finde elementer.

Der er dog nogle nemme at følge regler - hjælper os med at skrive forespørgsler, der er lette at læse og mindre tilbøjelige til at bryde.