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
stefan judis
March 30, 2023
Technology
0
120
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
Tweet
Share
More Decks by stefan judis
See All by stefan judis
Back to boring (part 2)
stefanjudis
0
250
Things you should know about Frontend Development in 2022
stefanjudis
0
460
Throw yourself out there for fun and profit
stefanjudis
0
78
Back to Boring
stefanjudis
1
390
Wanna scale up? Make sure your CMS is ready for it!
stefanjudis
0
220
Did we(b development) lose the right direction?
stefanjudis
6
2.1k
Regular expressions – my secret love
stefanjudis
1
980
Write a Function
stefanjudis
0
510
React in a worker, worker, worker...
stefanjudis
2
480
Other Decks in Technology
See All in Technology
Emacs x Nostr
hakkadaikon
1
150
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
Gradle: The Build System That Loves To Hate You
aurimas
2
140
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
150
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
Featured
See All Featured
KATA
mclloyd
29
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Practical Orchestrator
shlominoach
186
10k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
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!