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 - Visuelles Testing in Deinem ...
Search
Ramona Schwering
April 16, 2021
Programming
0
140
Let's get visual - Visuelles Testing in Deinem Symfony Projekt
Ramona Schwering
April 16, 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
180
From the Crypt to the Code
leichteckig
0
110
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
89
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
73
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
2
670
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.7k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
670
What's new in AppKit on macOS 26
1024jp
0
140
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
170
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.7k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.1k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
650
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
970
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
810
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Thoughts on Productivity
jonyablonski
69
4.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Practical Orchestrator
shlominoach
189
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Agile that works and the tools we love
rasmusluckow
329
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
None
None
None
[Screenshot eines Visual bugs]
None
None
None
None
None
None
None
None
None
Nimm Cypress oder Panther… lege Screenshots irgendwo hin… mache Screenshots
im Test und vergleiche sie
None
Applitools Percy Storybook Open Source Plugins … und viele mehr
…
None
npm install --save-dev @percy/cypress … oder … yarn add --dev
@percy/cypress Installation
Einbindung // Am Anfang der cypress/support/commands.js import '@percy/cypress'; // In
cypress/plugins/index.js let percyHealthCheck = require(‚@percy/cypress/task'); module.exports = (on, config) => { on("task", percyHealthCheck); };
it('should screensshot', () => { cy.visit('/'); // Takes snapshot cy.percySnapshot('Titel');
}); Percy im Test
Percy im Test - Code im Test Percy als Tool
None
None
[Screenshot Percy Gitlab]
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 Zeit auf dem Client beeinflussen
None
Warten bis alles fertig ist // Beispiel: Ladezustände abwarten cy.get('.sw-data-grid__skeleton')
.should('not.exist'); cy.get('.sw-loader') .should('not.exist');
None
// Ein eigenes Command Cypress.Commands.add('changeElementStyling', (selector, imageStyle) => { //
Hier z.B. das Bild mit einem anderen ersetzen cy.get(selector) .invoke('attr', 'style', imageStyle) .should('have.attr', 'style', imageStyle); }); Ins CSS der Seite eingreifen
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 }} Github Action
None
None
None
None
None