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
Access Granted!
leichteckig
0
42
Who are vue? Authn in Vue, the important parts
leichteckig
0
30
Vue Fortified: Best Practices for Web App Security
leichteckig
0
67
It's a (testing) trap! - Common end-to-end pitfalls and how to solve them
leichteckig
0
110
Measure and improve frontend performance by using test automation
leichteckig
0
110
You belong here! On hurdles and happiness as women in IT
leichteckig
0
25
Flaky Tests - Fighting Nightmares
leichteckig
0
280
Ecommerce as easy as an UI component
leichteckig
0
60
End-To-End Testing as it should be - An introduction to Cypress
leichteckig
0
160
Other Decks in Programming
See All in Programming
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
460
Implementing Design Systems in Swift
seyfoyun
1
450
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.1k
Ruby Function Composition
bkuhlmann
1
340
敵対的ポイフル
futabato
0
130
Domain-Driven Transformation
hschwentner
2
1.5k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
ゆるい個人開発のススメ
kuroppe1819
10
1k
What We Can Learn From OSS
inouehi
0
430
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
500
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
870
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Web development in the modern age
philhawksworth
203
10k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
We Have a Design System, Now What?
morganepeng
44
6.8k
4 Signs Your Business is Dying
shpigford
176
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
In The Pink: A Labor of Love
frogandcode
138
21k
Raft: Consensus for Rubyists
vanstee
133
6.3k
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