Wie wir einen Screenshot ohne Screenshots gebaut haben
Manches Feedback lässt sich leichter zeigen als beschreiben. Aktivieren Sie die Elementauswahl für eine Umfrage, und ein Besucher kann auf einen bestimmten Teil Ihrer Seite zeigen — eine Schaltfläche, eine Überschrift, ein Formularfeld — statt zu schreiben „die blaue Schaltfläche oben“. In der Antwortdetailansicht erhalten Sie ein sauberes, vollständig gestyltes Bild genau dieses Elements, neben einem ganzseitigen Schnappschuss, auf dem es hervorgehoben ist.
Das umzusetzen bedeutete, Seiten zu rendern, die uns nicht gehören, auf Domains, die wir nicht kontrollieren, innerhalb einer echten Browser-Engine — und einen korrekt gestylten Ausschnitt eines Elements aus diesen Seiten zurückzugeben. Die erste Version versuchte den naheliegenden Weg: das eigene Markup des angeklickten Elements erfassen und nur dieses Stück für sich rendern. Das sah in jedem von uns geschriebenen Test korrekt aus, weil in jedem Test das Element mit Inline-Styles gestylt war. Sobald eine Schaltfläche auf einer echten Seite ihr Aussehen über eine Klasse aus einem externen Stylesheet bekam, kam der Ausschnitt flach und ungestylt zurück. Ein isoliertes Fragment hat keinen Seiten-Head, von dem aus ein Stylesheet verlinkt werden könnte, keinen Style-Block, keine CSS-Variablen, auf die diese Klasse zurückgreifen könnte — nichts war kaputt, es gab dort einfach nichts, worauf die Styles hätten angewendet werden können.
Die Lösung bestand darin, die gesamte Seite zu rendern statt nur das Element allein. Die Auswahl markiert das angeklickte Element bereits im Moment der Auswahl, also rendern wir die gesamte erfasste Seite des Besuchers auf einmal, mit ihren echten Stylesheets und ihrem echten Layout, und nehmen zwei Screenshots von derselben geladenen Seite: die ganze Seite und einen engen Ausschnitt nur des markierten Elements. Ein einziges Laden der Seite im Browser liefert jetzt beide Bilder — das ist zudem weniger Aufwand als die zwei separaten Renderings, die der alte Ansatz benötigte.
Nichts davon ändert, was Besucher erleben — sie klicken weiterhin einfach auf den Teil der Seite, den sie meinen. Verändert hat sich, was danach passiert: ein echtes, korrekt gestyltes Bild genau dieses Teils, statt einer aus einer Textbeschreibung rekonstruierten Vermutung.