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

Let's get visual - Visual testing in your project

Let's get visual - Visual testing in your project

Ramona Schwering

November 24, 2021
Tweet

More Decks by Ramona Schwering

Other Decks in Programming

Transcript

  1. View Slide

  2. View Slide

  3. View Slide

  4. [Screenshot eines

    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. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. // First: Loading installation script
    // Run install script
    ./vrt-install.sh
    // Next: Install Cypress plugin
    npm install
    @visual-regression-tracker/agent-cypress

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. main 6.4.7.0

    View Slide

  25. 6.4.7.0
    6.4.7.0

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. 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 }}

    View Slide

  31. [Screenshot Percy Gitlab]

    View Slide

  32. View Slide

  33. Percy im Test - Code im Test

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. 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

    View Slide

  40. View Slide

  41. // Wait for loading times
    cy.get('.grid-selection‘)
    .should('not.exist');
    cy.get('.sw-loader')
    .should('not.exist');

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. // Command usage
    await percySnapshot('Home page', {
    percyCSS: `iframe { display: none; }`
    });
    version: 1
    snapshot:
    percy-css: |
    iframe {
    display: none;
    }

    View Slide

  46. // An own Command
    Cypress.Commands.add('changeElementStyling', (selector, imageStyle) => {
    // E.g. replace the image with a fixed one
    cy.get(selector)
    .invoke('attr', 'style', imageStyle)
    .should('have.attr', 'style', imageStyle);
    });

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide