Load Testing using Playwright and Artillery - Javascript

please make sure that you're performing any synthetic or load tests against a website you have control over I'm using commit quality because this is mine but please don't use this one because it won't handle the load make sure you have authorization for whatever you're testing when you're looking to perform this kind of load and performance testing thank you and enjoy the video this is Jared from commit quality in today's video we're going to go over using artillery with playright now this is going to be a mini YouTube series I create where the first video which is this one is going to go over what artillery is what playright is setting up a basic playright JavaScript test and then using that for artillery and then the next video I'm going to show you how how we can use our existing playright test types script tests as artillery synthetics or load tests and then for the future videos I'm going to go over like the metrics and Reporting just to give you a bit more of an understanding of how to efficiently use artillery with playright before we get into all of it let's just talk about what artillery is and what playright is so artillery is is a modern and powerful and very easy to ous Performance testing toolkit it's used to ship scalable applications that allows us to have confidence that they stay performant and resilient and a high load their whole goal is about making sure there's developer productivity and happiness and they also mention quite a lot about a batteries included approach and this just means that you can test any system regardless of the protocol he speaks or the teex stack it's based upon now where playright comes into this is play Red is a modern browser automation framework which we know is created by Microsoft uh if you want more information on play Red I'll put a video on the screen now where I go over my introduction to playr and all about it and kind of the history of it and the purpose of it it's a it's a very modern browser automation framework as discussed and it as if you've seen any of my previous videos you'll have an understanding of what it is now artillery can be used to run playwright based scripts which is why we creating this video and like I said the these can be done as either load tests or synthetic tests now you might be asking well why would we load tests with headless browsers and I could answer this question or I could take you to this great document in the documentation and it says here why do you load test with headless browsers and like it says here testing Dynamic web apps can be time consuming it can be slow it can be brittle um compared to what you normally do which is load testing just PE apis and backend Services now one of the big reasons or the main reason that we test web apps is it requires a different level abstraction where API is worth just at an API endpoint level whereas testing with web apps that's doing it via pages and a browser and user flows it's much more useful abstraction the maps onto how the web app is actually being used it's not all perfect there are some limitations so one limitation is at the moment you have to write all your test functions in JavaScript so that means in this this is why I've split out this video with the second video which is going to be showing how you convert your existing typescript tests into artillery ones because it's really easy to set up in JavaScript and it's really easy to do with typescript as well because all you really need to do is transpile your JavaScript the only other limitation is only Chrome is currently available but there's a reason for this because restricting the integration just one browser improves startup Time Performance for large load tests and that means you don't have any kind of con sequential effects on the results of your load tests themselves that was a lot of talking let's actually get into setting up our play write an artillery scripts so I'm going to say npm init playright latest and all this is going to do is it's going to create a scaffolding project for us I'm going to say JavaScript cuz that's the first one we're doing click enter on all of these CU it can all be the basic so here we've got our package Jason set up our node modules and it'll set up uh some example tests for us I'm actually going to delete the examples because we need those and the other thing I'm going to say is npm install G artillery which is just going to install artillery globally which means we can use it to execute our tests awesome so we all last set up we ready to start writing a player right test I'll keep these ones in there but I'm actually going to use the code generator tool so I'm going to say MPX playright Coden hit enter and all I'm going to do is I'm going to use my commit quality website and we're going to log into the website so we're going to load test the the authentication capabilities of my website so here I'm going to say commit quality.com we're then going to go to login going to say username is test password is test hit login and of course play have added the new assert visibility feature so I'm going to say assert the log out button is visible and that's our test all done so I can grab that here from the coat I only need the body cuz I think I can no I didn't I need all of it I'm take this let's close this now all is good and just copy this test in here so this is just our login now because we're using playright with artillery what we need to do is we can't just use all the code in here or we could but then we'd have to repeat all of this inside another function so what I'm going to actually do is I'm going to create a new folder and name it commands and basically all this command is going to do is the same as this test but it's not going to it's not going to be inside the actual test declaration itself because artillery doesn't understand what this is so inside the command I'm going to say new file and we'll say uh login.js s here we're going to want the same const but of course we won't want test coming through we just need the expect part and I'm going to create a function here so I'm going to say async function uh we'll name it something like test login going to pass through the page because of course we need access to the page and we're going to take all this code and actually we don't need the click so we'll TI this up here we don't need a click there we need that so we need this code I'll even take the go-to you don't really need that in there if you want to put it as part of your startup but we'll we'll keep it all nice and simple in your wellc function Asing function here and now we want to export this we'll say module do export equals and whatever the name of it was so it was test login awesome so all I've done here is create created an action which is exactly the same kind of thing you do with your page object model where you set up your page and then you've got your functions inside which act as the action methods view so here in my example spec first I'm going to say uh import test login from commands login and here we can just say await test login with page perfect so if I just run this quickly now and say MPX playr test let's just make sure the code works as expected oh my project must have three Pro oh yeah the example project has three browser set up but there we are you can see all three pass so that's all looking really good now we get into the artillery phase of things so the reason we put this login code inside a method is so this code can be reused for artillery so I'm going to do inside still inside my test folder you can put it whatever you want I'm going to say new folder and name it artillery because this is where our artillery scripts are going to live I'm going have a new file and once again this can be called login.js here we want to take uh the input we had so I can just do const test login equals require and we want to take it from commands because that's the code we want so we'll say commands SL login and here we want another function because this is going to be artillery function we want to call now the really good thing about artillery as well is it has access to this P the page the player it has so the page API that that is used here it has access to it in artillery so we can say let's just say uh artillery script passes through page because it has access to it and here we can just say await test login and once again page and we want to export this so of course it can be used when we run the AML for this so I'll say module do X export equals uh artillery script we can close that off with a semicolon as well so all we've said here is we're using that exact same login code for our artillery script so now then we've got everything set up we've got our test which does the login which is our functional test and we also now have our artillery script which is doing the login which is the exact same thing using the exact same code but using this we're able to get the metrics for our load test so to do this at the top level I'm going to say a new file and you can name this whever you want right I'm just going to call it artillery. yaml and inside you is the config of what we want to execute so basically we want to call this login script so I can say config and remember this is all yaml as well so it needs to be really it needs to be correct in the indentation first of all we're going to put the Target because this is what's going to be read everything that comes with its Target Endo so I'll say HTP commit quality.com we then want to see use the playright engine so we can say engines playright at the moment I'm going to leave that as an empty object we'll touch on what we can add into this later on but there's things you can do like uh one of the most basic things you can turn it into a headed browser instead of headless I'll show you that running um we then want to pass the path through Javascript file and that's what defines the playright test functions so this is going to be our artillery file so here we want to say processor and it would be I believe slash tests and then we've got the artillery folder and then we've got login then we've got login.js and then we have to say What scenario we want to run so this is why I added my own artillery JS I could have added all into here but if I end up deciding there's extra things I want to add into the artillery scripts I could do it in here without having to add everything else into this command so if there's artillery specific things just do it in here which is why I like them as separate files but I'm going to say [Music] scenarios which is the colon and we want to say engine which we know is playright and this test function we want to run so that will be test function and that will be whatever the name of the method was here the name of the function was here so that will be artillery script perfect so we now have everything set up we have our test which we know is working we have our commands file which could basically be a page object model or whatever you want and then we also have our artillery file which is basically the same as this right now but of course if this ever wanted to expand you want to separate them out which is why they've done it just for better best practice so now let's try and run here we say artillery I I believe we installed artillery yep npm install G install hyphen G artillery so if you've done that all we need to say then is artillery run and we need to have the name of the file so in our case it's artillery. yaml so whatever you name this yaml file is what you want to run if I hit enter on this oh it's saying we can't find it that's because for some reason it's taken artillery is the wrong name should be double l oh okay we have an error inside our yaml file so let's have a look what I've done wrong here oh of course that's because scenarios I said about the indentation needs to be on the same level as this so these as configs this moves back to here I believe that should all be good this is the problem when you're writing things out from scratch what you've got here now then we've got test Runner started and named phases I'm not going to touch on phases in this video that's going to be a completely separate video but phases are really important to know so by default all we've done at the moment is created One V user which is not really much of a load test but it's output a bunch of information for us here which once again we're going to get onto the metrics in a future video as well now I know what you probably thinking you're thinking well this is headless so how do I know anything is actually run or loaded well I said about this playright object where you can add things and one of the things you can add is a launch option so what I can see is here where you got playright I can say launch options and we can see headless is set to false and now what this means is we should see that the browser opens it'll be very quick of course we should see the browser opened and you can see something happening now it was very quick and it popped up another screen but if you're following along with what I'm doing you'll see that it loaded up what I'm going to do I'm actually going to remove the launch options here and I'm going to set this back to uh be an empty object cuz I want it to run browserless now interestingly I was expecting different metrics and I've just pointed out an issue that I've had with Target which I'm really glad happened because we should be seeing like um the first contentful load the first contentful paint um load times and everything else and the reason why is because of the target here because we hit in HTTPS basically what artillery does is it only displays the web vital metrics for the URL that starts with this target URL but because we are hitting https commit quality it wasn't outputting everything so maybe I shouldn't have cleared it I'm really glad I fell into this trap and I made a little typo here because you might be thinking well there's not many metrics being output here where you've just got browser requests for users we should see see be seeing a bunch more and that's because silly I missed out the secq on the htps and now when we run it what I should see is a bunch more metrics about like the first contentful paint and all the others and all the others that we'll touch on so here we go we've got it goes to commit quality.com at the start goes to commit quality.com gives us the FCP the FID LCP all these which if these don't make sense right now don't worry because in this series it is all going to be discussed and we'll we'll talk about what they are but you can see it goes to commit quality.com it goes to the login page here and then it goes back of course cuz that's where we do our assersion so that's just tested the full process using using playright code and hardly anything really to do with artillery all we had to do was add in this extra JavaScript function this Javascript file and the function which at the moment is actually the basically the same as this but like I said they probably would differ in a large application so that's why I put them different and the artillery config file and that's just shown you how you execute the script so you could have multiple these scripts you could change the function you could change change the process and run whatever you want we've just basically done like a synthetics test on our login functionality now like I said in the future videos we're going to break down the metrics we're going to break down recording we're going to give you a bit more information of what are the parameters you can use inside your artillery script at the moment we've only only really touched on this page AP this page API that we've brought through um the next video is going to be about converting your typescript tests to be used with artillery but as always any questions or comments please drop them down below a like And subscribe is appreciated I've also enabled super thanks so if you do want to help contribute to these videos and you find them useful you can you can donate using that as always thank you for watching and have a good day

Channel: CommitQuality

Views: 1,447

Keywords: Coding, Testing, Test automation, Learning, How To Code, Programming, development, dev, Playwright, cypress, software dev, SDET, QA, Learn test automation, Learn to code, How to code, programming tutorials, free tutroials, testing practices

Id: 4TKCSoIRc1o

Length: 16min 42sec (1002 seconds)

Published: Sun Feb 25 2024