Automated UI testing in .NET using Playwright and Specflow

Check out SpecFlow: go.specflow.org/NickChapsas
Subscribe: bit.ly/ChapsasSub
Become a Patreon and get source code access: / nickchapsas
This video was sponsored by SpecFlow
Hello everybody I'm Nick and in this video I will show you how you can start writing elegant automatic ui test in C# and .NET using Specflow as a base for them. Playwright is a framework created by Microsoft and it enables reliable end-to-end testing for modern web apps. It has some really cool features built into it that I will talk about in this video.
Specflow plugin for Rider: plugins.jetbrains.com/plugin/...
Don't forget to comment, like and subscribe :)
Social Media:
Follow me on GitHub: bit.ly/ChapsasGitHub
Follow me on Twitter: bit.ly/ChapsasTwitter
Connect on LinkedIn: bit.ly/ChapsasLinkedIn
#dotnet #specflow #playwright

[@riccardoroveri9666]

A video just on playwright would be great!

[@ChristianMay21]

seconded!

[@KurtInTampa]

Trippled

[@oggatog3698]

I like the video, but procedural tests would be easier to hand to someone with less experience or someone who doesn't want to sit through how spec flow works again

[@icequark1568]

Please :)

[@kaydenmiller8156]

Absolutely would love to have a video on just playwright!

[@danieljayne8623]

Playwright looks great, thanks Nick. Love the wait until available instead of wait a few seconds and see if it's ready approach I've seen implemented with selenium

[@euSupinho]

Awesome. I have all seen people integrating spec flow with selenium.. but u came up with playwright integration.. liked it

[@tofu1687]

Amazing video, thanks btw I'm a bit late about that but I love your new setup (chair facing left and green screen)

[@baetz2]

Great video, thank you so much! Your videos really put together things in my head!

[@SabotageAndi]

Another great video! Finally, I got to watch it!

[@BernhardHofmann]

Your content and pace are spot on Nick! I saw you turned off the headless mode after debugging. I've found it useful to see the test run when things don't work, or at least the first time, to make sure it's doing what I planned. It's sometimes quicker/easier than debugging.

[@nickchapsas]

Yeah it can totally be something you have on while working on the code and turn off during your CI/CD pipeline's configuration

[@frityz]

I am using integrated playwright with Specflow currently and despite the initial pain to set it up works like a charm. I need to watch your video though, maybe it will inspire me to redo some of the code base

[@Th3MoL3]

Fantastic not watched yet but I use specflow for work so would be very useful to see you use it as a developer as I'm fairly new to exploring it's possiblities and correct conventions. Now watched and I'm very keen to use Playwright good video

[@victor1882]

Awesome content as always!

[@robopzijnwerk5999]

I would love a dedicated playwright movie :) & thx for all the other ones!

[@andreaskarz]

Ou yess, can't wait for a video about Playwright, please

[@vamvdotnet]

Very good UI automation demonstration video. Who masters, programs live. Congratulations!

[@chriswattsuk]

Superb video - thanks very much!

[@hodamohammadi4153]

this vedio is awesome, thank you so much Nick

[@GaryJohnWalker1]

A direct Playwright vs Selenium comparison would also be appreciated

[@robertgelb9385]

A great Playwright video would be where you use a macro tool of some sort to record the web page workflow, then use Playwright to validate it.

[@GlibVideo]

Interesting video. Would be great to see same for desktop application instead of web.

[@antonmartyniuk]

Very nice video. I see that Playwright is really better than Selenium. Please make a seperate video for playwright

[@priyanghanagarajan3353]

Hii Nick, Playwright video is extremely good. Can you make an exclusive video list for Playwright with C# in VS?

[@stuartmanton5227]

