When it comes to individual checks in Leankoala, the "CSS Selector Check" is one of our most powerful tools and is therefore the most frequently used. It is always used when the presence of elements in the rendered HTML (DOM) is to be checked in HTML documents. The page is retrieved with a headless chrome and can therefore be checked for elements that are only added by JavaScript during runtime. In this way, the check is also suitable for Web pages created with Angular, React, or vue.js.
Tests with the "CSS Selector Check" are executed once per hour or when the Leankoala Deployment Hook is addressed.
Examples
Check for existing headers
CSS selectors can be very simple. For example, if you want to check for the presence of an HTML5 header element, you just have to search for the CSS selector "header".
Check for existing main menu
In some cases it is important to check whether certain elements exist in the right context. For example, it can be useful to check whether a main menu is present in the header. The easiest way would be to assign an HTML ID (<div id="haupmenu">) to the main menu. The appropriate CSS selector would be named "header #mainmenu". If you don't have the possibility to assign an ID, you can also simply describe the element generically. In most cases a main menu would be built from an unsorted HTML list. The CSS path to be checked would look like this: "header ul li". Now it is checked whether a list with at least one element in the header occurs.