$30 off During Our Annual Pro Sale. View Details »

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

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

Ramona Schwering

April 16, 2021
Tweet

More Decks by Ramona Schwering

Other Decks in Programming

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/[email protected]
    - name: Install
    run: yarn
    - name: Percy Test
    uses: percy/[email protected]
    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