Praxisbericht: Email Testing @ XING - Mehr als nur "Senden"

1. Email Testing @ XING - Mehr als nur "Senden" Email QA und Monitoring bei der XING AG Hamburg - 29.02.2016 - thorsten.bosbach@xing.com 1Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

2. Agenda Vorstellung Email Frontend Backend 2Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

3. Thorsten Bosbach Senior Software Test Engineer, XING AG, Hamburg http://xing.to/bosbach Studiengang Elektrotechnik, Fachbereich Nachrichtentechnik Studienrichtung Informationsverarbeitung StarOffice / OpenOffice.org / Oracle Open Office Automatische Oberflächentests (Windows, Linux, Mac OS X, Solaris) Marketplace Entwicklung für Erweiterungen und Vorlagen mit PHP CMS Drupal Pflege und Erweiterung von Onlinereiseportalen auf Basis von Drupal Emails @ XING 3Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

4. Email 4Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

5. Email Also, wat is en Email? 4Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

6. Email Da stelle mehr uns janz dumm. Und da sage mer so: 4Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

7. Email En Email, dat is ene jroße Haufen Buchstaben... 4Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

8. Einfach nur Text ... 5Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

9. ... ein bischen Farbe ... 6Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

10. ... mehr Farbe ... 7Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

11. ... Klickibunti https://litmus.com/blog/is-this-the-future-of-email-design 8Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

12. Geordnete Buchstaben Quellcode - 'View page source' 9Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

13. Header ... ... Return-Path: <hallo@xing.com> Date: Sun, 14 Feb 2016 15:18:03 +0100 From: XING <hallo@xing.com> Reply-To: XING <hallo@xing.com> To: XXXXXXXXXXX@gmail.com Subject: Herzlich willkommen bei XING, Max "Maxy" Mustermann! Mime-Version: 1.0 Content-Type: multipart/mixed; boundary="--==_mimepart_56c08c9b94a25_bb610738c4511810"; charset=UTF-8 Content-Transfer-Encoding: 7bit 10Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

14. ... Text ... ... ----==_mimepart_56c08c9b948ac_bb610738c45117a1 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Nachricht im Browser ansehen: https://www.xing.com/m/12ölsakdöakfökdöf XING ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Herzlich willkommen bei XING, Max "Maxy" Mustermann! Welche beruflichen Ziele Sie sich auch gesetzt haben =E2=80=93 XING hilft= Ihnen, sie zu verwirklichen. ------------------------------------------------------------ =3D> Jetzt XING entdecken: https://www.xing.com/m/12ölsakdöakfökdöf ------------------------------------------------------------ 11Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

15. ... CSS + HTML ----==_mimepart_56c08c9b948ac_bb610738c45117a1 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-mi <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <meta name="format-detection" content="telephone=no" /> <title>Herzlich willkommen bei XING, Max "Maxy" Mustermann!</title> <style type="text/css"> 12Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

16. Der Weg 1. Generierung des Quelltextes 2. Abgehender Mailserver (XING) 3. Internet 4. Empfangender Mailserver (z.B. Google) 5. Email Client des Empfängers https://de.wikipedia.org/wiki/E-Mail 13Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

17. Frontend 14Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

18. Frontend Vor dem Versenden 14Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

19. Frontend Beim Empfänger 14Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

20. Frontend Warum überhaupt Emails testen? 14Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

21. Darum 15Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

22. Darum Eine einmal verschickte Email ist unveränderbar. 15Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

23. Vielfalt 16Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

24. Vielfalt Vielfalt der 16Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

25. Vielfalt Vielfalt der Endgeräte 16Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

26. Vielfalt Vielfalt der Client Software 16Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

27. Vielfalt Vielfalt der Email Provider 16Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

28. Vielfalt Domains Domain % GMX / WEB.DE 27 Google 13 Hotmail / Outlook.com 6 @t-online.de 4 Yahoo 4 Top fünf Empfänger in einer Woche im Februar 17Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

29. @t-online.de 18Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

30. Vielfalt Bildschirmauflösungen http://opensignal.com/reports/2015/08/android-fragmentation/ 19Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

