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

Ramona Schwering

April 16, 2021
Tweet

More Decks by Ramona Schwering

Other Decks in Programming

Transcript

  1. 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); };
  2. 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
  3. 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');
  4. // 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
  5. 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