Let's get visual - Visual testing in your project

Transcript

4. [Screenshot eines
20. // First: Loading installation script // Run install script ./vrt-install.sh // Next: Install Cypress plugin npm install @visual-regression-tracker/agent-cypress
24. main 6.4.7.0
25. 6.4.7.0 6.4.7.0
30. 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 }}
31. [Screenshot Percy Gitlab]
33. Percy im Test - Code im Test
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
41. // Wait for loading times cy.get('.grid-selection‘) .should('not.exist'); cy.get('.sw-loader') .should('not.exist');
45. // Command usage await percySnapshot('Home page', { percyCSS: `iframe { display: none; }` }); version: 1 snapshot: percy-css: | iframe { display: none; }
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); });