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
170
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
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
180
From the Crypt to the Code
leichteckig
0
110
You shall not pass!? A short story of customizable login experiences
leichteckig
0
64
Access Granted!
leichteckig
0
110
Who are vue? Authn in Vue, the important parts
leichteckig
0
88
Vue Fortified: Best Practices for Web App Security
leichteckig
0
140
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
You belong here! On hurdles and happiness as women in IT
leichteckig
0
73
Other Decks in Programming
See All in Programming
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
技術同人誌をMCP Serverにしてみた
74th
1
440
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
580
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
580
Benchmark
sysong
0
270
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
600
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
Goで作る、開発・CI環境
sin392
0
150
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Writing Fast Ruby
sferik
628
62k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How GitHub (no longer) Works
holman
314
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
It's Worth the Effort
3n
185
28k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Documentation Writing (for coders)
carmenintech
72
4.9k
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