{"id":731,"date":"2016-07-05T08:06:06","date_gmt":"2016-07-05T06:06:06","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=731"},"modified":"2016-08-09T17:29:46","modified_gmt":"2016-08-09T15:29:46","slug":"browser-testing","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/browser-testing\/","title":{"rendered":"Die Basics von modernem Browser-Testing + kostenloser Checkliste"},"content":{"rendered":"<p>Vor ungef\u00e4hr zwei Jahren haben wir einen Artikel publiziert, wie man mit Browser-Testing in weniger als zwei Stunden loslegen kann.<\/p>\n<p>Seitdem hat sich viel ge\u00e4ndert. Neue Browser sind auf den Markt gekommen und sie sind weitaus leistungsf\u00e4higer.<\/p>\n<p>Heute will ich daher nochmal in einem Update erkl\u00e4ren, was man wissen muss, wenn es um modernes Browser-Testing geht. Los geht\u2019s!<\/p>\n<p><!--more--><\/p>\n<h2>Was ist modernes Browser-Testing?<\/h2>\n<p>Browser Testing ist bekannt unter verschiedenen Namen. Manche Leute sprechen von <i>browser compatibility testing<\/i> andere von <i>cross browser testing<\/i>.<\/p>\n<p><b><i>Das Hauptziel beim Browser-Testing ist es, sicher zu stellen, dass eine Website oder Anwendung in jedem Browser funktioniert. \u00a0<\/i><\/b><\/p>\n<p>Um also wirklich effektives Browser-Testing vorzunehmen, gilt es Kompatibilit\u00e4ten zu beachten.<\/p>\n<h2>Arten des Kompatibilit\u00e4ts-Testens<\/h2>\n<p>Es gibt verschiedene Kompatibilit\u00e4ts-Tests. Diese beeinhalten:<\/p>\n<ul>\n<li>Hardware Tests<\/li>\n<li>OS Tests<\/li>\n<li>Device Tests<\/li>\n<li>Browser Tests<\/li>\n<\/ul>\n<h2>Automatisiertes vs manuelles Browser Testing<\/h2>\n<p>Wenn Sie mit Browser-Testing loslegen, fragen Sie sich vielleicht, ob Sie einen automatisierten oder einen manuellen Prozess w\u00e4hlen sollten.<\/p>\n<p>Sie m\u00fcssen entscheiden, ob Sie Browser Testing mit menschlicher Intervention oder ohne menschliche Intervention (= automatisiertes Testing) durchf\u00fchren wollen.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-743\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/automated-manual-browser-testing.png\" alt=\"automated-manual-browser-testing\" width=\"499\" height=\"375\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/automated-manual-browser-testing.png 799w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/automated-manual-browser-testing-300x226.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/automated-manual-browser-testing-140x105.png 140w\" sizes=\"(max-width: 499px) 100vw, 499px\" \/><\/p>\n<p>Um diese Entscheidung zu vereinfachen, empfehle ich Ihnen <a href=\"http:\/\/usersnap.com\/blog\/bug-reporting-workflow\/\"  >diesen Artikel<\/a>.<\/p>\n<h2>Browser Testing Plan<\/h2>\n<p>Sie sollten nicht einfach einen neuen Prototyp, Ihre Website oder Webanwendung in verschiedenen Browsern testen. Sie sollten dies ganz gezielt verfolgen und daf\u00fcr einen Plan haben.<\/p>\n<p>Wenn Sie noch ganz am Anfang sind, dann k\u00f6nnen Ihnen diese Fragen weiterhelfen:<\/p>\n<ul>\n<li>Welche Browser-Versionen werden von Ihrer Zielgruppe verwendet?<\/li>\n<li>K\u00f6nnen Sie die Funktionalit\u00e4t auf all diesen Browser-Versionen sicher stellen?<\/li>\n<li>Welche Devices \/ Hardware brauchen Sie, um diese Browser-Tests durchzuf\u00fchren?<\/li>\n<\/ul>\n<p>Beantworten Sie diese Fragen und notieren Sie die Antworten in einem speziellen Dokument.<\/p>\n<h2>Browser Tests durchf\u00fchren<\/h2>\n<p>Wenn Sie Browser-Tests mit den vordefinierten Spezifikationen durchf\u00fchren, sollten Sie folgende Dinge beachten:<\/p>\n<ul>\n<li>den Content<\/li>\n<li>das Layout<\/li>\n<li>die Funktionalit\u00e4t<\/li>\n<li>sowie weitere Spezifikationen<\/li>\n<\/ul>\n<h3>1. Content<\/h3>\n<p>Wenn Sie Ihre Webanwendung oder Website in verschiedenen Browsern testen, m\u00fcssen Sie sicherstellen, dass Ihr Content (Text, Bilder, Videos, Audio) sich so verh\u00e4lt wie erwartet wird. Dabei k\u00f6nnen folgende Fragen helfen:<\/p>\n<ul>\n<li>Sind alle Bilder verf\u00fcgbar f\u00fcr alle Browser?<\/li>\n<li>Sind die Schriftarten f\u00fcr alle Browser-Versionen darstellbar?<\/li>\n<li>Sind die Audio-Dateien verf\u00fcgbar f\u00fcr alle Browser?<\/li>\n<li>Kann der Content auf jedem Browser angesehen werden?<\/li>\n<\/ul>\n<h3>2. Layout<\/h3>\n<p>Mit verschiedenen Browser-Versionen, die verf\u00fcgbar sind, sind die Chancen hoch, dass bestimmte Layout-Elemente sich nicht wie erwartet verhaltet. Beantworten Sie daher die folgenden Fragen.<\/p>\n<ul>\n<li>Ist das Layout konsistent?<\/li>\n<li>Verhalten sich alle Layout-Elemente wie erwartet?<\/li>\n<li>Funktioniert das (responsive) Layout in allen Browser-Versionen?<\/li>\n<li>Laufen die Animationen und Effekte so wie sie sollten?<b><br \/>\n<\/b><\/li>\n<\/ul>\n<h3>3. Funktionalit\u00e4t<\/h3>\n<p>Die Features und Funktionalit\u00e4t Ihrer Website oder Webanwendung sind vermutlich die wichtigsten Dinge, die Sie testen sollten. Hier sind einige Fragen f\u00fcr diesen Prozess:<\/p>\n<ul>\n<li>Sind alle Features in den anvisierten Browser-Versionen benutzbar?<\/li>\n<li>Funktionieren alle Integrationen und Anwendungen von Drittanbietern?<\/li>\n<li>Funktionieren alle Interaktionen gleich gut mit Touch Input (z. B. von einem Mobile Device oder Mouse Input)<\/li>\n<\/ul>\n<h2>Browser Testing Checklist<\/h2>\n<p>All diese Kriterien m\u00fcssen in einem Browser-Test \u00fcberpr\u00fcft werden. Um die Sache zu vereinfachen, haben wir f\u00fcr Sie diese <a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1cVWP19y7YKtGlMKgWbPkTdzmMJICLTtFb_g5UrC-dMA\/edit?usp=sharing\"  target=\"_blank\"  >Checkliste<\/a> zusammengestellt.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-734\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-testing-checklist.png\" alt=\"browser-testing-checklist\" width=\"589\" height=\"179\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-testing-checklist.png 689w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-testing-checklist-300x91.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-testing-checklist-140x42.png 140w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/p>\n<h2>Die Browser Testing Tools<\/h2>\n<p>Wenn es darum geht, das beste Browser Testing Tool zu finden, ist es gut den eigenen Workflow zu kennen.<\/p>\n<p>Dann k\u00f6nnen Sie entscheiden, welche der beiden Herangehensweisen f\u00fcr Browser Testing am besten zu Ihnen passt. Die beiden Herangehensweisen sind:<\/p>\n<ol>\n<li>Sie simulieren definierte Browser-Versionen<\/li>\n<li>Sie haben alle Browser-Versionen lokal verf\u00fcgbar<\/li>\n<\/ol>\n<h3>1. SauceLabs<\/h3>\n<p>Sauce Labs ist eine der f\u00fchrenden Browser Testing Suites, die sowohl automatisiertes wie auch manuelles Testing anbietet.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-741\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/saucelabs-browser-testing.png\" alt=\"saucelabs-browser-testing\" width=\"510\" height=\"319\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/saucelabs-browser-testing.png 1110w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/saucelabs-browser-testing-300x188.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/saucelabs-browser-testing-1024x641.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/saucelabs-browser-testing-140x88.png 140w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/p>\n<p><a href=\"https:\/\/saucelabs.com\/\"  target=\"_blank\"  >https:\/\/saucelabs.com\/<\/a><\/p>\n<h3>2. BrowserStack<\/h3>\n<p>BrowserStack bietet 1000+ Desktop und Mobile Browser an unter denen man ausw\u00e4hlen kann.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-740\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-stack-browser-testing.png\" alt=\"browser-stack-browser-testing\" width=\"510\" height=\"319\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-stack-browser-testing.png 1110w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-stack-browser-testing-300x188.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-stack-browser-testing-1024x641.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-stack-browser-testing-140x88.png 140w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/p>\n<p><a href=\"https:\/\/www.browserstack.com\"  target=\"_blank\"  >https:\/\/www.browserstack.com<\/a><\/p>\n<h3>3. Browserling<\/h3>\n<p>Mit Browserling kann jede beliebige Browser-Version nachempfunden und getestet werden.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-739\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browserling-browser-testing.png\" alt=\"browserling-browser-testing\" width=\"510\" height=\"319\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browserling-browser-testing.png 1110w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browserling-browser-testing-300x188.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browserling-browser-testing-1024x641.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browserling-browser-testing-140x88.png 140w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/p>\n<p><a href=\"https:\/\/www.browserling.com\"  target=\"_blank\"  >https:\/\/www.browserling.com<\/a><\/p>\n<h3>4. Browsershots<\/h3>\n<p>Browsershots ist ein weiteres Testing Tool f\u00fcr Browser-Kompatibilit\u00e4t in verschiedenen Browsern.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-738\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-shots-browser-testing.png\" alt=\"browser-shots-browser-testing\" width=\"510\" height=\"319\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-shots-browser-testing.png 1110w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-shots-browser-testing-300x188.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-shots-browser-testing-1024x641.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/07\/browser-shots-browser-testing-140x88.png 140w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/p>\n<p><a href=\"http:\/\/browsershots.org\/\"  target=\"_blank\"  >http:\/\/browsershots.org\/<\/a><\/p>\n<h2>Sie brauchen mehr als nur ein Browser Testing Tool.<\/h2>\n<p>Diese vier vorgestellten Browser Testing Tools sind gro\u00dfartig f\u00fcr jedes Browser-Test-Projekt. Dennoch brauchen Sie mehr als nur diese Tools, n\u00e4mlich vor allem einen Workflow, um Feedback zu dokumentieren und zu managen.<\/p>\n<p>Ganz egal, ob Sie die Browser Tests selbst durchf\u00fchren oder ob Sie den Prozess outgesourced haben: ein Feedback Tool wie Usersnap hilft Ihnen organisiert zu sein und Feedback effizient zu tracken.<\/p>\n<p>Wir von Usersnap hoffen, dieser Post hat Ihnen gefallen und freuen uns, wenn Sie uns auf <a href=\"https:\/\/twitter.com\/usersnap\"  target=\"_blank\"  >Twitter<\/a> folgen. Dort tweeten wir regelm\u00e4\u00dfig \u00fcber Web Development, Webdesign und UAT.<\/p>\n<p><em>Usersnap ist ein Bug Tracking und Screenshot-Tool f\u00fcr jedes Webprojekt. Erhalten Sie sofort Feedback von Ihren Website-Besuchern. Jetzt kostenlos testen!<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-107 size-full\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/02\/Bildschirmfoto-2016-02-24-um-14.58.05-e1458129781372.png\" width=\"600\" height=\"150\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vor ungef\u00e4hr zwei Jahren haben wir einen Artikel publiziert, wie man mit Browser-Testing in weniger als zwei Stunden loslegen kann. Seitdem hat sich viel ge\u00e4ndert. Neue Browser sind auf den Markt gekommen und sie sind weitaus leistungsf\u00e4higer. Heute will ich daher nochmal in einem Update erkl\u00e4ren, was man wissen muss, wenn es um modernes Browser-Testing [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":922,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-731","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=731"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/731\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/922"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}