Apply Playwright test steps with TypeScript decorators

Join Stefan Judis as he explores the concept of decorators in Playwright TypeScript code. Learn how decorators can streamline your coding process, improve test readability, and save you time.

In this tutorial, Stefan will demonstrate how to implement decorators within Playwright page object models, starting from scratch. He provides practical examples and insights into decorators, a feature not yet standard in JavaScript but available in TypeScript.

Useful Links:
Checkly Playwright code examples: https://github.com/checkly/playwright...
How to combine fixtures with page object models:    • How to combine POMs (Page Object Models) w...  
Learn more about Playwright and Checkly: https://www.checklyhq.com/product/syn...

Timestamps:
0:00 Intro
0:33 The JavaScript decorator proposal
1:32 Decorators in TypeScript
2:03 Playwright test project example
2:48 Analyzing a page object model with `test.step`
3:32 Adding a basic decorator to your page object model
5:17 Enhancing `test.step` within your decorator
6:47 Dynamic step names with TypeScript decorators
8:02 Defining decorators in the base setup

Don't forget to leave your questions or requests for future videos in the comments below!
#playwright #programming #syntheticmonitoring #checkly