ASP.NET Community Standup - Blazor App Testing with Playwright

foreign [Music] thank you [Music] foreign [Music] [Music] foreign [Music] [Music] thank you [Music] [Music] thank you hello hello everyone welcome to the March 14th Edition of the Blazer community stand up um today the topic is going to be Blazer app testing with playwright with us today we have Debbie O'Brien from the playwright team hey everyone John Galloway all right and we have myself I'm McKinnon and I'm a developer on the Blazer team so before we jump into uh today's topic let's go over some community links so John would you like to uh thank you all right thanks so first on the list we have this really cool Library called blazer.webshare and what this allows you to do is have uh is utilize a a platforms like native share functionality from within a Blazer app so it gives us nice c-sharp wrapper I can play this video here where um where we can get this kind of like share functionality without even having to write a single line of JavaScript so you can see they're going to click the share button and it brings up this nice share dialog and the code is I mean it's very easy to set up and easy to use it's just a single call to the share async method pretty neat so if you need the functionality for your Blazer app give this Library a look next we have this pretty cool app uh it's like an open AI playground app and it looked like a fairly sophisticated UI um that utilizes I think displays a server if I believe yeah Blazer server so if you need an example for you know if you're trying to write something similar like this or if you if you want to use the app for what it is which is an open a playground um certainly check that out and next we have a pretty cool Community project called blazerbindings.maui and this is a fort from an experiment that our team did um a while ago called mobile Blazer bindings and um normally a Blazer it runs in like a webview context but we did some experimentation where um where we tried generating native uis with laser and this is from my understanding a continuation of that and it has Maui bindings so rather than running in like a webview I'm now it actually generates a native UI so here they're using like a stack layout with labels and buttons but it's all like Razer syntax so this is a pretty cool like interesting project I'm curious to see where this goes so um give this a look if you're curious about it next we have a Reddit post and this is um someone describing their experience using Blazer server for a fairly large application that that makes money um I would recommend checking it out it's a pretty interesting read and the site is pretty cool itself and um yeah just a quick little cool fun read next we have an episode of Carl Franklin's Blazer train and it's an interview with with Steve Sanderson from the Blazer team and the topic is on Blazers united we did a Blazer United um topic for last month's stand-up and uh this could be you know if you found that interesting this could be an interesting video to watch that maybe goes you know a little bit more in depth on some things so uh yeah that's pretty cool and finally we have an avalonia Blazer Library so this is a library that lets you use Blazer hybrid um in an avalonia app which is really cool and I don't think it's been done before so if you're if you're interested if you're using avalonia and want to use Blazer hybrid uh give that a look and I think that wraps it up for our community links so um so I guess we can jump right into the right into the content so yeah uh Debbie would you like to give like a general overview of like what playwright is and what its advantages are sure so I'm hoping that everyone listening knows already what playwright is um but if not just in case um so playwright is basically for end-to-end testing across um all browsers so if you want to test you know you're on a Windows you want to test Safari you can totally do that on playwright um playwright is amazing and it's basically going to solve all your problems that's what I like to say so if you are out there writing tests and you hate writing tests but because your tests are flaky playwright is going to solve that problem because you're not going to have any flaky tests anymore I mean you might have one or two because the world's bad tests but really if you do things properly there'll be less flaky tests thanks to Auto waiting uh by by playwright uh the playwright web first assertions um those assertions if you're using those you're gonna you know have Auto waiting and retryability out of the box um locators we have a fantastic locator API which goes and does accessibility first so if you're writing amazing Blazer applications and really putting the user first then playwright will actually also look for those locators uh get by roles button link Etc and ensure that you know you're not going to have those flaky kind of um selectors that previously were in previous kind of systems right um and then some great things that play right as the tooling around playwright uh for example the generator so being able to generate your test so if you're new to testing and you've never tested before this is a really great way to get started this setup is so easy um we're going to look at that later and being able to write a test um just by like clicking around on the website makes it easier for someone to get started testing and also quicker for someone who's very good at testing but just wants to get the job done quicker to go home and go for a run right um so yeah the test generator is awesome and then obviously the trace viewer this is one of my uh favorite tools I'm hoping that you're going to show this um later in the demo but the trace viewer when your tests do fail on CI and sometimes it happens and then you're like oh my God what do I do now to be able to see a trace of that test and debug that and actually open up a on Snapshot and I understand the code it's not just reading looking at a screenshot or watching a video it's actually debugging kind of live dumb snapshot of your actual trace of the test so yeah all these tools make it great and then the integration with GitHub as well everything kind of like just works out of the box uh in my opinion so playwright is amazing if you haven't and are only starting to write tests you should totally start learning to write tests or playwright and if you're using something else you should totally move and youth player and I know you can say it you can stay with flaky chests if you want um and one of the great things about playwright is that tests run in parallel for free so it runs super super fast so if you've ever run tests on anyone any other kind of system or framework and you go and use playwright you're just going to notice straight away wow this is so fast um did I sell it good yeah that was amazing and we are going to show some of those tools um and the demo that I'm about to do and so yeah everyone's in for a treat it's it's pretty cool great so uh with that I guess should we dump should we jump into the demo then yeah good to meet you here let me switch cool cool great so the goal of today is we are going to use a playwright to do end-to-end testing for a uh for Blazer app and I'm going to show this for Blazer webassembly and field laser server but we're going to start with blazer webassembly so uh what I have right here is a Blazer webassembly project that was just created with a file new project um you can do it from the command line two um it's an aspen it core hosted Blazer app and I haven't modified it from uh from the original template except for adding a few solution items that you don't really have to worry about so um yeah our goal is to use playwright to test this app and if you're not familiar with the Blazer project template I'll go ahead and just run it real quick just so we're on the same page about what it is we're trying to test here so let me get that running first time building so it might take a little bit longer and there we go so here we have a counter page with a simple click Beam button that increments the counter and then we have fetch data page which which fetches weather forecast data from a server and displays it in a table so we want to test both those things both those pieces of functionality with playwright so how do we get started well let's uh let's add a test project so we're going to be using n unit for this demo by the way you can use Emma spill or sorry Ms test or X unit as well but just for the sake of this demo we're using end unit so we can do.net new end unit and then call it laser wasm playwright DOT test and we'll put it in a test folder and there we go we've just created the project now let's go ahead and add it to our solution so we've got sln add and we'll add this project to our solution so if we go back to vs and we load we can see now we have this test project awesome and uh but of course we're using playwright so let's add playwright to that test as well so we'll do net add package Microsoft dot playwright or yeah playwright Dot and unit and this is going to add like um angular support for playwright and people go ahead and do that great so now playwright is part of our app uh and now I'm going to do a donut build and what this is going to do is it's going to give us access to the playwright CLI and uh by default playwright doesn't install any browsers on the machine is is that correct Debbie yeah and Dot net yeah yeah okay so so we need to go ahead and install um the browser is using the playwright CLI and I think when you run that command it installs it's a standard thing can you can you bump up the font size a bit oh yes of course sorry about that is that better yes yeah okay so uh yeah the command I'm gonna run is going to be uh seven uh we're gonna debug not seven because I'm on that seven and then play right sorry one more Interruption if you move the console up just slightly then there's a little more space Oh yeah because our faces are blocking it yeah it's the bottom there yep yeah could we actually do you think we should change we could change the layout so we're on the side so we can but the problem is it shrinks slightly oh got it okay that's fine that's fine we'll go with that I'll just bug you about font size if it gets smaller sounds good okay uh so so we're gonna run the install command and this is going to install I think uh Chrome Firefox and webkit if I'm not mistaken yeah yep so um and and that's one of the cool things about playwright is you can use webkit to run tests uh on Windows right that's that's normally not easy to do yeah yeah it just works it's awesome so we'll go ahead and run that install command and I've actually ran that previously so I think that's why it was so quick um but you know it might take a few seconds longer if it's your first time so uh all right let's go ahead and write a playwright test so I'm going to jump straight into the docs yes somebody reads the docs love it that's one thing a lot of times people just skip over the docs but the docs exactly the docs are amazing um yeah so we'll go ahead and copy this test and we will use that instead of the default one and there we go so I think we should be able to run it now um you can use whatever whatever IDE you want um I'm using visual studio so I can run the test from vs but you can also run tests from the command line so I'm going to show that first we'll just do botnet test and this is going to run our test and hopefully it passes so we can see it's going and could you imagine if it failed and the docs were wrong oh my gosh that would be hilarious yeah so um but thankfully it passed but can you really trust that it passed because uh we didn't see anything we didn't see it open a browser or um like it could just be saying that I passed like we don't have any proof so how do we know the docs are good so it has to pass so it has to be right right yeah but sometimes it's nice to be able to debug and see what things are actually uh doing right so uh to do that we're going to disable headless mode and headless mode by default is enabled and that just means that when the test runs you don't actually have a physical browser window that you know comes up on the screen and shows what's happening it kind of runs behind the scenes um but we can disable that by using.test if I can spell it right.net test and pass the argument playwright dot launchoptions dot headless equals false so we're going to disable headless mode and run it again and the browser window will pop up briefly oh I came up on my second monitor that's great so yeah let's uh it was so fast I couldn't even I couldn't drag it over it was just instant so uh to fix that let's add a weight page not pause async and what this is going to do is it's going to pause the test when it gets to this line and allow us to use the like playwright test inspector to step over each of the uh each of these lines one at a time so let's try it again and this time hopefully it will all right so we have came up on my second monitor again but now I have time to drag it over so we have this um this chrome window and we're on this page.pose asyncline and we can step over one at a time and look at all the things that are happening so we can see these green check marks as each of these assertions passed we can see what's going on under the hood um like what playwright is trying to do and if I step over this one so this should probably pass and then if I continue we can see the test passed so very cool so you can you have like a debugging kind of experience even if you're not using like an IDE with a debugger which is which is pretty cool and uh but if you are using an IDE like I am you can use uh like breakpoints as well so I'll demonstrate that as well oh and we want to have headless mode in Visual Studio as well because right now I was just running the test with the Headless flag um but if you're running from vs you can use a run settings file so there you can configure the playwright launch options and just have set headless to false so every time you run from vs it's going to run in headless mode so let's now debug from BS and show that it works the same way now when this opens up can can we just like slow this down and go through what's happening step by step and can you zoom in on that inspector so because it's kind of really small oh yes um I can actually so I don't think it's going to show the inspector this time because I'm running uh in vs but I can go back and do that yeah if you want that would be cool yeah okay great I'll just quickly step through this part then so um I'll just keep this window on top and you can see that debugging Works largely the same way um I'm just going to go through this quickly so we can get back to the other thing and if we continue we see we get a nice little green bubble and visual studio saying the test past so um so yeah you can use playwright and whatever workflow you are most comfortable with so let's go back to this other thing and oh we need to add pause async again yeah and then yeah let's let's go a little bit slower um all right here we go there's a couple of cool features in the playwright inspector um so when it opens this window so just like make it bigger just like probably 150 percent I'll try to stretch it out too a little bit yeah excellent so this is your actual test code um that you're that is in your editor so again like what you went through with the editor here's your test code here um but this time as you're stepping through that it's highlighting it on the page so we can step it to the first one um so it's going to that page the first one was go to pageplaywright.dev the second one is expect the title to contain a substring so it's expecting the title of the page that's in the meta title right so it's looking in the meta title of that page for something that says playwright and then it creates a locator so you can create a locator so that you can reuse it again and again so you don't have to like you know um have to duplicate code so it's just keeping it drier so we're calling this locator get started and we're saying that get started is go and get by a roll so an area roll of a link on the page and I think the link was named get started right so you can see as you're highlighting it you can see over in the browser window underneath playwright is highlighting that as well to show you that that's what it found now playwright found more than one it would say one of two or one of three and then you'd know that you have a non um unique locator and you'd have to go and try and improve that a little bit so the next is using the expect library and it's saying I expect the attribute to be strictly equal to the value so we want it to have the href with docs uh inside it so it's looking in in that and looking for that and then we click on it we click the link and then we expect the page to have the URL which intro it doesn't matter what comes before it because we might change that but we need to make sure it's the intro page that we're linking to and yeah this is the playwright inspector and you've got full access as we seem to go back and forward through the test but you've also got the pick locator button uh where you can at all times if you kind of weren't sure if that locator was was okay and you can hover over and it's going to give you that a different locator so you can kind of play around with it at all stages um during your while you're running your tests right um for those people who don't like dark mode you can even turn that into light mode at any time perfect wow I'm so glad we have a playwright expert with us because this is this is also cool I yeah wow awesome yeah and this is also used for the recording so if you like you I don't know if you're going to show this later or if I'm jumping the gun in here but you can this is where you would start the recording and start recording a test in here and so you do that all from the playwright inspector yeah yeah I am actually going to show that uh in like five minutes so cool cool yeah it'll be great nice awesome that was that was amazing so um so yeah that test was just testing the like just testing playwright.dev um but what we're here to do is test our Blazer app so how do we hook up those two so it works seamlessly well I have a little script prepared that's going to add some project references and helper files um and uh it's going to and I'm going to kind of show kind of what it did and how the Blazer integration works so here you can see we added this Blazer test class and what this is is this extends the page test uh kind of like text fixture class that that's part of playwright and adds some Blazer specific functionality so what this is going to do is it's going to start up our app before the test starts and then close it down after the test ends so we have Bluetooth setup and Placer tear down and what's cool about uh the way this works in particular is you've added a reference to microsoft.asp.core.mvc.testing and this provides this like web application Factory class and what this allows you to do is spit up an instance of your whenapp of your web app that has an HTTP client that runs completely in memory so rather than having your app bind to a bind to an actual address a localhost it will it like the the HTTP client runs completely in memory so you you manually like give it requests um without actually going through the network so this is really nice because if you have for example test running in parallel you don't get things like Port conflicts um like if two tests try to bind to the same port um and things like that so you get parallel test functionality basically for free by doing it this way and by the way this code uh is is available open source I think we have a link to that that we can share if you want to if you want to give it a look and follow along but um but yeah so uh yeah the way this works is we first just create the HTTP client and then playwright allows you to intercept HTTP requests to specific uh routes so in this case you want to capture all requests that go to our apps base URI and then what we're going to do is uh kind of translate that request into a format that the HTTP client can understand will send the request and then get the response and then call fulfill async which will which will basically send the response back to the browser um from the c-sharp code rather than going through an actual server so uh so yeah that's pretty nice uh so and we also by the way just generated a stub for the counter page test so our goal is we want to make sure that when the counter button is clicked on the counter page it increments by one and then the text updates two so you want to write this test uh the problem is I'm lazy and and I don't trust my coding abilities and I don't want to write this test manually so but thankfully playwright has something to help us with that and that is the Cogen tool so let's give that a look I'm going to go that's my favorite yeah it just saves me so many hours of work it is very cool so I'm excited to show this um let's actually first start up our server so we can connect to it with a Cogen tool we'll take the URL that it gives us and we'll pass that to the playwright CLI so here we go use the crl and we'll just do code gen and give it this address so this will launch here we go here's our playwright inspector and we have an instance of our app so because we're targeting uh end unit we want to switch this to end unit right over here and then we'll just zoom that in a little bit so we can see what's going on yep is this better yeah yeah and you can see now the record is red right so we can see we're in record mode whereas previously we were debugging that wasn't in that red mode yeah yeah exactly so um yeah so now we can do is basically pretend we are the test and go and do things so I'm going to click on the account user where the user who's using the application yeah that's a better way to put it so as you can see as I clicked on the counter link uh you have code that was generated for the action and then if I click on the click B button it does the same thing so and then I'll we probably want to do something to check the content of this label here so uh we'll just go ahead and click that and and now we have some code that we can just copy and paste into our test so how neat is that let's see that's my experience needed yeah it was I yeah the the first time I tried that it was it was so easy and I didn't like it just so intuitive it's it's amazing now really important um what he did was he copied and if you close it without copying it you'll lose it and you'll have to re-record it so remember that that is true I might have accidentally done that I will say so there we go we have our test code and I'm actually just going to fix this up a tiny bit so we don't want to go to this hard-coded uh address we'd want to use whatever address the test gives us so let us do um root URI absolute URI that way it works like regardless of a specific part and then also you don't really want to click this text I think um we could just wait for async I think to make it plate for it to be visible do you think that's a decent approach Debbie yeah you need to add the instructions so they expect um expected to be available would be probably better yeah so and actually have a slightly improved version of this so let's connect out that line and yeah so playwright doesn't generate the assertions it generates the user actions so you can always click on something to kind of get that into your test and then go and refactor it and say right you should be an assertion a user's not going to click on you you just want it to be visible on the page but it's a good way of like putting it in there and then just modifying it yeah absolutely Yeah the code gen tool is so nice for getting like a nice outline and then you can just add whatever assertions you need um it's great so so I've just updated this so um if we go to the counter component which is what we're testing uh you can see this paragraph has like a status role so we can use that to select that button and then expect it to have uh have this text current happen and I'm just going to interrupt you there but you can see how automatically playwright has chosen like area roles the role of Link the role of button without you having to be like knowing accessibility and this is now like a very accessible um way of locating that element on the page which is super cool right because now you know you also know that your Blazer app is accessible which is great right yeah it's it's amazing it's so easy so if I go ahead and run this now then we should see that this test well hopefully it passes we'll see hopefully otherwise you have to fix our app all right it opened on my second monitor and there we go awesome so it it works and we can just make it fail as well um real quick to show what that experience is like so I'll just like make an income Redtube instead and so then the text will be like current count two and we can see like the error messages it provides are you know very nice and helpful and make it very clear what's what's going on um this also shows that it's not just saying it passes every time for no reason okay there we go so expected to have text current count one but what is current count two so um so yeah we can see that our test is actually doing what we want it to do I'll switch the specs so it doesn't fail and can we run this when the in the headed mode just to see that play right clicking that button I know it's gonna oh yeah really fast like move it over to the right screen yeah I will add a break point and show that so oh yeah let's uh let's let's do that debug test okay here we go so and let's turn this to the top by the way this isn't related to My Demo at all but if you're wondering how I'm pinning that window to the top there's this really cool thing uh app called power toys and um and it's it's if you have a Windows machine it like adds a bunch of kind of cool like Windows features automatically kind of and one of those is like pinning window to the top so as I switch between those I'm not losing focus or like that thing's not getting shoved behind the window so just I I thought I'd mention that in case you know someone asked it in the chat how that's happening but yeah so we can step through one action at a time it loaded it clicked the counter button or it's going to actually if I step over now I've actually clicked it and then uh you can see the count turned into one and this assertion passed and if we continue we'll get a green light cool so there we go and that is about it for that um I also something else to mentioned earlier was that this Blazer text class allows running tests in parallel really easily so I'm going to add another test just just to show that that works and that it works and that it's fast right so um we're going to add a fetch Data Page test this is going to verify that the on the fetch data page it fetches the weather forecast and has the right number of rows and everything so if we go here we can see that the test is going to you know click on the fetch Data Page make sure the table is visible and then it's going to make sure that their fiber is visible right so if we go back and run all these tests at the same time we'll see that in visual studio all the Spinners all the loading indicators are going to be running at the same time showing that they are running in parallel rather than having it choosing arbitrary order and doing things like that oh and you know what I just realized uh is I have a pause async still so I'm just going to click it's on my second monitor you see so it's running okay it actually passed anyway well there we go so you could kind of actually you know what and let's let's fix it real quick where's the Posse sync no you removed it oh maybe I didn't if you have to rebuild or something well maybe it's the fact that I still have something open that could be it let's try it again so I'm going to run all the tests and they're going to run in parallel you can see the browsers pop up there at the bottom of your screen yeah yeah exactly I'm done faster yeah yeah there's the proof that it's working um yeah yeah they'll show up on my second monitor I'm not sure how to change how it works by default but um but yeah that's an option but I'm afraid that's gonna mess up other things too um okay cool yeah so I think that's about it we wanted to show for a Blazer web assembly I'm gonna switch over to show how to do this Blazer server and we're also going to show a few cool uh playwright features so I have already pre-prepared it plays a server version of this app and I'm not going to go through and like re-add do all the setup like that I did before because you already know how to do that now um but I will call out a few things of note for um for when you're using Blazer server so one thing is this Blazer test class is a little different um because with the Blazer server app you have the additional complexity of having a websocket connection and uh with the Blazer web assembly case we were like able to intercept HTTP requests and do our fancy like in-memory HD HTTP client thing uh that's harder to do with blazer server because you also have a websocket connection and that can't be as easily um like spoofed I guess so what we're going to do for the server case is just run the server normally and it's going to bind to an actual port on localhost and that that does make running tests in parallel a little bit more complicated and I actually haven't done that step for this demo just to keep it simple but um but yeah that's just something to note when using Blazer server uh that you'll have to run the host as you um as you normally would so uh so yeah let's go ahead and I have I have the same test counter page test and fetch Data Page tests and this works the same way I'll just go ahead and run this to show that that is the case and then we're going to uh talk about a cool way that you can verify and yeah so so you can see those tests weren't running in parallel there it showed one of the other um so but yeah that's just like a little limitation of like when you're using Blazer server and uh so yeah let's um there's another really cool tool for like debugging tests when you don't have access to um like a live debugger right so so when you're testing when you're doing these tests locally you can do things like add break points and step line by line or you can use the playwright inspector and do that but if you're running like a c and a CI environment um you don't have access to those tools really directly so how do you how do you debug that case and um and playwright has this thing uh called uh is is it play like is it play right tracing Trace viewer Trace viewer okay yeah so what you can do is basically capture a trace like a a detailed summary like step by step of what the test is doing and then right through actively go back and see what your test did and then so if something went wrong you could um you could pretty easily find out what happened so we're going to do tracing on this counter page test so uh I have some Snippets here that I'll just paste in so we can call contextracing start async to start a new Trace you fix the indentation there that's bothering me something is messed up though with my um I have a vs extension that seems to have flaked out because it's not letting me highlight things uh let's see if I can just do oh this Auto format it that works okay so and then we'll stop recording a Trace the same thing all right so what we're going to do is just start recording a trace at the start of the test and at the end we're going to call stop by Sync and save it to a file called trace.zip so let's run this test and collect the trace so you're not even going to put it on CIS you can look which is kind of very cool so now we're going to do is open that Trace file so I think it should have created a trace.zip file so we're going to go to the Blazer server app and I think it's Blazer server playwright test and we're going to use the playwright CLI again to open that Trace file that we just generated so we're going to call this show trace like program and there we go the traceviewer opened and we can see each of the operations that happened so you can see like it first went to this page I clicked on the counter link then I clicked click me and then it performed the assertion and what's cool is like for each of these steps you can see what the state was before um and after each action took place and you also get this nice timeline of like how long everything took can you just zoom in just there a little bit so we can kind of see what's going on a bit more uh yeah zoom in yeah that's fine it doesn't matter if the what's in the middle goes smaller just kind of like zoom in and oh yeah yeah not not that much is this okay or that's good that's good that's good so yeah at the top is a timeline and that's like an image snapshot so you can kind of like hover back and forward which just gives you like an idea of like maybe you had an animation you want to kind of see how that's running and things and you can see which action uh was activating that particular um screenshot and then over on the left you have the actions and when you click on the actions it's showing you in the middle a Dom snapshot and it's showing um as you can see you can have the action the before and after so you can see each time if you go to the um where you clicked something this one's a bit boring because it's just going to the page right but when you click the button yeah and if you can click on like before and after you can see the count change to one and the action it should highlight the button if you click on the action yeah you can see the red dots you can see exactly where playwright clicked and that's really good for debugging because you might have like it might be out of viewport or playwright might have clicked somewhere and it's not getting to the to the right place so this is um really good for that then you've also got the metadata there where you can kind of see you know was this running on chromium uh so the metadata is beside the actions the other tab uh oh yeah yeah so you can see it's running on chromium and you can see the width and the height and isn't mobile no this is false so this is running on desktop um and you can see the amount of actions and events there and then over on the other side you've got the calls you can go through um what locator um was used is it strict and the whole log for that test you can see what playwright was doing is attempting to click the action it was waiting for the element to be visible and enabled and stable it scrolled into view if needed it finished scrolling it performed the click action the click action's done waited for the schedule navigations to finish and the navigation finished so you can really understand what's playwright is doing in your test and then you can click on the console maybe you had a console error you'd find that here the network if you had Network requests there's some Network stuff going on in there so you can see there and then you've got the source code for the test and this is really useful because this is like a pwa that you could then zip and send to somebody else and then they could kind of see like oh this is the source code of the test this is where you're going wrong and they could help you also debug it and then very new feature that's literally only released two days ago is that little pop-out button above the uh Dom snapshot so you click on that and now you've got a whole new window for this and you you didn't even know this you see you got to click around and now you can open up uh the devtools um and inspect this even further that is so cool I had no idea that was a thing yeah so now you can kind of like go in there you can change the CSS and you can literally like modify that right there and that can help you understand why the CSS class has changed why it's this particular color and what it should be and you can like it you can just you know use the devtools and debug it just like you would if you were your normal application so cool awesome wow yeah so I think in terms of the demo that was all I that was all I had planned uh Debbie is there anything else you think I should I should show that I don't know about I've been flagging some questions too oh yeah let me try some of those here um let me see question here about this playwright work with Azure functions uh yes um it does I think there's a page in the docs on it um and if there's not um ping me and I'll find you a link but uh yes okay uh question here if the page is slowly building redrawing through JavaScript does it detect that so there's a certain time that it will wait um and playwright's like a really fast user right so if you want to understand what playwrights like put your website into like a 3G kind of state and if the JavaScript is taking more than five seconds then playwright's gonna go that's too long because no use is going to wait that long either now if you have really really bad code because you know you've got this Legacy project going on and obviously you should fix your code but so you can't for whatever reason then you can like you know change those timeouts so the playwright will wait a little bit longer but fix your code first would be obviously the better option oh and actually I wanted to say something else about that topic um when using Blazer server in particular when you when you do the initial page load that is something you have to worry about actually because um places server has a feature called pre-rendering and what that means is uh it'll actually the first time you visit the page it'll render static HTML before it establishes a websocket connection to the server and playwright is so fast that sometimes it'll like do a bunch of interactions on the page before that websocket connection is established which makes the page interactive so if you are using Blazer server um you should probably when you when you call go to async add this extra option to wait until the network is Idle before continuing because if we were to remove that um the test might be flaky because playwrit is so fast it will just like quickly navigate and do things and it might be like faster than any realistic user and that uh that could um it's just something to watch out for so like if I run this test there's a there's High likelihood it'll actually fail because of that reason um okay and we'll see if it does and yeah actually so you can see it pulled up on my other monitor it it clicked the clicking button so fast that it didn't that it was before interactivity was enabled so that is like I got you to watch out for with boys or server that was exactly Jay Sakamoto I had some questions on that questions on on the timing and stuff for that what's the initial testing yeah yeah okay uh let me see is it possible to organize multi-user load tests um so yeah we do have like Azure load testing um so definitely check that out um I haven't done much load testing myself but it seems pretty easy and pretty cool I watched uh John do a demo and it was very cool not you John the other John [Laughter] well let me see I think that's most of the questions if you have come in here let me see I can go through a couple that I see in um you're not gonna be able to pull them up but there's a couple of questions there about selectors and can you use CSS selectors um and you can but we totally recommend not using CSS selectors for the very reason that and I'm a front-end developer so uh I'm the type of person that will basically change that front end change that code I will change the CSS every couple of months years we're going to always change the code we're not like the back-end developers everything's solid and steady so the front end changes a lot um and you don't want your test breaking because the front end developer came along and changed some CSS or changed added an extra div in there and added change the HTML so you want the test to really represent um more of what like the user is seeing right the user seeing a button that's an accessible role and kind of like look at the accessible roles and if that role changed you might want to know about it so if the front of developer changed um and I'm saying front end but it could be the back-end development building the Blazer site but you know what I mean um but if they change the the button to be a link then that's something that you might want your test to fail because then that's not going to be accessible on you know other devices and stuff so you want to know about that so yeah make sure it's kind of role-based as much as possible obviously there are times when you can't uh use role-based for whatever reason and you do have test ideas that you can use in those scenarios um and use CSS as the last resort that there's no other possible option um but there should always be another option so definitely yeah and we have a page on the docs on on that so check out the locators page and that explains uh what you should use when you should use it um and there's a couple of questions there that kind of went into the test generator so the test generator will always generate the most accessible roles possible it uses filtering as well to make sure it filters the right one so if you did have kind of like you know a product card and inside you have that button in there and the six buttons on the page it's going to filter out by that product to get that right button so it's not going to have like those um uh non-strict kind of you know the six possibilities of this button right so it uses filtering it does all that for you um so it really makes your life easier there are times where you might have to come along and change because maybe it filtered by something and you wanna sometimes you learn by your code actually The Test shows you that like this is probably not gonna be great um maybe I should fix this and add a test ID or maybe I can improve this more or make it more accessible by turning it into an article for example um so yeah that's something to kind of watch out for a playwright generates basically very resilient tests so do use the locator generator the pick locator that we showed and also the test generator to help you write better tests I hope that helped I I didn't see a question on this and I'm not I forget if you covered it but I've actually played with video recording um like so it can do snapshot pictures and also video did you cover that or yeah so you can record videos um I always say like videos are so like old school that's like something that we did in the past and why would you want to watch a video when you can play with the trace viewer like we just demonstrated which is you know much more interactive and much more fun and you can go back and forward and and actually change the CSS right so you can totally record videos if you want to videos are heavier as well so keep that in mind on when you're doing that um some people record screenshots videos on traces and it's like you know what if that makes you happy go for it but I just say traces and we totally recommend the tracers on the first retry of your test um don't record traces always just because it's cool because then on your CI you're just gonna it's gonna be too much just don't do it um but locally if you're debugging I always use the trace for debugging it's it's so much better than just going through uh the debugging options in the in vs code yeah I I was sharing with Debbie before the call and she was completely horrified by my use case but I've been using playwright to automate capturing a bunch of screenshots for a bunch of URLs that I'm using to record a video with and I'm not running any tests but I am using like doing all the it's super easy to like select the page like remove like I'm modifying the CSS I'm applying all these things grabbing screenshots and it's like totally working and it's like so much easier so not intended use from what I was told but it works there's a lot of people scraping and doing things doing cool things for sure there's so many possibilities um but yeah like I said If It Makes You Happy John it makes you happy just use let's use play right there was a question from speaking about CI um is it is it possible to integrate with Azure devops Pipelines so I like the way you rephrase the question there um and change the easy word to possible yes it's totally possible there's a page um I don't know how easy it is because I've never done it uh GitHub is my easy option and that's like super easy um but yeah um it's just read the docs and um there's a page on it that explains everything you need to do and just follow along should be easy enough let me see I think that's all the questions I'll be honest I have been paying attention I'm super interested in this I've also been well we've been talking getting the blog posts out because um and I don't know if you want to go to the home page of the net blog those posts are out now so that is exciting this is for if we have there we go so.net .net and then we also have uh the asp.net post and the f post route so awesome is done at 8pv2 available now it is it's up on so the the link goes to that oh yeah and actually yeah if you click [Music] um this is a new page we set up there's a you know self whatever I'm doing a little ad here but this is a page we set up to make it easier to find out what's new in the past we would always link to a um page that had these weird things with like do I need the SDK or do I need this or that you know which build so this is like shows that and then if you scroll down a little bit it shows also some things about like how you can get involved where the road maps are how you can um you know jump in the Discord and then we're going to keep the part below there updated with like videos that show what's in uh dot net 8 and then the links to the posts as well so yeah awesome beautiful um so that's that and um yeah and then the poster out too so that's all very cool one neat thing actually which I am thinking about with um with playwright is there's a quick grid and I'd be interested you know like testing out quick grid stuff that that would be a cool use case there you know that would be fun to try yeah yeah definitely yeah yeah um that's that's actually one of the new features in.net preview too is we had that experimental quick grid package um that a lot of people were using and that's now part of the actual framework so um so it's it's it's out there and we're going to continue supporting it if you go to the ASP so it's not linked just yet but if you click on the like if you just go to the front page of the blog I guess yeah there it is you scroll down a bit like Dan Rod talks about that in there a little bit more so he talks about how to use the quick grid and as a screenshot of how easy it is it's pretty cool that you can in those few lines of code you can set up a grad with sorting and filtering and all that stuff yeah awesome you know you know questions and I'm not sure if we got to it question about authentication like aad and stuff like that so um post on on how to use how to authenticate with um what is it Azure um as your a day what does the other a days done first as yourself yeah so um I would check his blog post out if you're wondering I'm going to say like there's a blog post for everything you're probably saying where can I get all these blog posts from so uh we have a Discord server um so the playwright Community lives in Discord and um they do some amazing stuff in there there's a lot of blog posts being shared they're creating a lot of videos and you could literally go in there and search uh for something specific and you'll find a blog post related to it and you can ask any of the questions uh if I didn't answer any today you can just go into Discord and create a post it's like a forum style so it's really nice uh and then someone will come along and help you um or it could be us the team as well um with those answers so definitely join our Discord server um for articles videos and we do some community events on there as well or we just go live and start talking about playwright and you can totally join that too um probably John is going to paste that link in the chat and I can see he's typing so he's probably gone okay how many again I had to search for it I was actually replying to another comment uh it's in the footer um if you go to the footer of the docs you'll find the Discord link so it's really easy to find foreign all right so now everyone knows where it is so that's kind of cool too great and I'll even throw it I don't care I'm gonna create a banner I like creating banners I love it I love it all right look at that there we go and there's a couple of questions about web kid and we didn't show actually you didn't show it opening up the browser webkit but it's really easy to open up different browsers and it does always test on the latest version um you can test on previous versions if you need to um and like always try and keep playwright up to date because every time playwright gets released um it's using the latest version because the browsers get released every month right so it's using the latest versions of those and it's using the version before it goes out of the public which means you can test your tests against say something changed in Chrome for whatever reason webkit webkit's always the one that you know changes things and breaks people so you can test against that before you know it goes out there to users and fix those issues um and there's a whole page in the docs on browsers so uh check that out and how to do that yeah um awesome yeah is there anything more we should cover uh I'm just scanning true I I seen one one person here alien said he didn't want to go for a run that's totally fine you can write your tests and then go cycling instead and you can emulate the viewport for phones as well someone just mentioned that as well so this is uh something we didn't cover where you can basically emulate a mobile device and then run your tests on mobile Safari um pixel whatever and all those kind of devices tablet Etc and there's a page on emulation that will go through all that as well they should have nice screenshots in that page as well I think I remember creating um so check that out yeah that in my terrible screenshot app that's what I'm doing by the way because I want to use them for tick tock as well so I do widescreen and I do narrow and so I set them to that like narrow device and then I also blow up the font size and I also change around a bunch of like remove a bunch of stuff with CSS so anyhow being able to test with the different formats isn't it yes and you can also emulate color scheme and geolocation and all that kind of stuff so there's a lot of things that you can emulate which is kind of quite fun especially testing dark mode in a website right we're all going dark and light mode so you can like actually emulate a specific one um someone asked a question about other Frameworks so playwright basically just tests like the the um the end-to-end tests so it's testing like the front end so it doesn't really matter if it's written in Blazer if it's written in view it's it's not it doesn't matter right when you're testing end to end um it's the code that's in front of you um so no problems on testing across any front-end application and I don't remember the question but I remember seeing something so I'm kind of like answering a question I don't remember the actual question but um it was about component tests and into end tests and which you should use um and basically like yeah there's a limit right how much do you test right there's unit test integration test end-to-end test so I always say like the the more you have end-to-end tests the better and this is like taking the testing triangling and turn it upside down because in the past the tools were not there playwright didn't exist for example the tools were not good enough to make end to end be the one that we should always use so everyone built you in a test because that's what the tooling um helped us to build and now it's like no let's test closer to the user Let's test end to end first if there's only one test you can write make it an end-to-end test if later on you have built like loads of entertain tests and some integration tests and you want to do unit tests totally do unit tests or maybe there's a specific component that really needs testing because this is like you know very critical that it works then obviously test that but um balancing it out end to end first all the way my opinion uh so definitely yes and there's always too much to test so just kind of think about what's important um Can the user log in can they give you money um test the important things and then and then start testing the other things it's impossible to test everything so just think about the business side of things what's important cool yeah all right shout out from David Pine you're in your book I love it what book is that so he he just recently put out a book on on Blazer um I'll grab the link first but yeah David's a great writer it's um it's really cool to see his uh you know writing a full book so wow might do that one day one day I'm not sure if I can recommend it it's a lot yeah we need to retire first you know I'll be honest I used to here I'm grabbing here's the link to David's um blog post on it I used to write a bunch of books on asp.net NBC and it got a lot harder when the releases the releases used to come out every couple years two three years and then once it's a yearly release it's super hard to keep a book up to date you know I don't know how can you turn physical stuff into up-to-date stuff all right well I honestly need to go and sort out some stuff with the blog posts but they are live I'm quite excited about that and I think we've covered just about everything this this is really cool we go to Discord and just ask a question there there you go yeah perfect yeah I think that about wraps it up cool thanks everyone for all the questions that was so fun this is great thank you Debbie and great demo you did a great job thank you all right thanks everyone thanks bye later [Music] foreign

Channel: dotnet

Views: 9,002

Keywords: blazor, playwright, dotnet

Id: lJa3YlUliEs

Length: 58min 52sec (3532 seconds)

Published: Tue Mar 14 2023