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 Symfony Projekt
Search
Ramona Schwering
April 16, 2021
Programming
0
110
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
Who are vue? Authn in Vue, the important parts
leichteckig
0
21
Vue Fortified: Best Practices for Web App Security
leichteckig
0
37
It's a (testing) trap! - Common end-to-end pitfalls and how to solve them
leichteckig
0
97
Measure and improve frontend performance by using test automation
leichteckig
0
100
You belong here! On hurdles and happiness as women in IT
leichteckig
0
20
Flaky Tests - Fighting Nightmares
leichteckig
0
280
Ecommerce as easy as an UI component
leichteckig
0
60
Let's get visual - Visual testing in your project
leichteckig
0
130
End-To-End Testing as it should be - An introduction to Cypress
leichteckig
0
150
Other Decks in Programming
See All in Programming
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.9k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
140
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.3k
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
280
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
2.6k
Honoとhtmx
yusukebe
6
1.2k
LPIXEL×CADDi_kaerururu
kaerururu
3
300
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
Parallel Socket Communication in Swift
s_shimotori
0
220
Featured
See All Featured
Clear Off the Table
cherdarchuk
82
310k
Web Components: a chance to create the future
zenorocha
304
41k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
The Brand Is Dead. Long Live the Brand.
mthomps
48
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
The Invisible Side of Design
smashingmag
293
49k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
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