Very useful and well presented video. I will be checking out some of your other content. I have been following your pattern and trying to implement some tests for one of our sites. Also a bit of an eval of Playwright. The bit I am struggling with is enabling the video capture. This is set as part of the browser context options. However in the NavigateAsync in your BasePageObject you create a NewPageAsync from the Browser which gets a new context. So even if I set the options in the BeforeScenario they are lost. I could inject the BrowserContext into the Page but I wander if this will restrict things in some way further along

[@DiscounedTravels]

Thanks for the tutorial. How do we do assertion for text, buttons or elements on the page with .NET ? I have seen examples on node but dont work with .net

[@alexiosplomaritis9713]

Great video and thank you for the content. A question I have is, do you find that this ceremony and setup + maintenance bring adequate overhead for production environments? Do you actively use it and support it? Because a common issue is that the tools are great but on the long-run teams have to cut corners and it's always such processes that end up getting sacrificed.

[@nickchapsas]

I personally do use it both for BDD/ATDD scenarios and also for testing. It takes some time to get the whole team up to speed but once you do, you can benefit greately by having it.

[@lumsden169]

Is the code in a repo anywhere to have an explore. I would love to expand in this into how you test with multiple browsers using specflow and playwright

[@Jack-km7ec]

A video on playwright please!

[@siswaabadi3585]

I thing you should make a playlist or a paid course about using SpecFlow. Even better if you add playwright in them

[@noelfrancisco5778]

Cool testing tool, and awesome presentation. Does it gives a summarized report of all the test cases (successful and failed scenarios)? Thanks.

[@nickchapsas]

It does indeed and you can export them in multiple ways as well.

[@dof404]

Hi Nick, great video. Would you post the boilerplate example in this video to git so people can have a play with it? It's much easier to pick up something new if you have a working example to tinker with.

[@nickchapsas]

All my code from my videos is available for my patrons

[@codingdave]

Can we use this framework for WPF desktop applications as well?

[@cuongme626]

If I wanted to use a new context for each Page do you replace the line 'Page = await Browser.NewPageAsync()' in BasePageObject with Page = await context.NewPageAsync()?

[@naunihalsidhu]

Nick, what kind of Project is your Test Project ?

[@donvnielsen]

Would anyone have recommendations on videos or books on how to properly navigate through a SPA page created by Angular? I've watched various Playwright videos, and they all see to have elements with id:, which Angular does not use so much. I'm just not sure ware the acceptable practices out in the industry, and any recommendations would be appreciated.

[@PH1L1N4T0R]

My blazor app doesnt start when running the tests - what im a doing wrong? When i use powershell and "dotnet run" before it works.

[@ignaciomartin3068]

Have you tried running Playwright on a Selenium Grid ?

[@yevgeniyshunevych3216]

Nice video, thanks. Recommend you also to take a look at Atata UI testing framework that I've been developing.

[@nickchapsas]

Hello Yevgeniy. Could you please disclose that you are the creator of Atata in your comment, otherwise I will have to remove it, since self-promo without disclosure isn't something I allow in my comment section. Thank you for understanding

[@yevgeniyshunevych3216]

Sure, no problem. Updated.

[@rezarezash]

Possible to use this to test the .Net Framework-based web apps like ASP.NET MVC 5 or has to be .Net core?

[@IlyaArlenka]

For how long playwright will wait for element if it even not supposed to appear? If it is configurable, it looks like implicit wait in Selenium. What is the difference?

[@user-eq4kv9bz7f]

Which one is the previous video ?

[@acidrazor]

Can you do a video about how to setup specflow in a ci/di environment and what it would take to make it work? (im a n00b with ci/di)

[@fossegrim0]

For CI/CD, you don't need to do any SpecFlow manipulation. It is enough that the project has the correct dependencies

[@vitaliisumin64]

Basic examples are always look good. Show me the 5 years old code, that is what really matters. The form with 2 fields covered with 2 scenarios is a happy path for the test tool. When you have a page with a dozen of modules, each one of which consists of dozen of elements, and this page has to be covered with hundreds of scenarios, this is the moment when SpecFlow(or usage of elements definitions right in elements actions) starts to drag you down with its incredible inflexibility.

