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
150
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
160
From the Crypt to the Code
leichteckig
0
78
You shall not pass!? A short story of customizable login experiences
leichteckig
0
44
Access Granted!
leichteckig
0
87
Who are vue? Authn in Vue, the important parts
leichteckig
0
68
Vue Fortified: Best Practices for Web App Security
leichteckig
0
120
It's a (testing) trap! - Common end-to-end pitfalls and how to solve them
leichteckig
0
160
Measure and improve frontend performance by using test automation
leichteckig
0
160
You belong here! On hurdles and happiness as women in IT
leichteckig
0
58
Other Decks in Programming
See All in Programming
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
Learning Kotlin with detekt
inouehi
1
130
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
楽しく向き合う例外対応
okutsu
0
670
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
980
CI改善もDatadogとともに
taumu
0
200
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
GoとPHPのインターフェイスの違い
shimabox
2
210
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
330
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
What's in a price? How to price your products and services
michaelherold
244
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
A designer walks into a library…
pauljervisheath
205
24k
Optimizing for Happiness
mojombo
376
70k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Writing Fast Ruby
sferik
628
61k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
A better future with KSS
kneath
238
17k
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