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
37
Who are vue? Authn in Vue, the important parts
leichteckig
0
25
Vue Fortified: Best Practices for Web App Security
leichteckig
0
65
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
21
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
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
Goのエラースタックトレースの歴史と今後
sonatard
7
1.2k
Ruby Function Composition
bkuhlmann
1
330
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
250
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
820
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
100
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
100
Hanami and htmx
bkuhlmann
0
210
Ruby Pattern Matching
bkuhlmann
0
920
Featured
See All Featured
Building an army of robots
kneath
300
41k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Designing the Hi-DPI Web
ddemaree
276
33k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
RailsConf 2023
tenderlove
4
540
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Bash Introduction
62gerente
604
210k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Atom: Resistance is Futile
akmur
259
25k
Documentation Writing (for coders)
carmenintech
60
3.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
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