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
170
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
190
From the Crypt to the Code
leichteckig
0
120
You shall not pass!? A short story of customizable login experiences
leichteckig
0
64
Access Granted!
leichteckig
0
110
Who are vue? Authn in Vue, the important parts
leichteckig
0
91
Vue Fortified: Best Practices for Web App Security
leichteckig
0
140
It's a (testing) trap! - Common end-to-end pitfalls and how to solve them
leichteckig
0
170
Measure and improve frontend performance by using test automation
leichteckig
0
180
You belong here! On hurdles and happiness as women in IT
leichteckig
0
74
Other Decks in Programming
See All in Programming
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.7k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
620
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
AIのメモリー
watany
11
1.1k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
280
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
コーディングエージェント概観(2025/07)
itsuki_t88
0
460
DataformでPythonする / dataform-de-python
snhryt
0
110
Jakarta EE Meets AI
ivargrimstad
0
450
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
240
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Automating Front-end Workflow
addyosmani
1370
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
770
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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