Wenn es um individuelle Checks in Leankoala geht, ist der "CSS Selector Check" eines unserer mächtigsten Werkzeuge und wird somit auch am Häufigsten eingesetzt. Er kommt immer dann zum Einsatz, wenn in HTML-Dokumenten das Vorhandensein von Elementen im gerenderten HTML (DOM) geprüft werden soll. Die Seite wird mit einem Headless Chrome abgerufen und kann somit problemlos auf Elemente geprüft werden, die erst während der Laufzeit durch JavaScript hinzugefügt werden. Auf diese Weise eignet sich der Check auch für Webseiten, die mit Angular, React oder vue.js erstellt werden.
Tests mit dem "CSS Selector Check" werden einmal pro Stunde ausgeführt bzw. wenn der Leankoala Deployment Hook angesprochen wird.
Beispiele
Überprüfen auf vorhandenen Header
CSS Selectors können sehr einfach sein. Falls zum Beispiel auf das Vorhandensein eines HTML5 Header-Elements geprüft werden soll, muss lediglich nach dem CSS Selector "header" gesucht werden.
Überprüfen auf vorhandenes Hauptmenü
In einigen Fällen ist es wichtig zu prüfen, ob bestimmte Elemente im richtigen Kontext existieren. So kann es sinnvoll sein zu prüfen, ob ein Hauptmenü im Header vorhanden ist. Am Einfachsten wäre es das Hauptmenü mit einer HTML ID (<div id="haupmenu">) zu belegen. Der passende CSS Selector würde "header #hauptmenu" heißen. Sollte man nicht die Möglichkeit haben eine ID zu vergeben, kann man auch einfach das Element generisch beschreiben. In den meißten Fällen würde ein Hauptmenü aus einer unsortieren HTML-Liste gebaut werden. So würde der zu überprüfende CSS Pfad wie folgt aussehen: "header ul li". Jetzt wird geprüft, ob eine Liste mit mindestens einem Element im Header vorkommt.