Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Let's get visual - Visual testing in your project
Search
Ramona Schwering
November 24, 2021
Programming
0
180
Let's get visual - Visual testing in your project
Ramona Schwering
November 24, 2021
Tweet
Share
More Decks by Ramona Schwering
See All by Ramona Schwering
The Cake Is a Lie... And So Is Your Login’s Accessibility
leichteckig
0
110
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
200
From the Crypt to the Code
leichteckig
0
150
You shall not pass!? A short story of customizable login experiences
leichteckig
0
68
Access Granted!
leichteckig
0
110
Who are vue? Authn in Vue, the important parts
leichteckig
0
96
Vue Fortified: Best Practices for Web App Security
leichteckig
0
150
It's a (testing) trap! - Common end-to-end pitfalls and how to solve them
leichteckig
0
170
Measure and improve frontend performance by using test automation
leichteckig
0
180
Other Decks in Programming
See All in Programming
CSC509 Lecture 05
javiergs
PRO
0
300
株式会社 Sun terras カンパニーデック
sunterras
0
310
CSC305 Lecture 05
javiergs
PRO
0
210
明日から始めるリファクタリング
ryounasso
0
140
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
460
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
CSC305 Lecture 08
javiergs
PRO
0
200
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4.1k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
dynamic!
moro
10
8k
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Invisible Side of Design
smashingmag
302
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Transcript
None
None
None
[Screenshot eines
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
// First: Loading installation script // Run install script ./vrt-install.sh
// Next: Install Cypress plugin npm install @visual-regression-tracker/agent-cypress
None
None
None
main 6.4.7.0
6.4.7.0 6.4.7.0
None
None
None
None
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 }}
[Screenshot Percy Gitlab]
None
Percy im Test - Code im Test
None
None
None
None
None
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
None
// Wait for loading times cy.get('.grid-selection‘) .should('not.exist'); cy.get('.sw-loader') .should('not.exist');
None
None
None
// Command usage await percySnapshot('Home page', { percyCSS: `iframe {
display: none; }` }); version: 1 snapshot: percy-css: | iframe { display: none; }
// 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); });
None
None
None
None