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

Transcript

4. [Screenshot eines Visual bugs]
14. Nimm Cypress oder Panther… lege Screenshots irgendwo hin… mache Screenshots im Test und vergleiche sie
16. Applitools Percy Storybook Open Source Plugins … und viele mehr …
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
24. [Screenshot Percy Gitlab]
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
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');
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
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