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
From the Crypt to the Code
leichteckig
0
21
You shall not pass!? A short story of customizable login experiences
leichteckig
0
33
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
120
Access Granted!
leichteckig
0
80
Who are vue? Authn in Vue, the important parts
leichteckig
0
61
Vue Fortified: Best Practices for Web App Security
leichteckig
0
120
It's a (testing) trap! - Common end-to-end pitfalls and how to solve them
leichteckig
0
150
Measure and improve frontend performance by using test automation
leichteckig
0
140
You belong here! On hurdles and happiness as women in IT
leichteckig
0
46
Other Decks in Programming
See All in Programming
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
testcontainers のススメ
sgash708
1
130
Jakarta EE meets AI
ivargrimstad
0
280
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
290
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
510
fs2-io を試してたらバグを見つけて直した話
chencmd
0
250
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
460
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
180
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
350
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
1
280
快速入門可觀測性
blueswen
0
410
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
How STYLIGHT went responsive
nonsquared
96
5.2k
Being A Developer After 40
akosma
88
590k
Designing for humans not robots
tammielis
250
25k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
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