CSS wird auf allen Webseiten eingesetzt und ist eine sehr wichtige Technologie im täglichen gebrauch eines Webdevelopers. Ein CSS-Selector wird dabei nicht nur bei den CSS Stylesheets verwendet, sondern auch im Javascript und damit auch bei Acceptance Tests mit Codeception. Alle 3 Technologien benutze ich ständig und habe mich natürlich schon öfter gefragt, wie ich am sinnvollsten auf das erste Element einer Klasse zugreife.
CSS Selector Pseudo Klasse :first-child
CSS Pseudo Klassen sind sehr wichtig und gerade im modernen Responsive Webdesign eine wesentliche Erleichterung in unserem Arbeitsalltag. Hier gibt es schon seit langem :first-child.
CSS Selector erstes Element mit Klasse
Das führt auch in unserem Falle direkt ans Ziel und kann zuverlässig für genau diesen Anwendungsfall angewendet werden. Im CSS ist hier ein Anwendungsfall beispielsweise die Hervorhebung des ersten Eintrags in einer List. Also der aktuellste Post soll speziell hervorgehoben werden. Im Javascript wird man hier eher eine Datensatz-ID ansteuern. In Codeception ist es jedoch auch legitim auf das erste Element zu gehen und das zu validieren. Man kann hier natürlich auch alle Elemente betrachten, allerdings wirkt sich das negativ auf die Laufzeit aus und Tests sollen ja bekanntlich möglichst schnell sein.
CSS Selector :nth-of-type(1)
Wesentlich verbreiteter ist der Einsatz von :nth-of-type(1). Dadurch ist es möglich gezielt auf jedes beliebige Element zuzugreifen. Es ist zwar durchaus möglich die Pseudo-Klasse :second-child zu nutzen. Allerdings ist das natürlich nicht so dynamisch und flexibel, wie ein Zugriff über einen Index oder Iterator. Persönlich bevorzuge ich diese Art des Zugriffs, da ich mir hier auch sehr gut PhpStorm Live-Templates zu anlegen kann.
Fazit CSS-Selector
Grundsätzlich führen auch beim Webdevelopment viele Wege ans Ziel und es ist wichtig sich im Team auf Standards zu einigen, damit man den Code schneller erfassen kann und es keine Ablenkungen gibt. Aus diesem Blickwinkel der Software-Qualität ist es also in meinen Augen sinnvoller mit :nth-of-type auf ein DOM-Element zuzugreifen.
Codeception automatisierte Tests für Webdesign
Wir erstellen automatisierte Tests mit Codeception und Build-Pipelines für bestehende Projekte. Hier geht es zu unserem Angebot.
