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);

Key-Findings der Selenium Conference 2017 in Austin, Texas

Selenium ist von der nerdigen Nische, aus der es kam, spätestens seit der Selenium Conference 2017 in Austin, Texas mit 500 Teilnehmern aus der ganzen Welt im professionellen Mainstream angekommen. Hier die Video-Liste aller Speaker. Dies sieht man auch am offiziellen Hauptsponsor HP, der in der Anfangsphase des Selenium-Projekts noch das Lieblingsobjekt von Hohn und Spott war – hauptsächlich wegen seines Testautomatisierungsproduktes QTP (inzwischen UFT).
Simon Stewart, Erfinder von Selenium und dessen Core-Committer, links bei seiner brillanten Keynote. …

…links unten bei einem netten Plausch mit mir am Rande der Konferenz.

Alexei Vinogradov, Testautomatisierungs-Freelancer aus Deutschland stellte in seinem humorvollen Talk Selenide vor, ein Wrapper für Selenium, welches dessen Schwachstellen (v.a. implicit waits) ausgleicht und eine übersichtlichere Syntax zum Testautomatiseren bietet.
Zahlreiche Anbieter waren auf der Konferenz mit Ständen vertreten, von denen neben SauceLabs v.a. MicroFocus interessant war. Mit dem kostenlosen Silk WebDriver hat das Unternehmen ein Tool gebaut, welches Deine Aktionen auf dem Browser recorded und in Java-Selenium-Code verwandelt.
Jim Evans betonte in seiner Keynote ‚being an effective change agent‘, dass das Selenium-Projekt grundsätzlich nach dem Motto handelt: ‚Code wins‘, was bedeutet, dass diejenigen, die aktiv mitwirken und Code committen, auch die meisten Entscheidungen treffen dürfen. Ein Prinzip, das sicherlich auch in anderen Projekten sinnvoll eingesetzt weden kann. Er unterstrich, dass ab einer bestimmten Größe der Aufgabe nur Kollaboration eine funktionierende Lösung hervorbringen kann. So seien inzwischen alle Browserhersteller (Microsoft, Firefox, Google und Apple) am Selenium-Projekt beteiligt und entwickeln die jeweiligen Browserdriver.
Yosef Durr von Microsoft stellte eine sehr interessante Entwicklung in einem gemeinsamen Vortrag vor, nämlich WinAppDriver. Dies ist ein Driver, mit dem man per WebDriver-Protokoll Desktop-Applikationen auf Windows testautomatisieren kann. Der WinAppDriver ist kostenlos und labelt noch als beta, funktioniert aber schon jetzt, wenn auch nur auf Windows 10.
Meredith Bayne: „I have not failed. I’ve just found 10,000 ways that won’t work“ (Thomas Edison). Sie rät von der Verwendung von XPath komplett ab und empfiehlt ausschließlich CSS-Selektoren in Selenium zu verwenden. Auch wegen der höheren Performance, aber v.a. weil XPath unnötig kompliziert sei. Ihr wurde das klar, nachdem sie einem Frontend-Entwickler die Selenium-Automatisierung mit XPath beibringen wollte. CSS-Selektoren kannte er hingegen aus seinem Arbeitsalltag bereits aus dem Effeff.
Denali Lumma, Security Manager bei Uber äußerte in ihrer Keynote den Wunsch, dass sich die Bereiche Quality und Security stärker vernetzen sollten. Ihrer Meinung nach habe Security ein höheres Budget und eine stärkere Machtposition in Unternehmen als Quality. Sie wies gegen Ende noch auf ein sehr interessantes Tool namens BDD Security hin, mit welchem automatisierte Sicherheitstests auf einer Website mittels Selenium durchführt und in die Continuous Integration eingebaut werden können.

Wer sich eingehender mit Lasttests beschäftigen möchte, dem sei der Vortrag von Christina Thalayasingam empfohlen, bei der sie die Tool-Combo: JMeter, Selenium, Selenium Grid, Jenkins zum CI-integriertern UI-Loadtesting vorstellt.

Adam Goucher stellte in seinem Vortrag die steile Prognose auf, dass so wie inzwischen alle Testautomatisierer Programmierer seien, in fünf Jahren sich jeder Testautomatisierer mit AWS auskennen werden müsse.

Matthew Edelman von Paypal erzählte, dass das Unternehmen ein sogenanntes Open-Source-Office eingerichtet hat, welches die Softwareentwickler im Haus dabei unterstützt, die Paypal-eigene Software zu open-sourcen. Sicherlich auch ein Recruiting-Ansatz, der dabei hilft, die besten Softwareentwickler zum Arbeitgeber Paypal zu locken oder dort zu halten.

Header Image selbst erstellen

Eine Möglichkeit, ein modernes und hübsches Header Image zu erstellen, ist es, ein geeignetes Foto auszuwählen, zurecht zu schneiden und den Domainnamen und einen Slogan als Text über dieses Foto zu legen. Exemplarisch an meinem aktuellen Nischenseiten-Projekt für Waffenkoffer möchte ich das in diesem Artikel zeigen.

Natürlich sollte man gerade für das Header Image ein Foto wählen, welches keine Nennung des Urhebers erfordert, am besten verwendet man also ein Foto aus der Fotodatenbank Pixabay. Dieses sollte thematisch passen – man findet jedoch dort kaum Fotos mit den notwendigen Header-Abmessungen. Diese werden i.d.R. vom WordPress-Theme empfohlen und finden sich als Ratschlag dort, wo man auch das Header Image wählen kann. Also muss man ein Foto wählen, welches auch nach dem Zuschneiden noch ein interessantes Foto ergibt und davon die größte Auflösung downloaden (erfordert Anmeldung bei Pixabay).

Beispiel des Rohbildes:

Paint sollte man nicht benutzen, weil die Schrift nicht separat gespeichert und irgendwann wieder editiert werden kann, sondern mit dem Bild verschmilzt. Daher nimm für die Headerbild-Gestaltung das Online-Designtool canva.com. Wähle hier „Benutzerdefinierte Abmessungen verwenden“. Dann schau im WordPress-Theme nach (Appearance -> Customize -> Header-Image (o.Ä.)), wie groß das Bild sein sollte und gib diese Abmessungen bei canva.com ein. Lade das Rohbild hoch. Dann zieht man das Bild so lange in die passende Größe, bis der Bildausschnitt optisch ansprechend ist.

Beispiel nach dem Zuschneiden:

Jetzt braucht es noch die Schrift in der passenden Größe, Schriftart und Farbe. Ich wähle die Domain selbst und einen Slogan als Text. Die Farbe stimmt man mit den dominanten Elementen auf dem Bild ab – hier die Patronenhülse. Mit

Mit Just Color Picker kann man die Farbe der Patrone als Hexwert(!) bestimmen. Das muss man ein bisschen try&error-mäßig machen, weil sich selbst benachbarte Pixel in der Farbe unterscheiden. Danach gibt man den Farbwert in einen Online-Colormatcher ein, um die dazu passenden Farben herauszufinden.

In meinem Beispiel passt zu (8d6c36) am besten (DBA753)

Das Ergebnis kann sich sehen lassen:

Anpacken!