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

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

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

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