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
130
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
You shall not pass!? A short story of customizable login experiences
leichteckig
0
14
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
51
Access Granted!
leichteckig
0
67
Who are vue? Authn in Vue, the important parts
leichteckig
0
38
Vue Fortified: Best Practices for Web App Security
leichteckig
0
87
It's a (testing) trap! - Common end-to-end pitfalls and how to solve them
leichteckig
0
130
Measure and improve frontend performance by using test automation
leichteckig
0
120
You belong here! On hurdles and happiness as women in IT
leichteckig
0
29
Flaky Tests - Fighting Nightmares
leichteckig
0
290
Other Decks in Programming
See All in Programming
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
【Go言語】ジェネリクス
tomo1227
0
170
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
最近追加した型の紹介とその振り返り
aki19035vc
0
170
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Jetpack for KMP
fornewid
1
290
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Featured
See All Featured
Atom: Resistance is Futile
akmur
261
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Debugging Ruby Performance
tmm1
71
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
What's new in Ruby 2.0
geeforr
338
31k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Building Applications with DynamoDB
mza
89
5.8k
Gamification - CAS2011
davidbonilla
78
4.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
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