Load Testing with Playwright and Artillery - Typescript

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 our playright test typescript tests with artillery so in the previous video we talked about just setting up a basic JavaScript playwright test and using that in artillery typically most people are using playwright test with typescript for the type safety and everything else so I thought this would be a really good video to show how you can do it I'm using the exact same code as I did for the JavaScript video however I've changed the login function to be a typescript function we were exporting the function here and I've also Chang the example spec file to be a typescript file and of course my config setup is now in typescript rather than JavaScript in terms of the artillery script that's all still the same so let's just make sure if I run my playr test I should still see the three tests because it's one but we have multiple projects being run in we have three passing which is all great but what I should find now is if I try to execute my artillery config file we can have errors and that's because we now have everything set up in typescript and we're trying to point to a Javascript file which of course doesn't exist the moment so in the first video I touched upon you can use your test scripts you have your your typescript tests in artillery but we have to convert it into JavaScript and to do that we're going to use TSC so I'm going to create a TS config first of all so I'm going to say TS config do Json and that's going to be an object and I'm going to say compiler options and inside here we're going to say the target will be of es6 uh we'll see the module is commonjs oh of course I've missed my comments so don't miss those out uh our output directory of where we want to Output our Javascript file so in this case I'm going to say it can live inside the JS tests folder and once again don't miss your comma and we want to say the root directory where we want to basically convert to all or transpile all of our our typescript into JavaScript by saying this inside let's just do it inside the test folder so it'll do everything inside tests CU that's where you might be really the only thing we're going to worry about is this actual login command if you don't already have types installed globally you want to say npm install DG typescript all looks good there with all that set up we should just be able to say TSC now and that's going to take what we need from this TS config ignore the error because that's just saying the pattern matching is a bit off so that's fine let's just clear that down but what you might see now is we now have this output directory of JS test and if we go into it you can see we've got example spec which technically we didn't need but the main thing we've got now is this commands file and look it's a login.js file which means we can now go back to our artillery script which if you remember didn't run correctly and instead of saying commands login we'll say go back another one JS test command login and now once we're on our artillery script this should all work completely fine which remember is still using all of our types scrip typescript features we have but it's transpiled them into this JS test folder so now if we run artillery run yaml we should see it all runs and works as expected here we are phases started and we've got all the information that we have in our JavaScript video in typescript so now hopefully this shows you how you can use this with the existing test where they page object model or ones like this you might need to make a few changes the main thing is going to be inside your actual test itself so example spec it needs to have it needs to call on the function so you're not repeating the code basically in two places so you don't want the code here and inside your artillery JS file here you can just use one method to call in both but to be honest if you're using something like a page object model or you're using the kind of commands approach or the the commands or actions approach you're probably already using things in function that's the only thing you're really going to need to change and it really is as easy as that now before I saying off this video I want to kind of break down all the different metrics we have here because I'm aware we've gone through two EP two episodes of this series now we haven't really talked about what's being output on here so we've already touched on like the the different metrics we see in for the different page PES so you got to commit quality then you've going down to the login so let's discuss what they are so let's go from the top here and we've got FCP which is known as the first contentful paint and this measures the time from when the page starts loading to when when any part of the Page's content is rendered on the screen so it's basically when you hit that page and it starts loading when's the first thing that appears on there appearing and we can see the min max the mean the medium and we have the P95 and the P99 so you probably already see the minimum is the minimum took the max is the max and you've got the mean and the medium but what does P95 and P99 actually mean so in this example P95 is the 95th percentile response time in this case it's 2375 this isn't obviously that great because we're only using One V user but when we start going through phases and ramping up you're going to see that this all changes and your Min and Max and your P95 and 999 will be different you'll probably end up seeing these these two are still the same because I'm not going to do a huge amount huge amount of difference on it so this P95 just to clarify is the value below which 95% of the response times fall and like the P95 and the P99 are useful identify and outliers or requests with kind of unusually high response times these metrics are really valuable for kind of understanding the overall performance characteristics of your system and it can identify any bottlenecks or areas for improvement they're going to help you gauge how responsive your application is under different load conditions which is what we're going to see when we start going through phases now you can see all these others like the FID LTB have these as well so it basically means the same for all of these now then let's go over the next one we can see which is the FID which is the first input delay and that measures the time from when a user first interacts with your site so when they say click on a link tap on a button or use any kind of custom jum JavaScript powered control to the time then when the browser is actually able to respond to that interaction next we have the LCP which is known as the large largest contentful paint and this this just measures the time from when the page starts loading to when the largest text block or image element is rendered on the screen and like first content for is just picking the first thing this is looking for the largest thing on your page next we have is ttfb which is the time to first bite and this measure is the time it takes for the network to respond to a user request with the first bite of a resource okay so I think that's covered we've covered FCP we've covered uh FID so first input delay covered uh largest content F paint we've just done the time to first bite and that looks like it's everything that's displayed on here at the moment I do want to touch on the documentation for a second because this is just the default metrix so this is the web vital metric that are displayed for URL however you can also include show all page matrics and extended metrics and what extended metric is going to do is um allow additional metrics to be output I won't go through that here because this is just a very basic example of setting up type script and I just wanted to cover this a little bit but if you did want to see the extended metrics you can add this into your artillery config saying extended metrics to true and I'll output a bit more information for you you can dive into maybe we'll C that off in a future video I just wanted to cover off the responses you're seeing right now just so you understand them a bit more and when we start going into uh the phases which is our next video it's going to make a lot more sense this isn't the end of this series there's another video coming out next which is going to go with phases and how we can like ramp up our virtual users because at the moment as you've seen if we scroll all the way down virtual users completed was just one that's not much of a load test it's more of a synthetic test at this point but in the next video we're going to go over phase is show you how we can increase virtual users how we can decrease them how can turn this into a proper load test it's all going to be using the typescript stuff we've got here with with the JavaScript that we just created here but hopefully this has made it really easy and simple of how you can make a start on your synthetic and load testing Journey with artillery and playwright test in typescript as always any comments please drop them down below a like And subscribe is appreciated I have also enabled super thanks if you do want to contribute to these videos that would be fantastic and you can use that as always thank you for watching and have a great day

Channel: CommitQuality

Views: 797

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: agfDKskhSIM

Length: 9min 37sec (577 seconds)

Published: Sun Mar 03 2024