Generate UI Tests with TestSprite MCP Server + TRAE

Key Takeaways

Good morning everyone. How's it going today? Welcome back to the channel. In today's video, I'm going to be showing how to vibe code a complete application. Uh now, if you know me, you probably know that I am not completely on board with this whole vibe coding thing. I think that you should have some background that really understand what's going on behind your application. But today, we are I mean the new features and the new uh tools that we're getting for AI coding are just amazing. So, I'm going to show you what I would do if I were to actually v code an application over the weekend. Uh, I'm going to be using two main tools. So, I'm going to be using my AI coding tool. Uh, in this case, I'm going to be using Trey. I do use cursor most of the time, but recently I've been trying out Trey. Just wanted to show it to you. Uh, it's a great competitor. Uh, and you'll see how it works. It's um, uh, it's great. And once that tray has finished creating my application, I'm actually going to validate it using Testrite. Now, something interesting about this is that when you code your applications completely using an LLM, usually the LLM will have a little bit of trouble identifying where the edge cases are and where the weird errors are going to be or maybe some things in your UI, etc. And test sprite is precisely here to bridge that gap between the LLM application that you just finished and the actual production ready application or an actual application that actually works. So what they do is they have an MCP server that you just add to your ID and after you have finished VIP coding your application, you just run the MCP server and it is going to generate all of the validation tests of all the edge cases that it can figure out about your application. Run them and give you a report about all of those edge cases. And then you can feed that report back to your coding assistant and then it will just fix everything and all the edge cases so that you finally have an application that works. And what we're going to be building is a very quick flashc card application with some authentication right here. Uh you can essentially uh log in, you have a dashboard, you can create new decks of flashcards and then once you have your decks you can just click on study deck, check the answers and there you go. That's essentially what we're going to be building. very straightforward and you would usually think that you can oneshot it with an LLM, but you will see how using these tools will help you quite a bit. Um, let me know in the comments if you're pro or against uh LLMs and VIP coding applications. Uh, feel free to let me know. Very interested. So, without any further ado, let's get right into it. [Music] Uh so let's uh actually uh start this up. I'm going to try to build the entire application right here in front of you. Hopefully it goes well. So I'm going to build the prd file right here. And this file is going to have the entire description of my application and how it is supposed to work. Okay. And then afterwards I'm going to run my MCP server on top of this one to validate it. So, I'm going to ask uh first Trey to build my PRD for me. So, I'm going to say, "Hey, Trey, uh please build or write a PRD right here." That should be for a complete flashc card application. You should build this in Nex.js and it should be an application that basically allows you to go through some flash cards. It should have some au authentication system. Although do not connect it to any database. Everything is going to be in development environment right now. So just put everything into a simple in-memory system. You can store everything in an array or something like that. And uh then when I reload the application, it's okay if it erases itself. Uh write the PRD and be very detailed and very precise because this is what we're going to be using to actually build the application. So let's get right into it. There we go. And let's send it over. All right. So it generated a very detailed PRD. I went over it very quickly to try to validate that everything makes sense. Didn't read the whole thing cuz this is just a demo, but uh it all makes sense. Uh it's supposed to be able to run without me having to set up any database or anything. So that's good news. Otherwise, I would have uh extra job here. Uh so let's uh try to have it build it. So I'm going to say now build the application. And by the way, I am using Willow Voice. The link is in the description if you're interested in dictating your application like this. It's definitely a pretty cool app. Uh so let's see what it does. So uh the cool thing about Trey is that it actually makes a list of the whole thing of the entire uh task list of tasks that it has to complete. So for example, it will initialize the nextjs project, set up the project structure, create the data models, etc. U cursor is great by the way also. I I like both. But uh recently I've been blown away by Trey uh what these guys are doing. Uh it's running some commands. Oh, it's interactive. So, all right. I'm going to continue. Let this run and we'll be back once this vibe coded app is completely done. All right. All right. So, it seem to has finished. It seem to have finished. Uh let's take a look at the result. So, I'm going to go right here to localhost and let's just sign up right here. I'm going to say Alejandro. My emails is going to be hello@acample.com and my password is going to be one two three four. It's going to create the account. Oops. So now it seems to be working. So let's actually take a look. What I'm going to do is restart the development server. Go back to my to my browser and let's just initialize actually the whole thing right here. Uh let's just actually start it up. I previously created an account with test@acample.com. U the authentication does not seem to be working. Let me see if I can just create it again. Uh create account. Okay. So I am redirected right here to my dashboard. I can Okay, I have my quick actions to create a desk. Browse all desks, all all decks, etc. Okay, manage cards. This one does not seem to do much because I don't have any cards. Can just start a new deck. I'm going to call it test deck right here. Whatever. And I can just start adding cards. Okay, this seems to be working. Okay, add another one. Have different choices. Okay, then I can click on study deck. Oh, this one we have a 404 error. Okay, I'm just going to go back right here to the home right here. Okay. And deck is gone. All right. All right. So this seems kind of a good first step for a first draft for the full stack application. Uh probably in the future I could use chat or something more complete for the front end. I think that this layout is a little bit too minimalist for me. But uh yeah, it seems all right to me. Uh what we're going to be doing now is we're going to be using Testride. Uh what these guys are doing is they are going to generate with AI a bunch of different tests. In this case, we're going to be testing the front end. So, we're going to generate a bunch of different tests and validations to make sure that the application works. And then they're going to run those tests and tell me which ones were which one passed and which one didn't. And for those that did not pass, we're going to get anam a very clear detail of what failed so that in we can just feed that document back into my ID and it will fix the whole thing. Okay. So, let's get right into that. All right. So I have now restarted a development environment and now I'm going to start testing it. Now I could man go manually and start testing my application and all and try to see if it works correctly and validate the whole thing. But I'm just going to want to leverage actually uh test sprite. And in order to actually use it, it's going to be very very straightforward. All you're going to have to do is just go right here to try MCP server. And here you have all the documentation of how to do it. It's very very straightforward. You have a demo of how to install it. very very straightforward. Uh it is compatible of course with any ID that you're using. So cursor uh tray windserve whatever. So I have already installed it myself as you can see right here I am using the builder with the uh tray and as you can see right here in MCP I already have my test sprite um MCP server working. So what I'm going to do right here is basically I'm just going to ask uh my tray to test it using test sprite. So, I'm going to go like this. Um, test this entire application using test sprite. And there we go. Uh, there we go. Just send it over. I'm still using cloud cloud for Sonnet, by the way. And, uh, there you go. That's basically all you have to do. That is going to, uh, start calling the tools that it needs to call. It's going to start setting up the entire development environment and setting up the whole thing. And it should work now. So let's uh wait and see which tools it calls. And there we go. It opened up the test and configuration file right here. Um now right here if you if your application has some authentication, you want to add the the uh login for that. So in my case it is test.acamp test.ample uh test.est.com and the password is this one right here. And the local development port is 3000 if I remember correctly. Uh yeah, there's 30,000. Uh and this is important because this is actually going to create a tunnel kind of like Enro between their cloud and your local development uh server. So that way it will be testing within your actual local development um m um environment. So uh great and then right here you have to actually send the your product uh specification dock or your PRD. So let me just send find it right here from tray uh which is the one that we uh generated from the start. So I'm just going to go right here reitin finder and copy it and paste it right here. And now I should be able to just launch all of the tests from there. Uh you will see that it basically starts working uh by itself and it starts calling a bunch of tools. As I told you, this is agentic. So, it's going to do a bunch of stuff by itself. So, let's just sit down and lay back lay back and um see what it comes up with and if our application is actually working correctly. And there we go. It uh it automatically did a bunch of different stuff. What I did is I just gave it full permission to update and do a bunch of things. Uh and as you can see it already started uh executing the tests and it created a tunnel between my local environment right here and their servers which is where they are actually running the tests and it also generated quite a few files right here. As you see it has the test pride uh front end test uh plan. Uh so these are all the tests that it's going to try to execute to make sure that it works correctly. It has the standard P the standardized uh PRD in a JSON file as well. So that in case you want I mean this is the one that it is using to actually generate the entire set of tests and has the code summary the config bunch of different stuff. Pretty pretty cool actually pretty honestly pretty cool application. Now if you want to take a look at the tests in real time uh right here you can see how many are being uh executed. But what you can do as well is just go back to uh your test sprite account. And of course, since you signed up uh before and everything is connected to your account, you can just go right here. Uh I mean when you sign it, you when you sign on, you're going to enter right here. You're going to MCP tests and here is uh the MCP tests for my application. So as you can see, all of them are running uh right now and they are running in my machine through this tone tunnel. So I'm going to uh leave this like this and get back to you once they are all done uh so that we can validate that the entire application is actually working correctly. So let's go. All right. So as you can see all the tests have uh finished and I did fail a bunch of them. Um just uh to so you know you can actually take a look at what actually was tested by clicking on right here and then you will see an actual video of the playright automation that tried to make your test uh that tested your your application. Right. So here you have the entire thing how it went through it. Just going to speed through this one. You can see that it tests different things. It tries wrong password correct password and changes the username etc until it works correctly. And now after that it works. and that you pass the test. So that's basically what's going on with all the tests. And what happened right now is that it generated this test sprite mcp test report.md. And this is the one that you're going to feed back into your application to I mean into your ID to actually correct the whole thing. So let's do that right now. Now use this test report to fix all the errors that were detected during the testing of this application. And I'm just going to append this one right here. And uh there we go. So, we should be able to run this and I will let this run just for a minute and I will tell you once this is finished. All right. So, let's actually test it out. Now that the test has been finished, we're going to go right here. I'm going to call myself Alejandro. Going to do hello@acample.com. Same thing for the password. And there we go. We're inside now. Everything seems to be working correctly. So, that sounds good. Going to click on new deck right here. Deck name. Going to call it uh test deck. Why not? The description, whatever. Just going to create it. And I can start adding cards right here. So, I'm going to just create it. Um, okay. So, let's just run the study deck. Question one, show answer. There we go. The question two was easy. The question three. Okay. And finally, we have this one right here. Uh it doesn't really show that it is true or false, but uh there we go. Okay. And it actually starts counting which ones were correct and which ones were wrong. I don't know how it knows which ones were correct and which ones was were not actually. Um there we go. Okay. So I guess everything was correct. Um okay. And now we can go back right here. I can edit this card, this deck right here. I have my decks right here. And then I can also go back to the dashboard. Okay. Well, the application seems to be okay. Of course, there are still some details that should be uh taken care of. Um, my recommendation would be that if you're trying to build this application like this, you probably want to use a completely front- end uh uh framework that's already pre-built for you or some library like Shatn to have a better layout and interface. But um there you go. That is pretty much how you create a full stack application in just a few minutes using your ID which could be tray uh winds surf cursor etc. Uh you can also use test sprite for generating the automated AI generated tests. Um and improve just the and just accelerate the way that you validate the entire application. Uh there you go. So seems to be working. Thanks a lot for watching and u yeah have a good one. [Music] [Music]