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
Playwright can do this?
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
stefan judis
March 30, 2023
Technology
260
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Playwright can do this?
Learn why Microsoft's testing framework is a stellar solution to test your sites end-to-end.
stefan judis
March 30, 2023
More Decks by stefan judis
See All by stefan judis
Back to boring (part 2)
stefanjudis
0
380
Things you should know about Frontend Development in 2022
stefanjudis
0
570
Throw yourself out there for fun and profit
stefanjudis
0
140
Back to Boring
stefanjudis
1
540
Wanna scale up? Make sure your CMS is ready for it!
stefanjudis
0
290
Did we(b development) lose the right direction?
stefanjudis
6
2.2k
Regular expressions – my secret love
stefanjudis
1
1.1k
Write a Function
stefanjudis
0
630
React in a worker, worker, worker...
stefanjudis
2
610
Other Decks in Technology
See All in Technology
現場に行くだけでは足りない——プロダクトエンジニアが業務の流れを捉える観点と、その鍛え方
takumiengineering
0
220
リージョンの壁を越える、 ちょっと変わったAWSサービスの話
falken
PRO
0
200
When Token Pruning is Worse than Random: Understanding Visual Token Information in VLLMs
sansantech
PRO
0
250
書籍『生成AIの安全性入門』の入門
wataoka
0
210
こんなアーキテクチャ図は嫌だ BEYOND THE TIME: 半年後の自分へ贈る15のメッセージ / 15 of Anti-pattern in AWS Architecture Diagrams
naospon
3
220
AIで実装は速くなった。なのにプロダクトは速くならない。職能の壁を越えて価値のフローを設計する
nwiizo
6
6.7k
スクラムで身についていた動き方を、XPで捉え直してみた
codmoninc
1
170
Where Is JetBrains AI Heading- — Central CLI, Air Alpha, and the Agentic Development Stack
x5gtrn
PRO
0
110
全社に広がるMCPサーバーを、 どう安全に管理するか MCPass開発の舞台裏
mtpooh
3
280
最新技術に積極チャレンジ!EKS共通基盤のこれまでとこれから
daitak
0
300
DINO-EdgeQuery:Edge-First Polygon Decoding for Building Footprint Extraction from Satellite Imagery
lehupa
0
140
[DroidKaigi 2026] Making UI specifications visible: Android UI development in the AI agent era supported by Compose Screenshot Testing and galleries
syarihu
0
530
Featured
See All Featured
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
260
Paper Plane (Part 1)
katiecoart
PRO
1
10k
The untapped power of vector embeddings
frankvandijk
2
1.9k
Discover your Explorer Soul
emna__ayadi
2
1.3k
Designing Powerful Visuals for Engaging Learning
tmiket
1
530
Fireside Chat
paigeccino
42
4k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1.1k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
260
Thoughts on Productivity
jonyablonski
76
5.4k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
Writing Fast Ruby
sferik
630
63k
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
Transcript
@stefanjudis Playwright can do this?
Does anyone remember this friend?
Or this one?
@stefanjudis stefanjudis.com | webweekly.email Heyo, I'm Stefan! checklyhq.com GDE |
Playwright Ambassador
webweekly.email
The idea of end-to-end testing was great!
But it was terrible.
Tests were slow, hard to write and fl aky.
We run the tests on demand. My colleagues & I
We gave up. :/ My colleagues & I
Things got a lot better
Playwright is cross-everything
Playwright is cross-everything
Run your tests in VS Code
Very solid typings
More than a browser control / / @ts - check
import { test, expect } from "@playwright/test"; test.describe("navigation", () = > { test.beforeEach(async ({ page }) = > { / / Go to the starting url before each test. await page.goto("https: / / playwright.dev/"); }); test("main navigation", async ({ page }) = > { / / Assertions use the expect API. await expect(page).toHaveURL("https: / / playwright.dev/"); }); });
Easy to parallelize npx playwright test - - workers 4
/ / playwright.conf i g.js import { def i neConf i g } from '@playwright/test'; export default def i neConf i g({ workers: process.env.CI ? 2 : undef i ned, })
Built for quick execution const button = page.locator('button') await button.click()
await expect(button).toBeHidden() Auto-wait and web- fi rst assertions make waitFor statements redundant.
A very fast release cycle
Let's have a look!
Auto-wait Web- fi rst assertions Screenshots Test runner Retries Tracing
VS Code extension Inspector Debugger Codegen Image Snapshots Native UI
Weekly Playwright tips youtube.com/checklyhq
There's no silver bullet when it comes to e2e testing...
... but Playwright is a stellar solution!
Treat your UIs like your APIs.
APIs are measured with the number of nines — 99.999%.
Your entire application should be tested all the time!
Account create Account login Account update Account delete 99.999% 99.1%
99.8% 99.94% Stellar frontends with con fi dence
blog.checklyhq.com/how-playwright-can-monitor-third-party-resources/
End-to-end monitoring should be your safety net.* * Your future-self
will thank you!
Start shipping with con fi dence! * Your future-self will
thank you!
@stefanjudis www.stefanjudis.com webweekly.email Thanks!