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:

Timestamps:
0:00 Intro
0:33 The JavaScript decorator proposal
1:32 Decorators in TypeScript
2:03 Playwright test project example
3:32 Adding a basic decorator to your page object model
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

[ChecklyHQ]

Thanks for watching this rather "hefty" TypeScript live-coding session. 🦝

[RaviLalwani-id]

I've watched all of your videos, and they are incredibly informative. Thank you so much for sharing them!

[lukegordon]

This is brilliant and timely for us. Thanks for the video!

[MrRawbot]

Nice video ! Would be worth to do the same with tags and annotations

[FoxSkay]

Thank you very much for such videos! Keep going! You are doing this great!

[dva_kompota]

Thanks! Will implement it immediately!
Great content as always!

[phatle]

Sir, this is what i'm looking for, Thanks a lot.

[jayeshdalal]

This is really great example to use decorator !! I have one request having 200+ test and we want single login & use browser cookies to run rest all test cases .
how efficiently we can design this stuff so that re use it & if application session gone then script can check & re validate or say save the cookies again for next test cases .

[ParulRana]

Your videos are so useful for me. Thanks for sharing.

[cerosh]

Hai Stefan,
This is an excellent use of TypeScript in Playwright. Thank you for sharing this. The current implementation of Steps is complex, but I'm willing to put in the effort to add the steps because of its benefits. This video is much anticipated. Once again, thank you. Can you consider integrating Playwright with Mountebank for future videos?

[vitaliy]

Sorry if I missed that... But to to click some second "Button" for example it there can be or sometimes not present. It's dynamically changed! So the task is: If we have button - click, if haven't - skip and go next

[ЕленаКазакова-оэи]

looks really cool ! won't using a declarator increase the time for tests?

[karunakarhv]

Thanks for this!!! I was using it in Python.

I have a question on using expect methods in Page Object Model. Why do we use it here, instead these can be used in test script file. Don’t you think this would be the best practice?

[ratrtech]

nice, but the Checkly tool is not supported the test.step with class decorators

[kryptoniansz]

please make tutorial for playwright + cucumber sir

[pokemokemon]

Hi Stefan, quick question: would you define the step function in every single pom class or would you create a new class exporting the step function and import it into every pom class? Or something else entirely? Thank you

[mykolapustovar]

Unfortunatelly, this causes an error in case if tsconfig has ExperimentalDecorators set to true :(

[fellogenfellogen]

This is great for class users in POM. Not something that would lead me to using class approach instead of "normal" object based

[alexpoyan]

Can we set method argument values inside decorator, that was applied for that method, like this:

@step(`Add product '${ product.name }' to card`)
async addToCard(product: Product){
// adding product logic...
}

[vladyslavk]

What if we need to use a values in steps? how to workaround it?