Testautomatisierung von CSS content

Die CSS-Eigenschaft content erzeugt Inhalte im Browser, die nicht gerendert werden und keine Auswirkungen auf’s DOM haben. Wird im Zusammenhang mit den Pseudo-Elementen ::before und ::after benutzt. Hier ein sehr gut erläuterndes Beispiel. Hier ein Live-Beispiel.

Das DOM schaut im Chrome dann so aus – ::before gibt einen Hinweis darauf, dass an dieser Stelle von der content-Eigenschaft Gebrauch gemacht wird:


Und im Internet Explorer sieht das dann so aus:

 

Selektierung in Selenium

generisch nicht möglich, daher Workaround via JavaScript: http://stackoverflow.com/a/28265738

 

Selektierung in Ranorex

Mittels „ExecuteScript“ kann auch CSS Content einer Website ausgelesen werden.

Sample Page:
https://codepen.io/anon/pen/gWYVZE

Rx User Code:

IFrameTag fr = "/dom[@domain='codepen.io']//iframe[@id~'iFrameKey-.*']";
var script = "return window.getComputedStyle(document.getElementById(\'test\'),':before').getPropertyValue('content')";
var cssContent = fr.ExecuteScript(script);