Full transcript of “E2E Testing WITHOUT Writing Code! 😱 | MCP Server + Playwright”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:00 Hi guys, welcome back and today in this video we're going to talk about how you can generate complete code like end to-end code with just a command using parrot MCP server. So we're going to use the power of the cloud model and the power of the MCP server like play MCP server to generate the code not only just executing the code but also generating the code also including the complete setup of the playright from the top to bottom and you don't even have to write anything for that matter. It's all going to be happening with just one single prompt. So I'm going to show you how it can be done. So basically you have to have the play MCP server configured within your visual studio code. And if you have not configured it, I'll also show you this particular video. And if you have really not used this before, I highly recommend you to use this because this is amazing. So you need to go to this exam repository over
0:47 here and you see that we have got this MCP playright. This is the playright MCP server which I'm going to be using over here. And if you scroll down a bit, you can see that we have got this option called as install server. This is going to be the place where you can install the MCP server within your Visual Studio Code. It's very easy, as straightforward as that. And then once you're done, the installation is done to be honest. And I'll also show you that uh this particular MCP server has got a lot of feature. It also generates the code for you by default. So if you go to the uh player MCP server tutorial over here uh you should see that we have got an option to uh to to go and work with lot of tools for UI testing for API testing and also to generate the code uh that you're looking for. Right? I'm not going to go into the documentation because
1:33 I've talked about this particular tool a lot of time within our automation uh YouTube channel. So I'm just going to ignore that for now. So I'm just going to go into my uh terminal over here and let me go to one of my directory which is this one and I'm going to create a directory called as uh test using MCP something like that and I'm going to open Visual Studio Code. That's it. This is the only thing that I'm going to do. We don't really have even a single line of code at the moment over here. As you can see the left hand side is quite empty. And you can also notice that I have got the um the co-pilot uh chat over here and also it's in agent mode. So make sure that you install this particular extension. If you have not, I would highly recommend you to also install that. Not recommend, you need to
2:20 for this particular video and to follow along. You need to have this GitHub copilot and the GitHub copilot chat. This is free. You can install that uh as you can see over here. The moment you install it, it's going to appear over here in your Visual Studio Code. And then you need to see that we're going to have these agents enabled. So you you should be in the agent mode, not the ask or edit mode. So make sure that you are in the agent mode. And then you need to add the tools. So this is the tools that you are seeing over here. That tool is going to be the MCP server tool that we're going to be working with. So I'm going to go click this tool. And you see that by default I am selected with the 131 tools. These are the built-in tools and these are the tools which is for the GitHub MCP servers. I'm going to just ignore it for now. I don't even need it. I've just come down a bit. I have got
3:06 some more like the uh test sprite MCP server. I already talked about that in my YouTube channel. So if you have not watched it, I highly recommend you to go and watch the test sprite MCP server detail. It is amazing as well. So I'm going to ignore this one as well. We don't even need it for now. I'm not going to work with the MCP SQLite. So I'm going to ignore just going to leave that for now. Just okay. So we have got 49 tools selected. I'm just going to hit okay. We don't have the play MCP server at the moment. and I'm going to install it from the scratch. The way I'm going to install it is just go to this repository playright MCP server in the exit automation GitHub repository and then you just come down a bit you have got this option called as install server. So once you hit this button over there uh like this it's going to pop up a window saying do you want to allow
3:51 this website to open visual studio code. I'm going to say yes. And you'll see this nice little UI saying playright. And it's also showing you that this is the type is a studio uh which is the seddio operation. And the command is npx and the arguments are these. This is going to install the pit mcp server for you in your visual studio code. Let me show you how. The moment I click this install button, it has already installed. And if you go to the gear symbol over here and if you hit this start server you should see here saying 32 tools discovered which means the tool is already configured in your agent tools over there. See now I click this configure tools. The last time I was showing you 52 tools now it's saying 82 tools. The reason why is because uh we have got the playright uh MCP server
4:39 configured and up and running. And also it's been selected as you can see over here. See this is how smooth and easy and seamless it is to install a plate MCP server in your visual studio code. Amazing. So we have done that part. Uh which is good. So the installation part is over. Now the fun time is going to be writing the code. Right. So I have got my application which is this guy. And in order to work with this application I'm just going to show you how it's going to look like. So this is the application where it's going to you know create a product by clicking this create button. It's going to enter the product details and stuff. See I'm going to really test this particular application by creating a product uh and I'm going to see if the product has been created or not. That's
5:24 the test I wanted to do. But in order for you to write this test you can even use the playrights code generator tool which is going to generate the code. You can just use the playright code genen this URL. If you do it it's going to generate the code and then you can just use it. That's it. if that's your focus for generating the code. But in this video, I'm going to show you not just that generated test code, but also the whole infrastructure like playright configurations, playright installation files, readme files, how you create the package.json file with all the type arguments and how you set up the run settings and also that whatever that you need for your testing, everything is going to be there. Apart from that, you're also going to have the test included for that particular uh for that particular operation. not this test but the permutations and combinations of
6:10 test and models and utilities everything you can create with one command. If you don't believe me I'm going to show you how it's going to be done. If we're going to go to this visual studio code over here and I'm going to say navigate to the uh website this one and perform creation of the uh product by clicking the create link and create a product uh with realistic realistic information. Right? That's the one thing which I'm going to give. I'm going say once done um make sure you generate the code uh
6:57 for the tests and they are executable right that's what I'm going to give so basically this is the command and I'm going to ask you can generate the code as well and make sure they are executable I'm going to run that the model which I'm selecting this time is the cloud sonet 4 because I'm in the premium uh version. So I'm just going to use the premium model. But if you're using the standard model, you can use GPT4.1 for that matter. And you see the moment I click this uh send this particular prompt, it's going to invoke the playright navigate uh tool which is part of the playright MCP server that we have got. And I'm going to hit run to continue this operation. So it's going to bring up this particular website and then it's going to keep doing everything. So I'm going to allow for
7:42 this session for all the tool which is going to be invoked so that it won't prompt me or nag me to say that you know what I need to use this tool next time next time something like that. So I'm just going to allow everything for that over here. I'll say always allow see that the code generation uh session has been started. So it has been invoked over here which is also one of the tool part of the play MCP server. Now it's doing all of these operation uh autonomously because I've set allow for this session. So it is just going to keep doing that and allow in this session. So it's going to fill up the product. You see that it's creating a product with the Coer uh X9895 RGB platinum XT platinum mechanical uh
8:28 sorry premium mechanical keyboard. The price is $1.99. And then it is going to choose what things it is. The prototype is Fer Pearl. Um it's going to create that particular product which is amazing. Uh and look at that. So it's going to create the product and it's also going to take the screenshot if the product really exist or not. And finally it is going to verify if the product does exist on this particular UI. So it looks like it is there and so it is really happy and and it's going to generate the code. Look at that. So this is the part where I'm was talking about the code generation is going to happen. And I saw some of the comments from from people saying hey Karthik you know what this chord generation can just be happen even with the playright core generation. I 100% agree this can just be happen even with the core generator of the playright which is easy but the next
9:14 part is important. Now you just have one thing which is the test. But for a newbie like a person who has never used this particular play before they need to have not just this test but they also need to have the playright configuration to work in different browsers. They also need to have multiple different permutations and combinations of the test which can be created using the the spec file. See that we have got a spec file over here. It says the product management that so it's using the test.escribe describe which is going to say product management and then inside the describe you have got the test method. See this is amazing right? Subscript folded that as well and then it's writing the test inside it with all of these informations for you over there and it's going to say test.b required for this particular URL and for this
10:01 one. So I know this is only three test for now but we can ask this this guy to create more and more tests. So I'm going to just hit continue. I'm going to let the tests to be created. So look at that. We have got the tests folder. I think what it's going to do right now, it's going to move the product creations uh spec into the test folder. Look at that. It's done that already. And it has also created a package.json file where it has got the scripts tag uh scripts property where it's going to see see all the uh way that you can run this test like just use npm run test. It's going to run this playright test. If you say npm run uh test colon headed, it's going to run the test in the headed mode and then headless mode. Uh debug options UI and install of the playright. So everything is there for you. The setup
10:48 is also being done. Just think about like if you are if you're going to do all of these by yourself. Uh if you're going to be generating the code and then you're going to do with the playright code generation, these things are never going to happen. But in here you are going to be doing all of these with the power of the the cloud sonet for which is going to do it for you which is uh fabulous and it is already generating the code which is even mind-blowing and you can notice that it also generated the plated config.ts file which is going to be the define configuration. So this is the this is the best practices as well. So which is also been implemented over here and it's showing you how to run these uh tests. do that for the Chromium browsers and Firefox browsers. All the setup is also there. And if you also want the web
11:34 server to be executed, you can also tell that in the prompt to to do that. But for now, I'm not going to do it. So, I'm just going to ignore that. And look at that. Now, it has done all of these for you. It has also added a readme file like how this is going to work. The TS configuration files uh as well. Uh and now finally, uh it is going to run the test for us as well. See that npx playright testy list. So it is going to um it's going to show all the tests over here. Do you see that the test is even being executed for us and it's also completed. It's also now creating a run um uh run test.sh file so that you can just run the run uh run test.sh file the shell script file so that you don't even have to use the command or something like that. Just run the run test.sh file
12:21 which can be used while you run them in the docker container. See look at that. So everything is created guys like see it says like navigate to the website create a new product benefit the product and also it has generated a comprehensive test suite with the project setup files and how you need to run it and this is the project setup and now if you want to go a level further to say like I want to run this in docker container and then I have to connect with the external storage also store the video files or test file reports so that can be accessed from the host you can also take that and it's going to be generated for you as well this is Mind-blowing, right? So, this is all you can do using the Playright MCP server and the power of the cloud sonet 4 models which is doing everything for
13:06 you. I can't say that only the play MCP server is doing it for you. It's the cloud sonet as well which is doing a lot of jobs for you. So, that's it guys. This is how we can write our own test suite completely from the ground up using play MCP server and the power of the cloud in GitHub copilot. Once again, thank you so much for watching this video.
