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

Transcript

1. View Slide

2. View Slide

3. View Slide

4. [Screenshot eines Visual bugs]
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. Nimm Cypress oder
    Panther…
    lege Screenshots
    irgendwo hin…
    mache
    Screenshots im Test
    und vergleiche sie
    

    View Slide

15. View Slide

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

    View Slide

17. View Slide

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

    View Slide

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);
    };
    

    View Slide

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

    View Slide

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

    View Slide

22. View Slide

23. View Slide

24. [Screenshot Percy Gitlab]
    

    View Slide

25. View Slide

26. View Slide

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
    

    View Slide

28. View Slide

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');
    

    View Slide

30. View Slide

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
    

    View Slide

32. View Slide

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
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide