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
88
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
Team operations that are not burdened by SRE
kazatohiei
1
300
5つのアンチパターンから学ぶLT設計
narihara
1
150
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
130
Porting a visionOS App to Android XR
akkeylab
0
260
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
12k
VS Code Update for GitHub Copilot
74th
2
600
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
150
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
740
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
4 Signs Your Business is Dying
shpigford
184
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How GitHub (no longer) Works
holman
314
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Faster Mobile Websites
deanohume
307
31k
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