{"id":2393,"date":"2017-08-31T17:00:30","date_gmt":"2017-08-31T15:00:30","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=2393"},"modified":"2026-02-02T10:10:46","modified_gmt":"2026-02-02T09:10:46","slug":"backstopjs","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/","title":{"rendered":"BackstopJS: Vergleich von Webseiten-Screenshots"},"content":{"rendered":"<p>BackstopJS ist eine Software, welche es erm\u00f6glicht \u00c4nderungen von Webseiten anhand von Screenshots zu ermitteln. Nehmen wir zuerst ein Beispiel aus der Praxis.<\/p>\n<p>Sie haben eine TYPO3-Aktualisierung von Version 6.2 auf 8.7 durchgef\u00fchrt. Dabei soll sich die Webseite an sich nicht \u00e4ndern. Lediglich das System hinter der Webseite \u00e4ndert sich. Die Ausgabe muss identisch bleiben.<\/p>\n<p>Nun kann der Entwickler die wichtigsten Seiten in zwei Browser-Fenstern \u00f6ffnen und miteinander vergleichen. Das gestaltet sich jedoch als recht m\u00fchselig, besonders wenn es sich um eine <a href=\"https:\/\/www.clickstorm.de\/blog\/alles-responsive\/\" target=\"_blank\" rel=\"noopener\">responsive<\/a> Webseite handelt. Hier m\u00fcssten Sie die unterschiedlichen Browser-Gr\u00f6\u00dfen zus\u00e4tzlich untersuchen. Wesentlich schneller geht das mit BackstopJS.<\/p>\n<h2>Was ist BackstopJS?<\/h2>\n<p>BackstopJS ist ein Node.js-Modul, welches dazu dient visuelle Merkmale von Webseiten und Applikationen zu vergleichen. In der Fachsprache werden diese Tests <strong>visuelle Regressions-Tests<\/strong> genannt.<\/p>\n<p>Wesentliche Merkmale der Software sind:<\/p>\n<ul>\n<li>Rendern der Webseite via\u00a0<strong>Chrome Headless<\/strong>,\u00a0<a href=\"http:\/\/phantomjs.org\/\" target=\"_blank\" rel=\"noopener\"><strong>PhantomJS<\/strong><\/a>\u00a0oder\u00a0<a href=\"https:\/\/github.com\/laurentj\/slimerjs\" target=\"_blank\" rel=\"noopener\"><strong>SlimerJS<\/strong><\/a><\/li>\n<li>Nutzeraktionen k\u00f6nnen via <a href=\"https:\/\/github.com\/OnetapInc\/chromy\" target=\"_blank\" rel=\"noopener\"><strong>ChromyJS<\/strong><\/a> oder <a href=\"http:\/\/casperjs.org\/\"><strong>CasperJS<\/strong><\/a> simuliert werden<\/li>\n<li>Ergebnisse k\u00f6nnen direkt im Browser oder der Kommandozeile (CLI) angesehen werden<\/li>\n<li>kann global oder auch lokal je Projekt verwendet werden<\/li>\n<li>Einfache Handhabung<\/li>\n<\/ul>\n<h2>Installation von BackstopJS<\/h2>\n<p>Wie bereits erw\u00e4hnt ist BackstopJS ein <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">Node.js<\/a>-Modul. Das bedeutet, dass f\u00fcr die Installation von BackstopJS zun\u00e4chst Node.js installiert sein muss. Aber auch diese <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\">Installation<\/a> ist sehr einfach. F\u00fcr Windows steht Beispielsweise eine setup.exe zur Verf\u00fcgung, welche lediglich ausgef\u00fchrt werden muss.<\/p>\n<p>Nach der Installation von node.js k\u00f6nnen Sie den bereits mitgelieferten\u00a0<em>Node Paket Manager<\/em> (<a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">npm<\/a>) nutzen, um BackstopJS zu installieren. \u00d6ffnen Sie hierf\u00fcr Ihre Kommandozeile und f\u00fchren Sie den folgenden Befehl aus:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">npm\u00a0install\u00a0backstopjs -g<\/pre>\n<p>&nbsp;<\/p>\n<p>Die Konsole zeigt Ihnen an, wenn die Installation erfolgreich war. Der Parameter -g sorgt daf\u00fcr, dass das Modul global installiert. Dadurch k\u00f6nnen Sie das Modul in jedem beliebigen Ordner ausf\u00fchren.<\/p>\n<p>Diese zwei Schritte reichen aus, um BackstopJS zu installieren. Nun k\u00f6nnen wir mit den ersten Tests fortfahren.<\/p>\n<h2>Testen und Vergleichen von Screenshots<\/h2>\n<h3>Konfiguration via backstop.json<\/h3>\n<p>Um einen Test durchf\u00fchren zu k\u00f6nnen, legen Sie einen neuen Ordner an. In diesem Ordner erstellen Sie eine neue Datei mit dem Namen <em>backstop.json<\/em>. In ihr nehmen Sie die Konfigurationen f\u00fcr Ihren Test vor. F\u00fcr den Einstieg haben wir Ihnen hier mal einen Beispielinhalt zusammengetragen.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\r\n \"id\": \"rev_clickstorm\",\r\n \"viewports\": [\r\n {\r\n \"name\": \"phone\",\r\n \"width\": 320,\r\n \"height\": 480\r\n },\r\n {\r\n \"name\": \"tablet_v\",\r\n \"width\": 568,\r\n \"height\": 1024\r\n },\r\n {\r\n \"name\": \"tablet_h\",\r\n \"width\": 1024,\r\n \"height\": 768\r\n }\r\n ],\r\n \"scenarios\": [\r\n {\r\n \"label\": \"clickstorm\",\r\n \"url\": \"http:\/\/my-test-domain.local\/\",\r\n \"referenceUrl\": \"https:\/\/www.clickstorm.de\/\"\r\n }\r\n ],\r\n \"paths\": {\r\n \"bitmaps_reference\": \"bitmaps_reference\",\r\n \"bitmaps_test\": \"bitmaps_test\",\r\n \"engine_scripts\": \"engine_scripts\",\r\n \"html_report\": \"html_report\",\r\n \"ci_report\": \"ci_report\"\r\n },\r\n \"casperFlags\": [],\r\n \"engine\": \"phantomjs\",\r\n \"report\": [\"browser\"],\r\n \"debug\": false\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Kurz zur Erkl\u00e4rung. In dem ersten Teil legen wir die verschiedenen Gr\u00f6\u00dfen der Browser-Fenster fest. Diese k\u00f6nnen je nach Projekt variieren. Im Anschluss definieren wir die Szenarien. Hier sind die URLs anzugeben, welche untersucht werden sollen.<\/p>\n<p>Als Besonderheit haben wir hier eine Referenz-URL eingetragen. Dies ist ein lokaler Entwicklungsstand, welcher mit der Online-Version verglichen werden soll.<\/p>\n<p>Anschlie\u00dfend wird definiert, wo die Ergebnisse gespeichert werden sollen. Die Ordner werden von BackstopJS automatisch angelegt.<\/p>\n<p>Zum Schluss definieren wir noch, was als Engine PhantomJS genutzt werden soll. Mit der Chrome Headless Version hatten wir derzeit noch Probleme. PhantomJS k\u00f6nnen Sie auch ganz einfach via npm installieren.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">npm install phantomjs -g<\/pre>\n<p>&nbsp;<\/p>\n<p>Wenn Sie in einem Ordner noch keine Konfigurationsdatei angelegt haben, k\u00f6nnen Sie dies auch von BackstopJS erstellen lassen. Nutzen Sie daf\u00fcr die Kommandozeile und f\u00fchren Sie\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">backstop init<\/code> aus. Nun finden Sie in dem Ordner eine backstop.json mit Beispielinhalten.<\/p>\n<p>Ist die backstop.json angelegt, kann mit Testen begonnen werden.<\/p>\n<h3>\u00a0BackstopJS Tests durchf\u00fchren<\/h3>\n<p>Das Testen k\u00f6nnte einfacher nicht sein. Geben Sie in Ihre Kommandozeile diesen Befehl ein:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">backstop test<\/pre>\n<p>Wenn Sie unsere backstop.json als Grundlage nutzen, \u00f6ffnet sich nach der Durchf\u00fchrung automatisch ein Browser-Fenster. Hier sehen Sie nun die Ergebnisse des Tests. Da dies unser erster Durchgang war, ist ein Vergleich nicht m\u00f6glich. Nehmen Sie eine \u00c4nderung an der Webseite vor und f\u00fchren Sie den Befehl erneut aus. Nun sollten Sie die Unterschiede erkennen k\u00f6nnen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-2406\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs-1024x555.jpg\" alt=\"Ergebnissansicht von Backstop.js mit 3 Screenshots der mobilen clickstorm.de-Seite, Unteschiede im 3. Screenshot dargestellt\" width=\"1024\" height=\"555\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs-1024x555.jpg 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs-300x163.jpg 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs-768x416.jpg 768w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs.jpg 1246w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Die Unterschiede werden im 3. Screenshot farbig hervorgehoben. Scrollen Sie weiter runter, um alle Szenarien und Browsergr\u00f6\u00dfen zu sehen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-2407\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs-desktop-1024x418.jpg\" alt=\"Ergebnissansicht von Backstop.js mit 3 Screenshots der clickstorm.de-Seite in Desktop-Gr\u00f6\u00dfe, Unteschiede im 3. Screenshot dargestellt\" width=\"1024\" height=\"418\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs-desktop-1024x418.jpg 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs-desktop-300x123.jpg 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs-desktop-768x314.jpg 768w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/report-backstopjs-desktop.jpg 1241w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Um die Referenz-URL in unserer backstop.json als Grundlage f\u00fcr den Vergleich zu nutzen, f\u00fchren wir vor dem Testen den folgenden Befehl aus:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">backstop reference<\/pre>\n<p>Beim erneuten Aufruf von <code class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">backstop test<\/code> wird nun nicht mit der vorigen Version verglichen, sondern mit der angegebenen Referenz.<\/p>\n<h3>Ausblick<\/h3>\n<p>Dieses Tutorial sollte Ihnen lediglich den Einstieg in BackstopJS erm\u00f6glichen. Mit der Software ist wesentlich mehr m\u00f6glich, u.a. automatisierte Tests oder simulierte Nutzerinteraktionen via JavaScript. Ein weiteres Tool, welches automatisiert die Performance einer Webseite messen kann, ist blackfire.io. Auch hierzu haben wir einen <a href=\"https:\/\/www.clickstorm.de\/blog\/blackfire-io-bessere-performance-php\/\">Blog-Beitrag<\/a> verfasst.<\/p>\n<p>Haben Sie selbst bereits Erfahrungen mit BackstopJS oder einer \u00e4hnlichen Software gemacht? Teilen Sie uns diese gerne in unseren Kommentaren mit oder nehmen Sie <a href=\"https:\/\/www.clickstorm.de\/kontakt\/\" target=\"_blank\" rel=\"noopener\">Kontakt<\/a> zu uns auf.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Finden Sie die Unterschiede<\/p>\n","protected":false},"author":7,"featured_media":2404,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[138],"tags":[80,92,126,45,13,26,19,195],"class_list":["post-2393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools","tag-browser","tag-css","tag-deployment","tag-entwicklung","tag-pruefung","tag-responsive","tag-technik","tag-testen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>BackstopJS: Vergleich von Webseiten-Screenshots - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Automatische visuelle Regressionstests mit BackstopJS einfach realisieren. Entdecken Sie \u00c4nderungen Ihrer respsonsiven Webseite anhand von Screenshots.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/backstopjs\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BackstopJS: Vergleich von Webseiten-Screenshots - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Automatische visuelle Regressionstests mit BackstopJS einfach realisieren. Entdecken Sie \u00c4nderungen Ihrer respsonsiven Webseite anhand von Screenshots.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/backstopjs\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-31T15:00:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-02T09:10:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/backstopjs-clickstorm.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"433\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/\"},\"author\":{\"name\":\"Marc\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/594fb824a2f049d33b2a1b4406bfc86b\"},\"headline\":\"BackstopJS: Vergleich von Webseiten-Screenshots\",\"datePublished\":\"2017-08-31T15:00:30+00:00\",\"dateModified\":\"2026-02-02T09:10:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/\"},\"wordCount\":761,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/backstopjs-clickstorm.jpg\",\"keywords\":[\"Browser\",\"CSS\",\"Deployment\",\"Entwicklung\",\"Pr\u00fcfung\",\"Responsive\",\"Technik\",\"Testen\"],\"articleSection\":[\"Tools\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/\",\"name\":\"BackstopJS: Vergleich von Webseiten-Screenshots - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/backstopjs-clickstorm.jpg\",\"datePublished\":\"2017-08-31T15:00:30+00:00\",\"dateModified\":\"2026-02-02T09:10:46+00:00\",\"description\":\"Automatische visuelle Regressionstests mit BackstopJS einfach realisieren. Entdecken Sie \u00c4nderungen Ihrer respsonsiven Webseite anhand von Screenshots.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/backstopjs-clickstorm.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/backstopjs-clickstorm.jpg\",\"width\":1170,\"height\":433,\"caption\":\"Ergebniss von BackstopJS bei clickstorm.de\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/backstopjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"BackstopJS: Vergleich von Webseiten-Screenshots\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/594fb824a2f049d33b2a1b4406bfc86b\",\"name\":\"Marc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"caption\":\"Marc\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/marc\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"BackstopJS: Vergleich von Webseiten-Screenshots - clickstorm Blog","description":"Automatische visuelle Regressionstests mit BackstopJS einfach realisieren. Entdecken Sie \u00c4nderungen Ihrer respsonsiven Webseite anhand von Screenshots.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/","og_locale":"de_DE","og_type":"article","og_title":"BackstopJS: Vergleich von Webseiten-Screenshots - clickstorm Blog","og_description":"Automatische visuelle Regressionstests mit BackstopJS einfach realisieren. Entdecken Sie \u00c4nderungen Ihrer respsonsiven Webseite anhand von Screenshots.","og_url":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2017-08-31T15:00:30+00:00","article_modified_time":"2026-02-02T09:10:46+00:00","og_image":[{"width":1170,"height":433,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/backstopjs-clickstorm.jpg","type":"image\/jpeg"}],"author":"Marc","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Marc","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/"},"author":{"name":"Marc","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/594fb824a2f049d33b2a1b4406bfc86b"},"headline":"BackstopJS: Vergleich von Webseiten-Screenshots","datePublished":"2017-08-31T15:00:30+00:00","dateModified":"2026-02-02T09:10:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/"},"wordCount":761,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/backstopjs-clickstorm.jpg","keywords":["Browser","CSS","Deployment","Entwicklung","Pr\u00fcfung","Responsive","Technik","Testen"],"articleSection":["Tools"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/backstopjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/","url":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/","name":"BackstopJS: Vergleich von Webseiten-Screenshots - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/backstopjs-clickstorm.jpg","datePublished":"2017-08-31T15:00:30+00:00","dateModified":"2026-02-02T09:10:46+00:00","description":"Automatische visuelle Regressionstests mit BackstopJS einfach realisieren. Entdecken Sie \u00c4nderungen Ihrer respsonsiven Webseite anhand von Screenshots.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/backstopjs\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/backstopjs-clickstorm.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/08\/backstopjs-clickstorm.jpg","width":1170,"height":433,"caption":"Ergebniss von BackstopJS bei clickstorm.de"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/backstopjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"BackstopJS: Vergleich von Webseiten-Screenshots"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/594fb824a2f049d33b2a1b4406bfc86b","name":"Marc","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","caption":"Marc"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/marc\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=2393"}],"version-history":[{"count":10,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2393\/revisions"}],"predecessor-version":[{"id":4798,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2393\/revisions\/4798"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/2404"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=2393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=2393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=2393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}