31. Vielfalt Bildschirmauflösungen iOS http://opensignal.com/reports/2015/08/android-fragmentation/ 19Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

32. Vielfalt Bildschirmauflösungen iOS Android http://opensignal.com/reports/2015/08/android-fragmentation/ 19Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

33. Visuell - Lokal - Desktop 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

34. Visuell - Lokal - Desktop Lokal im Browser 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

35. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

36. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation Alle M$ IEs 6-Edge: https://dev.windows.com/en-us/microsoft-edge/tools 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

37. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation Alle M$ IEs 6-Edge: https://dev.windows.com/en-us/microsoft-edge/tools HTML Syntax Checker 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

38. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation Alle M$ IEs 6-Edge: https://dev.windows.com/en-us/microsoft-edge/tools HTML Syntax Checker Selber zuschicken per Mail 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

39. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation Alle M$ IEs 6-Edge: https://dev.windows.com/en-us/microsoft-edge/tools HTML Syntax Checker Selber zuschicken per Mail Preheader 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

40. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation Alle M$ IEs 6-Edge: https://dev.windows.com/en-us/microsoft-edge/tools HTML Syntax Checker Selber zuschicken per Mail Preheader Wie siehts ohne Grafiken aus? 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

41. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation Alle M$ IEs 6-Edge: https://dev.windows.com/en-us/microsoft-edge/tools HTML Syntax Checker Selber zuschicken per Mail Preheader Wie siehts ohne Grafiken aus? 'Alt' Tags gesetzt? 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

42. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation Alle M$ IEs 6-Edge: https://dev.windows.com/en-us/microsoft-edge/tools HTML Syntax Checker Selber zuschicken per Mail Preheader Wie siehts ohne Grafiken aus? 'Alt' Tags gesetzt? Links 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

43. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation Alle M$ IEs 6-Edge: https://dev.windows.com/en-us/microsoft-edge/tools HTML Syntax Checker Selber zuschicken per Mail Preheader Wie siehts ohne Grafiken aus? 'Alt' Tags gesetzt? Links Escaping <script> alert('ups ;-') </script> 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

44. Visuell - Lokal - Desktop Lokal im Browser Fenstergrösse ändern - mobil Simulation Alle M$ IEs 6-Edge: https://dev.windows.com/en-us/microsoft-edge/tools HTML Syntax Checker Selber zuschicken per Mail Preheader Wie siehts ohne Grafiken aus? 'Alt' Tags gesetzt? Links Escaping Grenzen der Textlängen <script> alert('ups ;-') </script> 20Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

45. Preheader 21Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

46. mit geladenen Bildern 22Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

47. mit ohne geladenen Bildern 22Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

48. Und das machen wir nun auf 42 Endgeräten? 23Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

49. Und das machen wir nun auf 42 Endgeräten? Ja! 23Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

50. Und das machen wir nun auf 42 Endgeräten? Naja... 23Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

51. Und das machen wir nun auf 42 Endgeräten? Wir lassen machen ;-) 23Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

52. Und das machen wir nun auf 42 Endgeräten? litmus.com 23Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

53. Und das machen wir nun auf 42 Endgeräten? litmus.com www.emailonacid.com 23Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

54. litmus.com 24Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

55. iphone5s ... ... ... ... 25Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

56. Desktop 26Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

57. Mobile 27Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

58. Unterstützte Clients 28Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

59. Fragen? 29Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

60. Super, dann brauche ich ja gar keine Testgeräte. 30Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

61. Super, dann brauche ich ja gar keine Testgeräte. Richtig? 30Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

62. Super, dann brauche ich ja gar keine Testgeräte. Richtig? Naja... 30Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

63. Super, dann brauche ich ja gar keine Testgeräte. Richtig? Naja... Fast. 30Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

64. Warum muss ich dennoch auf Geräten testen? Nur Android 4.4 Erster Eindruck beim Laden Portrait / Landscape Wechsel Links / App Integration iOS Gmail Optimierung 31Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

65. Links... Email XING App Mobile Web 32Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

