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
89
You shall not pass!? A short story of customizable login experiences
leichteckig
0
44
Access Granted!
leichteckig
0
90
Who are vue? Authn in Vue, the important parts
leichteckig
0
70
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
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
130
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.5k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
230
Domain-Driven Design (Tutorial)
hschwentner
13
22k
良いコードレビューとは
danimal141
7
3.9k
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
290
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.5k
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.9k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
990
自力でTTSモデルを作った話
zgock999
0
120
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Music & Morning Musume
bryan
46
6.4k
Unsuck your backbone
ammeep
669
57k
Automating Front-end Workflow
addyosmani
1369
200k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Rails Girls Zürich Keynote
gr2m
94
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Making Projects Easy
brettharned
116
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/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 }}
[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