Unpack the Stack: End to end testing with playright w/ Debbie O'Brien from Microsoft

we are actually live now yeah alrighty then and so before we do anything Debbie please show people your T-shirt just [Music] wait I should be able to make you full screen just not me it is cool because it is Star Wars day to day and so this is unpack the stack and we have my good friend Debbie here with us from her new house and you have internet right did you just plug in today yesterday yesterday it seems to be perfectly fine it works it's amazing Wi-Fi is a luxury oh my God yes I know all right so on this Star Wars day we're going to be doing some fun stuff right we're going to work with playwright but before we do any of that can you kind of tell me who you are where you work what you do I think a lot of people will know but still for the Forum let's go there just in case okay so yes yes they're soft advocating for a playwright um most the next Ambassador so most people know me from next and in my free time I literally cycle run and do as much sport as possible and I like to advocate for that as well so that people are not just on the computer all day so make sure you're out and having fun not just spending 12 hours in front of a screen that's me if we stop the stream now you have done your duty we're good because this is a thing right like recently I've been so busy I somehow forgot to actually move my body because there's so much happening but the fun thing is when you actually do move more you get better at your job again because there's more calm in you so it's this weird place and so you recently inspired me to go for a run that was a little painful but at least I did it you know well done because I used to run marathons even with this big body that worked but that's a too long ago to be smooth again anyways this is not like creating new habits yeah it's like I just have to do it a few times to just get it in again anyway so tell us a bit about playwright what is the best way of like what is it built for because it's not actually a unit test right no it's end-to-end testing exactly and it's kind of like so before right think of that testing triangle and the end-to-end test was that tiny little bit at the top that you do last and you spend as least amount of time on and that like you need to start turning that triangle upside down okay right you need to start with end-to-end test end-to-end tests should be your uh the well the first test you write and the most important test you write if you're only going to write one test write an end-to-end test if you need unit test then go ahead and do those unit tests but end to end first and not just because I work at playwriter by saying this but because it makes more sense right because before we didn't have the tooling to be able to um write really fast tests when it came to intern and now we do so now there is no excuses to test your application how your user would use the application right and that's what we want to do if the user is going to click a button we want to test that that button is clickable and does whatever that button is meant to do um we don't want to test implementation details around the button so yeah in the end that's it sounds so logical right you test the interface that the user will use to buy your product of course you're going to test it and interestingly in my whole career I've probably written a few end-to-end tests but most of it was unit tests and integration tests and now that I think about it it's like why why didn't we just press the interface that's actually the thing people say yep and that's where most stuff goes wrong in the end yeah because a lot of companies are doing this manually right they're manually getting someone uh to sit there and click and fill out forms yes and this is what we used to do just manual QA and then these menu QA people are so smart because the moment they start to become annoying to developers they're really good yeah they can find everything exactly and also have like this really black and mind uh brain but if we can replace a bit of that with some automated tools they have a better life I think because they don't have to be their job not so repetitive exactly keep on clicking stuff it's just gets a little crazy and so um we looked when we prepared this to you know how can we test this stuff and I think the most fun bit is that you just tell me how to do it because I have not touched playwright at uniform where I work we use it a lot I just haven't looked at it even I haven't touched it it's not my job so I'm gonna go and do this for the first time while you guide me so nice it totally reflects more on my inability to follow your rules than your ability to teach me I think you're going to be fine I think you have done that before and so should we just try and see yeah do you have a project yes I have something that I built for gems.com as an example of building something with next and few and personalization and it's called turbo tutorials it never really took off I didn't put that much into it but I built a lot of fun things so let me just share my screen so we can have a look at what that um actually is I'll just share a tab I think let's see if that works and you never wrote any tests for this this has no tests I know this Tim is a typical developer I am you know what when it's not actual like this stuff I did it for my job to figure out hey how does a uniform SDK work and all those things but essentially if it's not for a product release or a customer release or something like that I I just don't write them and I used to write so many tests I was one of those people like do it unites first you know all that stuff right I just don't do it anymore and this might be my wake-up call which is cool right and so essentially this is a project where you can watch a tutorial watch it on YouTube and you see some of the comments but you can also then see hey there's and this is about data fetching and it's next three and it's a relative intermediate complexity do I need to assume this in maybe a little bit and so you can just watch the YouTube clip and learn a little bit you can see the transcript there's a bunch of stuff here but then you can also just click on hey I want to see more next three so I should zoom out just a bit Yeah so now it's selected next three you see a whole bunch of next three things but you can also click data fetching and oh like this and then it selects that and then you watch this and then the interesting thing is this for now seems quite simple but all of it comes from algolia and it actually shows you similar um tutorials and it even gives you like the similarity here but also other things when I now go back to the home page and I clicked on a bunch of stuff it says hey you've watched a bunch of intermediate things but also you probably like these next things with data fetching the most and so essentially it's keeping a profile of you of what you might like to see and then there's some other things about oh not this one uh here yeah and so you can even check it we can go quite deep on that you have a profile and you don't have to be logged in we just track your browser essentially and you can see I like complex and intermediate and may only next three but when I now go and go maybe to a tutorial about media about images so this is now an image one I go back and then you can actually see oh there's only a little bit of media came in because I watched so many other ones so we can just make that a little bit stronger let's see media let's make that a bit stronger so you can see that and based on that this whole list also changes right when I reset my profile or update to something else and so I think there's a ton of tests we can do on this there sure is like imagine if one of those went wrong wrong I imagine they will so um what would be the way so should we first discuss what we test or do we just get started and assign it later what is generally your approach here um well we can install playwright first just to get you kind of used to seeing it using it um completely yeah very good and yeah like how it works and stuff and kind of like even just run the demo tests and then we can say right now now we understand play right let's write our test perfect okay so where do I get started um well you've got to get a repo I'm assuming or oh something in vs code that you can open I just have I just have an open project that I started to have nothing in it right now oh but we we would oh well we can test on your side if you want to so there are two ways right you can put your test right in your code which is I always like my tests and my code um if you for this project you know for this live stream don't want to just want to have it in a separate project that's fine because we can just put the URL and test the URL so you can test a local Dev server the your staging URL the production URL Etc let's do that first because I know when I built this project um this one this is built on an alpha version of nux 3 and an alpha SDK of uniform and a very Alpha SDK of uni like um next algolia so the moment you have no tests and I have noticed and the moment I hit this up and do NVM run Dev or yarn install or something it will just die so this is like the best and the worst project for this live stream essentially okay then let's just do it in uh folder Okay cool so I just literally created a folder here called playwright okay so open it in vs code okay which I have that's this cool so what do we start with generally so do you want to share your your vs code screen am I not sharing my vs go screen I apologize okay this is like a stream mistake that I should not be making after many streams but is it on the screen now are we good yes I can see it I like it I apologize okay first thing you would do is install the vs code extension okay oh foreign yeah but you take the one obviously verified by Microsoft Microsoft verification of course all right cool I like it that was easy cool so now uh we you don't you don't have anything you've just installed the extension so that's why it's empty so now you want to install playwright so you can open the command panel in vs code and type install playwright okay um actually I tend to do that like this it's just npm install right no like don't do that because because if you're gonna do vs color YouTube vs code okay so um okay otherwise we go to the terminal and then it's npx so you mean this right no I don't mean the terminal I mean like the vs code command panel like you know when you're doing stuff in vs code so if you do install playwright you'll see it there you have to spell play right correctly to get it yeah I have spelled it wrong a few times to preparing for this stream okay install playwright right so now you have the option if you want to choose all um the browsers chromium Firefox and webkit so you can leave them and then like if you're afraid to typescript you can use JavaScript we kind of say like just use typescript you can still use right JavaScript if you don't have to always write typescript but you're getting all those types so it's much better so we recommend you you keep a typescript but I know some people might not want yeah there are still some people a bit worried about it don't be worried don't be worried or maybe they don't have a compiler set up or something I don't know whatever but um it just works out of the box it's like it's built in so just do it and you you just clicked too far too fast yeah you went too fast so you missed the last one was the getup actions workflow yeah I did install that actually is that a problem yeah no that's great oh fantastic so what that does is that um it's just gonna work you don't have to do anything it's going to run your tests on CI on every pull request that is awesome out of the box built-in bam that's the stuff you really need like this out of the box stuff is generally like this little extra DX magic is what makes people want to use this stuff because when you tell me them just set up some GitHub actions I'm like no or how or oh you know and when you just have it out of the box that is just so nice and also now it's actually downloading the Headless versions of these browsers right exactly nice I'm really testing my 4G here but it seems to be fine yeah because you for example like I don't have Firefox on my machine nothing against Firefox but I'm I just don't use it yes but I still test against Firefox because it installs browser instance for me right yeah and so what is it getting so it's getting FFM back so which means it's gonna be able to make a video of whatever we are testing which is cool Okay cool so we have got basically everything up this is kind of like we can go through that later what we're going to do is use the vs code extension and sell the terminal we'll come back to the terminal later but if you wanted to use the terminal there the commands yeah so um basically you have um the getup folder which has the get up actions in it yep and you don't have to do anything or touch that it just works but if you wanted to add component tests in there that's where you'd add that ah that makes sense cool um then you have a test folder with a basic example test in it and um we can basically just press the play button to run that yeah should we just run this that's that seems like something I want just run that test and then tell me what you think or what's happening you just go ahead and do it and I'll tell you you're doing it right I just saw a play button I'm gonna click it what do you think what do you think what was the experience like this just worked it literally went to playwright inject if there was actually a playwright in the title yeah whoa let me check this one so did it now do both okay now I did this one yeah that is so easy and is there some sort of reporting we can look at now so do you actually trust the test I know I wrote that test so do you actually really trust that test just because it's green doesn't mean your test really passed well you could have wrote sucks then of course it can you don't know keep agreeing right it could pick your screen so you didn't see anything right because you're running in headless mode and that's what runs on the CI it just does that but if as a developer we want to see things right yeah exactly there's a little show browser checkbox on the left hand side down to the bottom oh so now if you go and rerun that test can I just go here dude yeah you can just go there you can do whatever hop up bang and now you can visually see that your test actually run oh and oh so this is just playwright.dev so it opened this browser and it checked okay do I have playwright in my title and what is the second test okay follow the link and it so it just clicks get started and it expects it to have an intro in the URL exactly so this is not in that state but maybe if I click this again now so it's going to open up browser window I think it's hidden your other oh yeah here it is yeah oh there it is nice okay so cool so this is kind of like um you know what you want to see when you're when you're basically running your tests okay now these are very simple tests let's take the um example test that's the bigger example of the to-do app just so you can kind of really see it more so in the test example folder just move that into the test folder oh yeah that makes sense okay so now we have access to that on the testing sidebar or right inside vs code itself and we can run one of those and it will open the browser because it's remembered that you have the show browser checked cool so let's have a quick look at what this is doing so before each test this is basically a little set up so it goes to this for each test and okay that's it and so then it has a few items I'm I'm assuming this is some sort of mock of the items you're going to use exactly oh yeah this this kind of feels like unit test but easier because you have so many helper texts like yeah stuff this is so easy it's it's easy to read and you can see we have testing Library inspired API like get by test ID get by placeholder so if you're coming from that world you already kind of know how to write your tests and it's just super easy to just run through it and and understand this test right and so you have not done an import for this so where is this coming from is this in the global context of playwright somehow I think it's just down at the bottom okay oh we have test expect entire page type oh this is probably a function that exists somewhere that yeah it's just in the bottom of the page exactly so just checking that it's in local storage we have we have had yeah I like this wait for for function to run because it's oh this is cool okay should we just run it let's yeah run one of those and let's see what you see okay to opening the browser there we go okay did you see it I saw it adding some stuff like we have buy some cheese it's the oh there we go yeah and can you then see yeah oh and then I can actually do this but this is just the app running now yeah you're just running it but you can't you like from this experience right it was so fast you missed what the test was doing it was super yeah so what would you do to fix this issue um I would say rather than running all of them just run one so you can see a bit more or there might be some there might be some magic okay oh without a click it's too fast that went really fast but it works so well and so what is this oh and then it marks it all okay so there must be something in here to actually um maybe record it or refill which tests what it shows like I'm not used to these tools and it it seems like actually much better than I'm anticipating so you might have to tell me I'm going to tell you because it's very new it's literally only yeah so we don't have right now not yet but very soon we will have away from vs code to open this but right now we're gonna have to open our terminal so we're going to open our terminal and we're going to run our test in UI mode so npx playwright test dash dash UI this is going to open up our UI mode let's try this here we go oh okay so make that a bit bigger and just like put it as the full screen if you want just further now okay so now this is this kind of like what you saw already in vs code you have all your tests in there and in the middle is what many people if they've seen playwright before they'll know it as the trace viewer which normally we would had on CI if something fails you have a full trace of your tests we've brought this into development mode so now I want you to yeah like I'm just clicking this thing and see what happens so what you've done is you've run all your tests right but you're not seeing anything because we're focused on a describe block or on the test file so do you want to like click on one of the expand like one of those tests uh-huh okay now look at that holy moly so you can actually now you can see all the things so go to page find a placeholder and then fill with what needs to be done or this is kind of locating it and then doing something to it right so these are all the steps of each of those tests yes this is just magical isn't it like this is kind of fun right because I'm this old school coder and I have not really always seen any of this stuff and then you just don't expect that and it's all typed and I can actually see my my test below here and actually have a yeah oh we're losing your audio a little bit oh yeah yeah it's back now right yes yes I think I touched my cable that's the problem when you have multiple items of gear if you don't if one thing breaks it all breaks I'm sorry about that anyway okay I said I can actually see my test here also in code which is very yeah and it's highlighting as you're hovering over it it's highlighting the line of code so you can read the line of code while you're seeing exactly what's happening honestly developers are gonna like this a lot more than the older tools because it's yeah now click on something click on one of the um yeah okay and then you can go in the middle you can click on the before and after to see the state of at the top yeah before and after right so you can kind of see what was happening before what's happening after what's the action and you can pick a locator so say if you wanted to maybe see what that locator was for debugging and stuff you can just hover over this because this is a dumb snapshot so you have access to it yeah so if this is a dumb snapshot how does playwright actually understand that here for this one I have to do get by roll and this one is just get by text is it just understanding HTML yeah so so playwright is is reading your code and taking them most accessible role that you have so if you've written really good HTML then playwright's going to find the best locator if not it's going to have to find something else and do some filtering so from where you are right there there's a pop out button um at the very end of buy some cheese on the right it's a little bit higher a little bit oh here oh this one yeah yeah okay now you can just make that bigger if you want just for now just for a second so this is your Dom snapshot you can open Chrome devtools you can like you know oh you can actually for this state see whatever yeah the CSS the console The Source whatever you could like totally debug this change the CSS and Visually see it and so what is so cool player I just inserted his own like little attributes somehow but it doesn't actually affect any of this because it's not HTML it's just a thing that that it connects to that's cool so it makes debugging super easy because you're debugging the dumb snapshot of that state and you can kind of see like oh my God someone put like CSS hidden or something and that's why it's not finding it right exactly I'm quite excited by what is this how would is this just changing the URL oh yeah I think we are very deep into something else so I should not be distracted by my own whatever you're getting too excited yeah I'm excited we're like what the heck is happening here okay close that window all right excellent so at the very top you've also got a timeline that you can hover back and forward just in case they had other nations you wanted to see and speed it up and things and so is these are just generated images I imagine that's the images yes and this is just in some local folder in on my Mac I imagine um I'm guessing in a local folder this is local so yeah yeah spun it up and so this is so cool running in Chrome yeah and then at the bottom you have like you know the console the network and the log of your tasks as well so if you had any network requests in here you'd see them um the log of what happened the console if you had any console messages so you have like yeah so see you're trying to like you know get something back you can see if that was returned um you can see what playwright was looking for and what came back so tell me is this stuff that only playwright does is this actually like to me when I see this this is literally revolutionary I have not seen tests this good is this something that is normal in our space or is it only playwright that does this I'm um errors might be different have other extra features Etc but there's definitely um we're not the only ones to have a visual way to see your tests run but how we've done it is probably um this is especially developer friendly like I wonder if you are a QA person and you're not super technical because you might have come from this manual QA background this might go a little far but it's maybe potentially not made for them it's more made for Developers for developers yeah because developers are writing the tests more and more each day yeah true that's true and speaking of writing tests right so when you're writing your test what you want to do is you want this to rerun automatically if you make changes to your code right oh yeah so you may yeah I'll put it back on the screen in a sec so essentially what that means is that yeah because I only have one screen so I don't see you the whole time that you talk to me so I just put it back to see you for a sec um so you can actually write something and have it hot module reload the test or something like that yeah that's so old school okay tell me what is the news tell me what is the news though because he just just kind of watch mode just call it watch mode just call it Watcher because Watchers used to work in Grunt in Yelp or like dope what was it again it worked in Westpac snowpack okay so we can make a watcher so every time you change your code it will just directly retest right exactly so so so pick one of the tests you want to you want to work on somehow it always okay here um so adding a new to do okay that one right so then click on the eye icon so you can watch this one oh nice that's so easy Okay now click on the file icon next to it so you can open that test in vs code holy and then what is happening wait let me just put this on the side okay so it just opened the right spot of where your tests so just do something very simple here like create a new to-do locator and just put your name in there just to kind of like really see how fast it kind of changes so just put it in the comment for example Oh you mean like this yeah and then press save and then open up the other window really fast okay okay oh there it runs it did it now it's running like it's running it's done that's crazy okay wait okay so now you can actually break something if you want to let's break something so now this placeholder is going to break okay see that didn't because you've just deleted a letter right but it's unless you're gonna put exact much playwright is still capable of finding oh does it do like a fuzzy match yeah so so you can do exact if you wanted to um so you'd want to make something like that it doesn't match if you could put what needs to be done Tim for example it's not going to find that but just removing a letter it will still find it ah so it's it's hanging on this now it's gonna keep trying it trying to find it it's going to retry and it's going to say I like that it's smart like that it's just retrying and figuring it out somehow yeah and then it's gonna say Tim it's not on this page okay so can you choose in playwright how long it takes to like retry this stuff yeah so you can modify everything in the config as you want to um but okay so stop right there because it failed now just to make things a little bit easier right imagine you had a lot of failed tests and you want to you know just focus on those you can filter by failed test so over on the left in the in the sidebar let's just show only the failed tests and now we can just focus like okay I need to go home and this is the only thing I need to do so um and so does it have like sort of a message that says Okay okay so we just know that this locator is just because we know the fact that this is a locator so it doesn't actually have to tell me something specifically so yes okay notification wasn't found but what you can do is it's it's basically saying that the get by placeholder so you can see on the page you know what's going on what playwright is looking for and this is how you can use your pick locator and then go to that placeholder and get the correct one oh because we know it wants this one yeah so now we can compare what we're looking at on our Dom snapshot compared to what's in there and then we can press the copy button and then like open vs code again put it in there and fix our test let's see how much it okay so it just gaps this yeah grab the locator and now like it's gone from the sidebar right because we're only focusing oh yeah exactly so we we don't filter on that and so did it also do it on Firefox oh yeah so uh it didn't run you don't normally see it um but basically you can check if you check the two of them then you'll see like two tests and running under it so if you like open one of them out uh I'm just trying to see so now it's just running on two oh yeah yeah but now you can see it right so you can see the chromium and then the Firefox and you can visually see if one was failing on one another you could inspect the two um of what was going on it seems to have to warm up a little bit for Firefox yeah because we didn't run any yet for Firefox whereas Chrome it already runs so it's already had everything cached hmm honestly this is the funny thing about this like you don't expect it to have this many Rich amazing features so yeah if I had done this on my own I would probably not have found this so I'm really happy that you're showing me this stuff before we actually do do something yeah so let's do something now that's right a test you now that you know like the development process stand how to get started and stuff but now you want to write a test so um we can do it straight in vs code by clicking the record new and we can put it in this um in this repo that's fine do we make a new file no or not you can just click the button and it's going to do it for you which button the record new button yes record new now you go look new file created uh importantly right yeah so I cannot even imagine this this happens this is crazy oh and you can actually choose a locator but we probably have to tell it go to something right or do I literally just go to a URL now and it does go to the URL so paste the URL you want to test yeah oh that's their own side that's not good that's a better side Okay cool so now what what do you want to test so you can um you can just like for this purpose just kind of Click around in some things maybe you want to test the menu for example maybe you want to test the filters whatever you think is uh something that you want to you know what we can do for a new session it says it looks like you're new here so we don't have any personal decision yet so let's check the fact that if you just go to the page without any context this shares and then later on we can test when you click on this one we visit that and come back this should not be there anymore okay so what I would do is I'd click it okay so now in your code yeah well we clicked it right the user's not going to click it but we'll fix that later okay okay yeah so now what are you going to do you're going to sign in or something or or click around or Well for now what we can do is actually go to let's say this tutorial okay and then when I come back to the home page this has then changed based on some personalization okay let's do it okay but when I click this it just finds a locator and puts it in my um it might go right so you don't actually go there or do you oh you do I'm just I don't know we'll fix it later because we don't need that hat next okay cool I'm I'm one of those people that just assumes stuff quickly and then like oh maybe that wasn't true anyway yeah so we just went to this thing and then we go back home and now that I'm home you see it says oh yeah I see okay cool then you can click on that as well yeah because that's interesting to see that it when you went yeah a relatively like an intermediate tutorial and then comes back and says okay now you're no longer new you have watched something and that was intermediate so I think this is a good start for the first test okay so let's um cancel the recording we just hit cancel here okay yeah yeah and now you have your code written I'm just gonna make this slightly smaller so we can see a bit more okay we have a little error here because you you went to the um page wrong and stuff like that yeah I made a boo-boo yeah so delete that and then put the rest yeah exactly this recorder is insanely cool yeah it's so cool now it does only record user actions so you are going to have to write assertions for anything that you want to assert exactly that makes sense so we don't have to do this one because this is what I clicked to go to that other tutorial well hang on a second well yes what we need to do is is understand what we've done we've went to the page yeah okay and then we have a page get byroll heading it looks like you are new here and we clicked it you can't see this if you want to like maybe close the sidebar on the left it might make it easier to see oh yeah I'll just do this yep oh yes exactly there's a click action here exactly so you don't want that to be a click you want basically an assertion here so you want to expect it to be visible for example yeah so now we can kind of just do well now we have typescript so well the expectors at the very start ah okay no the very very start but after the wait and then wrap it does have that that's cool yeah and then just exactly and then you can kind of say two dot two not two no no no no no no no at the end of the brackets like you won't expect this locator I want it yes I expect this locator now we've got all this typescript just giving us everything right so to be checked to be closer to be disabled to be editable what do we want here and you can see all the options I think the 2B on its own and just then just a string would that work I would say to be visible is is better that actually makes sense yes and then like exactly perfect so now we're going to expect that heading is visible and then as a user what we're going to do is we're going to get by the role of an article we're going to filter those articles for one that has the text of view3 learn how to make it composable and then we're going to click on that because that's perfectly correct yeah because that's going to take us to the next page oh yeah okay and then we wanted to see if the header get by role so we didn't check anything on the other page right but we could have we just went there for now yeah we could check that the URL is correct or whatever but that that's okay we can do it later and then we went to the header and we clicked on the home that's great and then we wanted to check that the heading somewhat complex stuff exists so yeah so it's literally the same thing right yeah well this would essentially do it right or do we need more yeah no this could totally do it you could also um make sure that it looks like you are here it doesn't appear because sometimes we make mistakes right and we show two headings you know the the good one and the one from the previous one so you could also like expect it not to be visible right and so in this case visible does this work now this this is all right to be not visible I guess um I know there's I know there's um to be hidden well this was my question if I do hidden does it check CSS to be hidden or just ready I don't know let's give it a try and see yeah because this now just doesn't exist so it might not even able to locate it okay should we just exactly so let's check it out and see and if not we'll see um if not we'll do or not we'll find out what the opposite of to be visible is so where are you interested yeah you already have UI mode running so you can just open UI mode and your test should automatically appear down at the bottom nice and you can even filter say you just want a turbo and you only want to focus on that test you could write in Turbo and now now you're just getting you know those ones let's just do this first just keep it simple yep let's see if it works interesting so it doesn't have the picture yeah so look we have an issue so it's waiting for the somewhat complex stuff and it's not finding it so you've got to figure out now why I could not find it what went wrong did you set me up for this totally not but this is a great experience kids because we can see like um because you can go back and forward you can really see this is just great and and we're looking at the after because you clicked on after so you can go back and click on action um so you can see what was actually clicking the Red Dot so that's what playwright clicked right what happened that is so good yeah so what happened after playwright clicked that link what happened next it just clicked on the home rather than waiting for it to go to a new page because we didn't do still okay yeah of course then it doesn't then it hasn't done the personalization yet so this is because it hasn't gone to the other page then it it's still on this um it looks like you're new here because you haven't left that page yet exactly okay I'm excited [Laughter] so you would cons you would think if it just clicks on that thing that it just goes to a page but you actually have to tell it to go to a page so how do we get the link for this Well normally it does just do it so this is strange how is how is your app built what is it changing in the URL oh this might be a next link maybe no it's not a next link no it shouldn't matter production Bill oh as a user all you got to do is just click it and see what happens when you click it and so essentially it's a header three with a link inside tutorials so when you click it what happens in the URL just that oh but it could be that this is now because this is a static render single page app in Alpha mode of next three so maybe we actually have to go to the page because maybe this is one of those things that it's in the next payload somehow and it just doesn't actually go to a page but it's just a single page app that refreshes itself or something yeah because playwright was not enough remember playwards like super fast so if you were to like click that at the speed of playwright and then click the home button what would actually happen yeah so let's try that you won't be able to you're just not no no I cannot do it you'd have to like go to 3G what happens kind of slow down your your website um what is actually happening to that website and then you can kind of understand you know is my JavaScript doing something is there something about the page loading doing something okay so it now is 3G okay so now we're going to click the view tree and then we're going to jump to home very fast it did it yeah but you were so slow at clicking the home oh really oh okay okay okay like like you know let me just reset my profile oh what we can do to help this out a little bit is this you're on Fast 3G you could you could totally do I went on Fast 3G okay wait let's change that where am I where's my network slow 3G all right yeah so now just just to kind of see and understand what's going on this is like your your kind of way of debugging yeah there we go so this did it exactly yeah so that's what playwright is doing so as a user on a slow 3G network that's the experience you are giving your users oh it's so bad it's such an alpha website but we know this so there's a problem here right you can fix your code which you're not going to do today well how would you fix this because this is literally a next built with a link to a page more you can do there right I would update to the latest version of next oh that that could help I know that because I'm sure this is something that is um that is fixed and I'm sure if you test out another website on next you won't find this problem um I can probably yeah I agree agreed but at the moment we need to fix this so what is our best way of fixing this um um maybe a timeout somehow yeah you could do a timeout here you could kind of like you know make sure that it waits a couple of seconds um so you're just gonna write stuff on you I'm one of those but I'm not going to do that now now that you told me so so go to the job right because you know I work in docs and I like people to read their docs um because the dogs have the answers or you know you could ask Chachi do TV really wanted to I don't know if it could be the right answer though no they'll totally give me the wrong answer I'm sure okay let's not do it okay cool I mean I'll go you could try it let's give it a try see we'll see what it says what are you gonna ask it I'm writing tests the playwright um this is the biggest problem for people right they're like I don't know how to use chat GTP yeah exactly it's really hard to actually write something but it's not it's me a question the problem is that people don't know how to ask the right questions so just pretend you're asking a question to a senior developer how would you ask that question I mean that's not a bad way of writing a question but you could have been a better because you know you could have said now this is like giving you a kind of loads of stuff but you can see a test timer there um it's really kind of terrible color wise but yeah and that's before it that go to my test after each oh oh that's terrible yeah okay yeah the question like this a senior person would likely just explain it like this as well right yeah but you could have like basically said that the problem you're having is navigation that you're basically like trying to navigate to a page um and and it's not the it's probably right is too fast to go there you need to slow it down um so yeah you can do test timeouts and things like that you can um also read the documentation on timeouts and see how to do it for a specific cases um you know what the way I ask this question is actually interesting because you and me we are at least for me I know for a fact but you also I think we're Millennials or at least on the old side of the millennial Spectrum we are both and we tend to be Millennials tend to just go deep and try to find something out and then when it fails they ask a question in the context of what they have been trying to learn yeah where if you're younger or at least I've seen with my colleagues that are not like me they would just stop earlier and then ask the question the right questions early without having all that context because somebody who's senior doesn't want to wait for two minutes of explanation and then ask a question right and so this is a very typical thing for someone like me to do already in it give me a detail yes okay and chapter 32 is pretty good so we've got that like yeah that's nice no time out so it's good to know that um but it's always good to look at the Ducks right when you're using chatter DVT just also kind of open the dots and compare and make sure that you're actually giving you the correct um I feel like we're gonna have to say that about anything with jet GPT whatever yeah I mean it's great but obviously like yeah you know verify verifying is important so you can expect something to be visible within a certain amount of time exactly or you can click and probably wait with clicking or wait after clicking one of those yeah so you've got to decide now which one do you want you want to add it to the click do you want to add it to the um expect because we could potentially do this right um on this click we could do something like that but from these dogs I don't know if it waits before or after right well let's let's have a look and check I think you could also click and learn more on in the docs on that but you're not going to read I know you so where where I learn more um in in the you'd have to like click on the the timeout um API stuff but you know me we're just gonna I know and you could like scroll down and read examples and let's let's just let's just go with it it is cool though these dogs are actually really good this is something I would read if I needed to know a bit more and I didn't have you for sure okay so you're in watch mode so it should already um have reruns now I am oh you weren't in watch mode okay you can just rerun it again so you can see like it's kind of timing out it's stopping for a second and no we still had a problem so we still didn't get there yeah so what I think it did it waited before clicking I'm actually not sure we'd have to read the log to kind of see that but oh we can read the log that's cool so it's a wait time the duration uh expression to be visible but it's it's not there because that's not where you have the problem the problem is in the one above not above that again wasn't it yeah this one you're right yeah so this is the problem one so this one timeout five it's waiting for the Gabriel article by link attempting to click the action waiting and element is visible scrolling interview if needed um performing click action click action done waiting for scheduled navigations to finish navigations have finished so it seems like it might have been waiting before and then clicked it but this is nothing super clear should we just quickly try this one right where to go though I mean if you're putting it there you know that the action is going to happen right at that moment um and let's see what happens with that it could be also the timing it could be a mixture of things but let's let's give it a go you're in watch mode so it should just run automatically and let's see what happens now no it's still not working so that timeout is not working for you is not actually shown in any of the actions here yeah so so what we can do is that we can we can also like um I was gonna say we can we can like you know forget about everything else and focus just on this and add and expect and expect the URL to have changed and then we like you know don't have to worry about is it the header is this the problem because we know what the problem is so we can kind of isolate that down and kind of say right um so that means we can do this and then here's something can we expect that okay wait I should stop just typing maybe let you finish totally fine um what record a curse cursor which is something that in the middle of a test if you wanted to add something you can open the testing toolbar and click on record at cursor yep right and now click on this one click on what you want to click on the beauty learn how to write and now like you can you should have that URL so you can copy that URL the URL is what you want yep okay and then just cancel yeah so we did an extra move in there we've already got this we didn't kind of want that but now we can kind of we got our URL right so you can now say um the await expect page oh what's happening yeah and so what what do we expect how do we how can we check that URL oh good question so we want to expect actually go to the example samples written in there because the example test has has exactly that in the getting started link uh you can click on on the actual file icon which opens the file you have another demo the actual example one this one yeah click on the file icon and that will open the test for you oh the file icon right so you can see you want to expect the page to have URL okay so you were just missing to close you need to close those brackets because you're expecting the page that's your locator is the whole page you're not like so like this yeah but to have URL okay it makes so much sense when you read these um let's give it typescript is giving it to you there as well right and then you can like um just kind of um hide everything else like uncomment out all the rest of the stuff right because we don't need any of the rest we can just focus on this and say right this is really what we want to happen right so let's see if this after this we can check the personalization by doing other go-to or something exactly we can just continue the test by clicking on the home link but for now we want to do this so we've saved that and our test has passed okay I want to see what happened though exactly so it's found this it clicked on that but then it oh the URL is there but the page is not you see now there's your problem what is this oh man I wish I would have like we should just you shouldn't have used this website apparently I think it's great this is fantastic how many other people are going to have this problem this is uh this is like your hydration hasn't happened yet right this must be it it's something to do with hydration yes so we need to wait for hydration to happen um and basically for that to happen I mean I don't have the answer to this at the top of my head but you're gonna have to like slow down when we get to here you're gonna have to like um because we've got to the navigation we've got to the page but we're not on the same we're not on the page yet right yeah you know what I would like to check like if I go to that webpage right this one and I turn off the JavaScript completely does it actually work probably not it does there you go okay oh wait it's still on the slow 3G yeah yeah JavaScript is now turned off okay so the algolia stuff doesn't work that makes sense but going to like a tutorial yeah the YouTube doesn't work that also makes sense there's a few JavaScript things going on okay essentially you see to go from page to page this should just work yeah also in playwright well something is stopping it something in your yeah we know this is like the this is like Alpha next three when it was an even version 3 yet right you can probably check which version it is oh I don't have it here no but like it's already we are in for an hour now so what should we do should we fiddle around a little bit more to see if it works or do we need to show some more magic of what we can actually do with all this I'm a little intrigued now I'm gonna see like how can we get next to hydrate that page and now that we've got to this and we kind of know that it is going to the URL so we're kind of at a good state right now the test is passing so let's let's continue a little bit and see so from here um and I'll check my calendar make sure I don't need to be anywhere else um from here can we can we slow this down and and see if we can load something on that page because we just another timeout then uh yeah let's let's add a timeout in here and let's kind of um let's let's time it out and then see if that page stays there and we can check for content on that page before we click on the home let's just try this one then like five seconds should be enough right if we do it like this oh wait maybe it's already running yeah but what when so what we're going to need to like um make sure that something on that page exists for like to come to really kind of see if it's waiting because there's nothing to wait right the test is ending so it's like yeah so no do is probably go to that page and see what should be there yeah and we can it needs to find this title essentially right but do we do that in the recorder perhaps you can you can do in the recorder so it's already on this page yeah so just click on and then like we can and then we can turn it into an assertion so just wrap it in the expect and then put it to be visible instead of click oh no not like this and then that one is like this I must say this is the especially the recorder and also the naming of the function is so easy I know we can like if you didn't have a shitty website like this you can teach it to anyone I think I think when websites are not functioning it's even then you can really understand and what's going on how to fix things so [Music] um so here we've got right um our log and it's basically saying that learn how to make confusable get my role blah blah blah expect it to be visible with a timeout waiting for get by text it is not getting it so it's not getting to that page did we write this this is actually correct right so we wait for five seconds and then this should actually be visible after going to this URL so something we can try is like this is not working for us this timeout is not working right and it would potentially just do this and go actually what we could do to just make sure that we can actually figure out this conversation business it's just how did it into this URL put it in there and see what happens because this is all about like debugging and um and then you can kind of see we expect this to be visible and we get EX and we don't click this one right what I do want to do is like okay we know this title is there then we go to this URL okay now and then we let's try this one to be visible let's go let's see if this works it cannot be simpler than this right yes let's see if your app is doing what it should be doing if it doesn't do this I don't know what the heck is going on okay it does it exactly Okay so so one thing we could probably try because what what we're seeing here is that the navigation the navigation is working if we do a go-to playwrights go into it if we're clicking we're not re-rendering that page for some reason right um so if we go to the docs and let's search for navigation and let's just open this so we're having problems with the navigation right so let's have a look and see is there anything in here that can help us oh look we can do some stuff like that so we know we already done our navigate to that's that's working for us yes oh look at Auto weight interesting and that's why it was working for us because it was Auto waiting but that's not happening on the click exactly so in lazy loaded pages that's essentially what this is right yeah okay here so we can do go to and then wait for this to be visible that's relatively similar to what we have now right well navigate and click element so click will Auto wait for the element right so click was kind of during that um it's actually after this yes located or click initiates a navigation and then waits for the navigation to complete right but we were getting a issue so can be combined with page weight for load state to wait for a loading event or wait for element in lazy loading Pages it can be useful to wait until an element is visible with the locator.weight for okay so maybe this is something so we click on login and then we wait for something to be visible so let's add this so essentially we just have to add the weight for right yes okay wait and let's let's see if this works okay so we don't have this one anymore so we click on this thing okay and then we want to make sure that the heading so we're going to wait for that heading yeah let's wait for it so now just take out the double dot so expect this heading on that page I don't think we need to expect because I'm not expecting wait actually just wait we're literally just waiting for the thing together we're saying like I want to wait until you appear and I'm not going to do anything else until you appear and then after that how do we actually well let's see if this works first let's see if this works let's see if it waits for it right because we've removed the the go to page okay it is failing god let's see we find this we click this there's the action yeah and then we wait for this to oh yeah but I think it found the link on the same page here ah then that's an a strict strict mode so that's a problem that's a different problem you actually didn't go there it just like clicking on this doesn't make it go yeah but we because we're waiting for and it's already like kind of found something okay so maybe we should let's just do this because I just want to see that clicks this what happens can we see that in the probably not because it's clicked and then you can click on the after if you want to click the action before and after so it didn't do anything nope right but we saw yeah I just scroll down essentially to click it yeah but we saw previously that that it did go because you know this is ending here but it normally goes to that next page and when you when you're strange isn't it well it's good that we tried this and didn't prepare before because we have magical content here where you can see all the variations that you can do with this tool um I think this might not have been the best thing you can do a wait for navigation as well should we try that okay yeah um after that I think it's about time for me to start making dinner yeah then you've got to like figure this out on your own but this isn't it I'm going to figure this out for sure okay yeah we still click on it right yes we click on on The View tray and we made oh this might not exist oh yeah this is deprecated but it might still work it will still work but yeah it's deprecated because we don't use weight for navigation anymore but um will you we just do rate for which we tried which didn't work you can try this and then we wait and then we check if it actually has this URL okay here we go right so this is working right it's okay we go we click and we wait for navigation so there's the URL yep but then the page hasn't actually reloaded so the problem isn't the navigation right so this is just ways of you understanding what's wrong with your application um so playwright is able to say I I'm waiting for the navigation but I've navigated there I'm there what do you want so yeah it made the browser go there it's all good yeah it is just next that's the hydration dehydrate yeah exactly so yeah so you're gonna have to like wait for that to be visible on the page um wait for uh loading for example so it's not a navigation issue which is which is cool because we've now figured out this has nothing to do with navigation this is to do it waiting for something to be visible on the page so you could set a timeout there and then see if it actually um loads I'm just quickly asking jet GPT just to say wait until yeah playwright can wait for JavaScript Foundation to finish to use his wait until option with with the page go to wow this is so bad to read okay wait um describe blah blah blah page go to wait until Network idle yeah so we saw that before age Goku we knew that worked already yeah so it's a little bit different um but we can we can put weight we can add a timeout in there and see if if it's going to load um but basically that's what's happening the navigation is working exactly as expected um but we're still not getting that let's just wait for like 10 seconds yeah and let's let's see if it expects the URL to be this so actually this although we can remove this yeah that should actually not fail now because it clicks on it it waits 10 seconds and the URL should be that if that doesn't work then it might be that next link there's some magic in the Alpha version of next three um I don't think it's a next issue as such that's super unlikely so that's working right that is past kind of there's there's a couple of network issues in there that's what those red things are so you can actually check those out in your own time but this is gone to it right so what I think is actually happening now that I'm thinking about this this is also um um and I'm gonna just stop the screen share because there's um time is flying um what I I think I find I think I know why are we get like look at this why would somebody post this in the chat I don't know but why would you highlight it just because what I want to place what I think is happening here is this is Alpha next which is fine but it's also the Alpha version of uniforms SDK for personalization on next and also this is running on the for sale edge and so this is a combination of edge rendering with the middleware with an alpha version of the uniform way to rehydrate few components based on personalization and so sometimes it happens on the server or the edge so we don't without JavaScript it's also personalizes but then it rehydrates and what this might be is the fact that the HTML that is rehydrated doesn't match the server and so it probably hydrates it twice or something like that because I knew we had this issue before it's solved now but this is such an old version I think that's what's happening yeah well at least you know that we've we've gone through the processes of how you would debug it to find what is the issue what is the problem and how you can then like you know fix it if you have those hydration errors and go through what you want to kind of say oh it's not the navigation it's not this but it's it's a nice I I enjoyed that it was a nicely booking we were lucky if that was broke is such a bad way that we actually yeah but this website was living on the edge I had to build it and while I was on the phone with Daniel Daniel Rowe from next for this project every day because we're building next features based on how I actually experienced what we were building so I don't know I might have also just built something bad this is possible I mean a lot of developers actually do have bad code and sometimes that is the problem um and sometimes you can find these things like I found it for a conference website the menu and I was like a test playwright's not working playwright's not working but actually if I run it in 3G in slow 3G if the user had bad bad internet they also were not getting when they clicked them here so you fix the JavaScript you fix the issues you know what I thought I didn't do bad code and I likely didn't but the combination of all the things in Alpha state and the awareness with the personalization makes this not work it's 100 yeah it's hydration is always something that's needs to be checked out we can check one thing I'll share the screen one second because you know what it could but we could probably check if we actually have console errors for hydration for Bose let's say look there's oh that's just Romans that's not I think probably in production mode it's not complaining about the rehydration issues yeah because it doesn't because it only when it's really slow that it was having those issues but you need to go into Dev mode and kind of see those those errors yeah yeah but that's not for today the local that's another day that's another day all right you know what even though we were not particularly successful in running the tests I learned that Tom and also I liked what I say I'm gonna be adding this to projects this is it's actually fun to do because if the tooling is this good writing tests is going to be satisfying that's the whole thing I have a good website but there you go yeah and it's quick and easy as well to like just get something done even if you test only one thing like the navigation right just even writing that one test to your website and then like you know put that get up actions uh upload everything to CI and X-Men all of a sudden your tests are running every time you change your code it's just going to run that's the cool thing I like it so because I'm actually starting a little side hustle selling stickers and I just built some websites for that it's not finished yet I'll be putting that in here 100 yeah that's a good one to test great yeah you want money you test the money you know it's one of those websites where you can upload your sticker and then we get we show you the A4 sheet and you can drag a slider to see how big your sticker fits on this on this on the um the sheet and you can have 20 or five based on the size well there's a whole bunch of algorithms going on it's like if I slide this I see 16 or 5 how do I test that right this is a playwrite thing easy cool I like it nice well time fluid is always with us we'll just go and then have fun so thank you so much for your time thank you for having me where can people find you uh debbie.codes is my website and from there all my Social Links is easier to find me there you see on the screen dance underscore by on Twitter I'm also on Blue Sky oh yeah yeah um but yeah debbie.codes um you can get all the links from there um yeah there we go yeah you'll find me everywhere awesome um thank you so much for your time and it was lovely seeing you and I hope to see you soon but I think we're both pretty busy with defense yes we are very busy but we'll find some time and do something again maybe I can correct the test you're right for that site that's highly likely I am from the world of unit tests with like I don't I forgot the test Runner that's how bad it is let's not let's not talk I'm I'm in shame all right thank you so much Debbie and speak to you soon cheers build stuff hahaha