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 - Visual testing in your project
Search
Ramona Schwering
November 24, 2021
Programming
0
180
Let's get visual - Visual testing in your project
Ramona Schwering
November 24, 2021
Tweet
Share
More Decks by Ramona Schwering
See All by Ramona Schwering
The Cake Is a Lie... And So Is Your Login’s Accessibility
leichteckig
0
100
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
200
From the Crypt to the Code
leichteckig
0
150
You shall not pass!? A short story of customizable login experiences
leichteckig
0
68
Access Granted!
leichteckig
0
110
Who are vue? Authn in Vue, the important parts
leichteckig
0
96
Vue Fortified: Best Practices for Web App Security
leichteckig
0
150
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
Other Decks in Programming
See All in Programming
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
790
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
630
Swift Concurrency - 状態監視の罠
objectiveaudio
2
490
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
960
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.2k
What's new in Spring Modulith?
olivergierke
1
130
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.8k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
Catch Up: Go Style Guide Update
andpad
0
210
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
RailsConf 2023
tenderlove
30
1.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Docker and Python
trallard
46
3.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Producing Creativity
orderedlist
PRO
347
40k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Transcript
None
None
None
[Screenshot eines
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
// First: Loading installation script // Run install script ./vrt-install.sh
// Next: Install Cypress plugin npm install @visual-regression-tracker/agent-cypress
None
None
None
main 6.4.7.0
6.4.7.0 6.4.7.0
None
None
None
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 }}
[Screenshot Percy Gitlab]
None
Percy im Test - Code im Test
None
None
None
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
None
// Wait for loading times cy.get('.grid-selection‘) .should('not.exist'); cy.get('.sw-loader') .should('not.exist');
None
None
None
// Command usage await percySnapshot('Home page', { percyCSS: `iframe {
display: none; }` }); version: 1 snapshot: percy-css: | iframe { display: none; }
// An own Command Cypress.Commands.add('changeElementStyling', (selector, imageStyle) => { //
E.g. replace the image with a fixed one cy.get(selector) .invoke('attr', 'style', imageStyle) .should('have.attr', 'style', imageStyle); });
None
None
None
None