Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's get visual - Visuelles Testing in Deinem Symfony Projekt

36751965e79dca4618cccc3c08efc912?s=47 Ramona Schwering
April 16, 2021
Programming
0
39

Let's get visual - Visuelles Testing in Deinem Symfony Projekt

In Deinem Projekt sind Tests wichtig: Das weißt Du wahrscheinlich schon und so erledigst Du es selbst - oder deine lieben Tester. Doch sobald Dein Projekt immer weiter wächst, wird das immer mühsamer - Jede Deiner Änderungen kann etwas in Deinem Projekt brechen, ohne das Du es merkst. Aber nach jedem Merge mit einer Checkliste diesen Seiteneffekten hinterher zu rennen ist auch keine Lösung. Doch End-to-end Tests machen nur das, was Du ihnen sagst - schauen also nicht nach rechts oder links. So können zB. Fehler im Styling unbemerkt bleiben.

Also was nun? Visuelles Testing vergleicht das Aussehen Deiner Anwendung mit einem vorherigen Stand. Wenn Veränderungen deutlich werden, kannst Du diese erlauben oder halt nicht. Somit hast Du oder Deine Tester seine Augen überall - ohne den Zwang, immer wieder manuell zu prüfen.

Ich nutze visuelles Testing schon eine Weile und es hat mir schon einpaar mal meinen Hals gerettet. Lasst uns meine Reise einmal gemeinsam anschauen und erforschen, ob und wie Visual Testing auch in euren Projekten helfen kann.

36751965e79dca4618cccc3c08efc912?s=128

Ramona Schwering

April 16, 2021
Tweet

More Decks by Ramona Schwering

See All by Ramona Schwering
36751965e79dca4618cccc3c08efc912?s=48 leichteckig
0
5
36751965e79dca4618cccc3c08efc912?s=48 leichteckig
0
28
36751965e79dca4618cccc3c08efc912?s=48 leichteckig
0
270
36751965e79dca4618cccc3c08efc912?s=48 leichteckig
0
170
36751965e79dca4618cccc3c08efc912?s=48 leichteckig
0
49
36751965e79dca4618cccc3c08efc912?s=48 leichteckig
0
75

Other Decks in Programming

See All in Programming
A581cbb76555d4854d3264a16fed5d13?s=48 daiki_0816
0
400
09923d8b0c79423a289b7d5dc31a59e4?s=48 mururu
3
1.2k
270b0c7883545117a9a618dc7ca7cc83?s=48 xrdnk
0
430
8ffce1486e39ee3f43f52be5580b9966?s=48 luiznasciment0
1
160
827c50b8ee8994d5feac521f09178d0e?s=48 karosuwindam
0
150
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
190
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
3
760
F458220c21b5a3508485f7eddaa26cca?s=48 onsd
5
1.9k
56047a7b11797f42c2e7030d771fe803?s=48 oleur
1
100
85d7f0ae00c0cf1092dffcec966e3ae9?s=48 mattak
26
15k
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
1
320
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
110

Featured

See All Featured
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.4k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
178
14k
245cee81a9c424266e5e401d844ea881?s=48 lara
18
3k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
61k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
262
11k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
116
10k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
330
16k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
208
10k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
54
4.4k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
402
20k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
7k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
7
840

Transcript

  1. None
  2. None
  3. None

  4. [Screenshot eines Visual bugs]

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None

  14. Nimm Cypress oder Panther… lege Screenshots irgendwo hin… mache Screenshots

    im Test und vergleiche sie
  15. None

  16. Applitools Percy Storybook Open Source Plugins … und viele mehr

    …
  17. None

  18. npm install --save-dev @percy/cypress … oder … yarn add --dev

    @percy/cypress Installation

  19. Einbindung // Am Anfang der cypress/support/commands.js import '@percy/cypress'; // In

    cypress/plugins/index.js let percyHealthCheck = require(‚@percy/cypress/task'); module.exports = (on, config) => { on("task", percyHealthCheck); };

  20. it('should screensshot', () => { cy.visit('/'); // Takes snapshot cy.percySnapshot('Titel');

    }); Percy im Test

  21. Percy im Test - Code im Test Percy als Tool

  22. None
  23. None

  24. [Screenshot Percy Gitlab]

  25. None
  26. None

  27. const now = new Date(2018, 1, 1) .getTime(); // freezes

    the system time to Jan 1, 2018 cy.clock(now); // continue with your normal tests below Zeit auf dem Client beeinflussen
  28. None

  29. Warten bis alles fertig ist // Beispiel: Ladezustände abwarten cy.get('.sw-data-grid__skeleton')

    .should('not.exist'); cy.get('.sw-loader') .should('not.exist');
  30. None

  31. // Ein eigenes Command Cypress.Commands.add('changeElementStyling', (selector, imageStyle) => { //

    Hier z.B. das Bild mit einem anderen ersetzen cy.get(selector) .invoke('attr', 'style', imageStyle) .should('have.attr', 'style', imageStyle); }); Ins CSS der Seite eingreifen
  32. None

  33. name: CI on: [push, pull_request] jobs: build: runs-on: ubuntu-latest steps:

    - name: Checkout uses: actions/checkout@v1.0.0 - name: Install run: yarn - name: Percy Test uses: percy/exec-action@v0.3.1 with: command: "cypress run" env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} Github Action
  34. None
  35. None
  36. None
  37. None
  38. None