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
120
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
You shall not pass!? A short story of customizable login experiences
leichteckig
0
23
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
95
Access Granted!
leichteckig
0
76
Who are vue? Authn in Vue, the important parts
leichteckig
0
52
Vue Fortified: Best Practices for Web App Security
leichteckig
0
99
It's a (testing) trap! - Common end-to-end pitfalls and how to solve them
leichteckig
0
140
Measure and improve frontend performance by using test automation
leichteckig
0
130
You belong here! On hurdles and happiness as women in IT
leichteckig
0
38
Flaky Tests - Fighting Nightmares
leichteckig
0
300
Other Decks in Programming
See All in Programming
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
570
空間の中でアイドルとレッスンする技術 - 1st "Vision" / Spatial Lesson technologies with my idol - 1st "Vision"
banjun
PRO
0
170
Why I Choose NetBeans for Jakarta EE
ivargrimstad
0
360
ビット演算の話 / Let's play with bit operations
kaityo256
PRO
4
180
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
380
実務未経験からいち早く戦力化するための新人エンジニア育成術 ~ 具体的な方法と育成する側の心得 ~
juri_matsuda
0
120
データサイエンスのフルサイクル開発を実現する機械学習パイプライン
xcnkx
2
510
sqlcを利用してsqlに型付けを
kamiyam
0
240
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
480
5年分のツケを一気に払った話
soogie
3
1.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
12
1.6k
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
240
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
519
39k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Fireside Chat
paigeccino
32
3k
Rails Girls Zürich Keynote
gr2m
93
13k
Practical Orchestrator
shlominoach
186
10k
Faster Mobile Websites
deanohume
304
30k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
30
1.7k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
The Cost Of JavaScript in 2023
addyosmani
43
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
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