[@vitaliidolotov4226]

This is a matter of automation framework design and team experience. Since 4 years we already have 5k+ SpecFlow autotests and there are no issues supporting them all (tests fail rate is no more than 0.1%). Of course PageObject is strictly necessary for projects that size

[@raviteja-qk3br]

Hi Nick, i want full course specflow and C# page object with playwright

[@tejalali5115]

Hi, I want full course from scratch to rail time project. Have you this course

[@user-eq4kv9bz7f]

is there a github link for this project ?

[@ringchain4188]

Hi Nick this looks good for 2 pages of app but what if there are 100 pages in app. Do i need to create 100 beforescenario method in hooks and register each page instance or any other better way is possible. Pls advice

[@ringchain4188]

What i mean is that if the test scenario has steps which interacts with different pageobject classes. How to we handle such situation in before scenario.?

Thanks for showing a feature file focusing on the behavior. (By the way, please let me know what was wrong with my previous deleted comment so I can behave and follow the rules next time. Thanks)

[@nickchapsas]

Hey Christian, what comment are you referring to? Something might have been caught by the spam filter. I don’t delete comments, but rather shadow ban users.

@@nickchapsas got it. Thanks for the clarification. I am going to post it again in this thread and see what happens :)

This was my original comment: Thanks for showing a feature file focusing on the behavior rather than describing the UI implementation. There are so many bad tutorials out there encouraging bad practices for writing feature files. By the way, since you mentioned the page object "pattern," it would be nice to see a video of you talking about an alternative to page objects: the Screenplay pattern. Also, a cherry on the top would be a video where the driver pattern is demonstrated, where the very same feature file and the very same step definition can validate the behavior of the system against different layers, like having one driver implementation for executing against the domain model directly and another driver implementation for the UI. Here is a link to an example from specflow team that demonstrates that, choosing what implementation you want to run your test against driven by tags: docs.specflow.org/projects/specflow/en/latest/Getting-Started/Getting-Started-With-An-Example.html and the source code: github.com/SpecFlowOSS/SpecFlow-Examples/tree/master/ASP.NET-MVC/BookShop

[@nickchapsas]

I personally prefer the screenplay pattern and I thought I did mention that I. The video. the problem is that it’s hard to make a video about the tech and also show the screenplay pattern because it is more elaborate and would bloat the video runtime

[@queenstownswords]

Hello Chris, thanks for the video. A faster way of generating the step methods is to add the specflow extension to VS then right click on the feature scenario, then select generate step methods (copy to clipboard). You kicked off the site before running the tests, how did you do this? Please share your thoughts about testing blazor with bUnit vs specflow+playwright.

[@RAM-ff8dy]

Is it possible to make a video on Azure AppGateway?? If we create a service then we will have the service URL, Lets say if we have the swagger link for that service then anyone can access, so for the customer faced URL's we can secure that service URL using the app gateway right and also if we want to pass the customerId parameterid in the query param then its not a good idea so we can send it using the JWT token.. 1) Create a Web api endpoint with asp net core which also have the customer info properties needs to pass in the querystring/body. 2) secure the service URL with app gateway which have the subscripion key so that only the services which want to consume needs to pass that subscription key 3) instead of passing the important customer details in the header/queryparams we can send it using JWT.

[@andreaslassak2111]

Expalin that container more pls. thanks.

[@SirBenJamin_]

Is there anything like this for WPF?

[@cai0]

There seems to be many decent ways of testing web apps lately, but not much for desktop unfortunately. Hopefully someone will reply to your comment and prove me wrong :)

[@oggatog3698]

It's been a few years, but i think UIA (Microsoft UI Automation) is still the best option.

[@oggatog3698]

Snoop WPF might be helpful too: github.com/snoopwpf/snoopwpf