69. iOS Gmail app 1. Mobile 2. Original 33Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

70. Wie machen wir das? Im aktuellen Android / iPhone / Tablet anschauen Testsession: QA Kollegen nutzen Vielfalt unserer Testdevices Email nur an XING Mitarbeiter versenden und zu Feedback auffordern Gezielte Auswahl aus diversen Geräten und Systemversionen 34Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

71. Es kann nicht auf jedem Device gleich gut aussehen...? 35Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

72. Es kann nicht auf jedem Device gleich gut aussehen...? Zeitlimt? 35Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

73. Es kann nicht auf jedem Device gleich gut aussehen...? Zeitlimt? Kenne die Prioritäten! 35Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

74. Operatingsystem 01/2016 User Agents Verteilung Open 36Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

75. Clients 01/2016 User Agents Verteilung Open 37Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

76. Woher? piwik.org - Leading open-source analytics platform Device Detector User Agent String aus Webserver Logs https://github.com/piwik/device-detector Gmail Image Proxy Apple Mail Android App via 'requested-with' im Header 38Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

77. http://www.emailclientmarketshare.com http://developer.android.com/about/dashboards https://developer.apple.com/support/app-store 39Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

78. Testfallen 40Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

79. Testfallen Email nicht weiterleiten! 40Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

80. Testfallen Email nicht weiterleiten! Gmail mit ActiveSync / Exchange 40Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

81. Testfallen Email nicht weiterleiten! Gmail mit ActiveSync / Exchange Adressbuch 40Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

82. 41Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

83. 42Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

84. Regression Testing 43Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

85. Regression Testing Muss ich mir nun 90 Email Templates ansehen?!? 43Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

86. Regression Testing Muss ich mir nun 90 Email Templates ansehen?!? A responsive screenshot comparison tool https://github.com/BBC-News/wraith 43Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

88. Backend 45Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

89. Der Weg 1. Generierung des Quelltextes 2. Abgehender Mailserver (XING) 3. Internet 4. Empfangender Mailserver (z.B. Google) 5. Email Client des Empfängers 46Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

90. Erfolg 2.0.0 Message accepted. 2.5.0 Ok. Email angenommen. Vielleicht nicht unbedingt in der Inbox, aber zumindest irgendwo, und sei es im Spamfolder. Angekommen. 47Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

91. Sanfte Fehler Temporary local problem, please try again! 451 4.7.1 Service unavailable - try again later This message is greylisted, try again later. 451 4.7.1 Greylisting in action, please come back later Unserer Mailserver darf es nochmal versuchen. Es besteht noch Hoffnung... Zumindest eine Verzögerung. 48Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

92. Harte Fehler 5.4.7 [internal] exceeded max retries without delivery 5.7.1 Message rejected: SPAM rating value exceeded (71/60). Sorry, no mailbox here by that name. 5.2.2 Delivery failed: mailbox is full (quota exceeded) Keine Chance, die Email kann nicht zugestellt werden. 49Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

93. Bouncing https://www.youtube.com/watch?v=v1SHPQX6t38 50Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

94. Timing Nichts ist so alt wie die Zeitung Email von gestern. 51Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

95. Monitoring Gesamt Email Volumen Gesamt Bounce Volumen Volumen pro Template Bounce Volumen pro Template 52Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

96. Spam Wie behalten wir eine gute Reputation Inhalt / Links / IPs Nicht an bekannte Hardbounces schicken Gut: Öffnen, Not Junk, antworten, Adressbuch Schlecht: To Junk, löschen ohne öffnen Abmelde Link Text Alternative Spam Test mit Litmus.com Braucht der Empfänger die Email? https://www.campaignmonitor.com/resources/guides/landing/ 53Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016

98. www.xing.com/company/xing/jobs Agile Tester - Mobile (Android) Working Student Agile Tester – Web Applications Agile Project Manager Visual / Interaction Designer Agile Tester - Web and/or Mobile Frontend Engineer iOS / Android Developer 55Email Testing @ XING / Thorsten Bosbach / Hamburg / 29.02.2016