This AI Changes Vibe Coding Forever | No More Bugs or Errors | TestSprite 2.1

Key Takeaways

Now that we have a lot of these advanced AI coding tools like cloud core, Cordex, anti-gravity, cursor, etc., creating advanced apps has become dead simple. I mean, even if you have no coding knowledge whatsoever, you can give a simple text prompt and turn it into a production ready app in a matter of a few days if you're really into it, right? But the problem here is that all these AI coding tools are great at implementing things that you want, right? For example, let's say you're developing an app and you want to incorporate a new feature. You just go ahead and give a prompt and hit enter and the AA agent plans it out and just implement the feature. But the real issue here is that all these features might not be 100% foolproof. There might be some sort of security issues, vulnerabilities or let's say bugs within your app and it will be hard for you to fight. Right? That is the reason why we use an AI powered software testing agent called as test sprite. And I've been actually using it quite extensively for the past few months. And they recently launched test sprite 2.1. And today in this video we're going to take a deep look into it. So basically the idea is that you can use your favorite a coding tool to build whatever app that you want and after that you can give a simple text prompt and ask test sprite to do a complete back end or front end test and hit enter and everything will be done in no time. So today in this video I'll give you a complete walkthrough of how it works, how to set it up and also what's new in test sprite 2.1. So let's quickly get started. So this right here is Testprite and this is the platform that I've been talking about. And if you do want to access Testbrite and start using it right away and that too for free, well, click the link in the description below and head over to testprite.com and you can go ahead and sign up for any account. And as you can see, it says 10x your AA native dev speed with our autonomous AI testing agent handling verification. Now the interesting thing here is that Testrite actually works with whatever a coding tool that you're using, whether it's cloud code, anti-gravity, or cursor. Well, testite has an MCP server and you can just add that to cursor or whatever tool that you're using in just a single click and after that you can actually do complete test by giving a simple you know text prompt and again test sprite has been in this space for some time now but the 2.1 update actually brings even more features for example test sprite now allows you to connect your GitHub account to test prite and you can also connect a repo and after that every time you create a new PR test sprite will run a test on its own and then it will block the merge if there is any issues or conflicts or if any bugs exist. Well, test sprite will block the merge. Okay, that's how cool it is. And not just that, testing is now several folds faster and we have the option for editing and customizing test as it is progressing and there's like a lot of new features. So, first thing first, click the link in the description below and head over to testpite.com and sign up for a new account and I'll quickly go ahead and log into my account. All right, so there you go. I'm now logged into my dashboard. And this right here is a sample URL shortener web app that I created just now using cursor. So I just went ahead and gave a prompt and this right here is the output. So basically the users are given the option to let's say enter a long URL and they can click on the shorten button right here and it will generate a short link along with a QR code and again the users are given the option to download the QR code aspg file and if needed they can even enter like you know custom slug and then generate you know short links. So this is the core functionality of the app. Now I created this web app just to show you how actually test sprite works. Okay. So here I'm using cursor but in your case it could be let's say anti-gravity cordex or let's say cloud code whatever that is. Now next step you need to head over to test sprite and after that if I click on this option right here that says test locally MCP it takes me to this MCP test page and click on this cute install button right here. First of all you need to create an API key. So click on this option right here that says create a key and then click on new API key and let's just say cursor 2 and it'll create a secret key. So there you go, the API key is ready. And next step, I need to select my AI coding tool. So if you want to add this to cursor, well, you can click on this button right here. Or if you want to add this to cloud code, well, you can just go ahead and run this command. And again, you have to replace your API key in here. Or if you have any other IDs, you can simply copy this JSON part of test sprite and then you can replace your API key in here and go paste them out and it should be good to go. Now, in this case, I want to add this to cursor. So I'll click on this add to cursor button right here and click on open cursor and it will open this page right here. Okay? And the thing is that all you got to do is to copy this API key from here. And after that open cursor and you have to paste that in here just like this. And now you can click on this install button just like this. As you can see the test sprite MCP is active. And here we have around eight tools. And yeah that's how simple it is. Now test sprite is successfully added to our project. And now to run a full front end test or backend test. Now it's pretty simple and straightforward. you open cursor and now that we have test sprite added I'll open uh let's say a new chat in here and I can simply give a prompt something like this can you please run a full front-end test using test sprite there you go this right here is the prompt I'll give and to keep things short I'll just say I only want to let's say run six important test otherwise uh you know test will go ahead and uh scan the entire website or web app that you're building and it'll find all edge cases and it'll create a lot of different test. So just as to show you how things work, I'll just limit it to six important test. And now I'll click on the send button right here. And now that test sprite is already added to cursor, it will go ahead and bootstrap a new test. And yeah, let's just wait for it. There you go. As soon as I gave that particular prompt, it opened up this testing configuration page. And as I mentioned in the beginning of the video, test allows you to do both front end and backend test. And first of all, here I need to select which one of these I want to do. In this case, I'll select the front end option. Scope is going to be codebase. And next up, if your you know app has any you know login vault or something as such you can enter the username and password in here. So my local dev server is running in local host 3000. So that's selected. And next up you need to upload a product specification doc. And now how do you develop one? Well you can just ask cursor itself. So maybe I can open a new agent. Can you please create a product specification dock for uh this project for running a front-end test. Please create a MD file in the root of the project. And now I'll click on the send button right here. And now cursor will create amp file and I can upload that in here. So let's just wait for it. All right. So there you go. The product specification doc is now created. So in your case if you already have one you can directly upload it. Just to show you how things work. I have created a product spec uh MD file. So I'll click on the keep button. And next step I'll upload the same in here. So the same is now added. And now all I got to do is to click on this continue button and click on okay. And I'll open cursor again. And I'll just open the previous one. So there you go. So bootstrapping a test sprite uh test for this particular project is now complete and now it will go ahead and generate the code summary, generate the front end test plan, select six important text and execute them and review results and share with user. And again we explicitly asked we only need to like run six test because I just want to keep things fast. But if you're doing it on a real app just go ahead and you know run all the test and yeah in any which let's just wait for it. So there you go. Test sprite has went ahead and selected like six important tests to carry out. And here it has opened up this generation you know page and here I can find a progress of the same. So here we have six of them. And if I open cursor as you can see it has planned quite a lot of test but okay so it actually planned around 49 test. So that's how you know comprehensive this is but since we asked only to do like six test like six important one so it has like shorten URL validation custom slug delete link slug redirect and also stats display and currently it is actually running the test. Now the thing is that it will take some time and again this is actually a new feature right inside of test right that is you're able to see which test is being carried out and if you click on the same you'll be able to let's say you know uh view a preview of the same and you'll be able to find even more details so in this case it says verifies a user can shorten a valid HTTP/TPS URL and see success card with the new short link and QR code and now the most important thing here is that you now even have the option to edit the test case directly within this interface right here so towards the right side I have an option that says edit steps directly in the preview and if you click on this edit test case option right here I mean first of all we'll have to wait for it to complete okay here we have one that has already completed so I'll click on the same and now if I click on this edit test case option right here it will open up the preview there you go and now I can edit the locator and then I can actually go ahead and make changes for example if I want to add a timeout well I have the option to enter the timeout in here what kind of interaction do I want is it like a click navigate input scroll assert. Well, I have the option for that and I can also if I want let's say navigate to a custom link I can input the URL in here and I can make manual changes in here. It is to say I can instruct or let's say give additional context to the you know uh test sprite and to let it know what kind of test I'm actually looking for. So as far as this test is concerned first of all it has to navigate to local host 3000 and after that and it has to verify the element is visible and next up this right here is another one and if I want to let's say make any changes I can click on this option right here and if it selected like a different you know uh input form or button so currently this right here is the action so I can click on the same and as you can see the interaction is click and for some reason let's just say this uh it will take some time for this button to act be active right so if you want to let's say add a interval or let's say a timeout or if you want to instead of click you want to let's say input scroll assert like if you want to do a different action you have the option here so this is actually a really cool feature right instead of test sprite 2.1 in which ways I can head back and again the even cooler thing is that I can see in real time exactly what the AI agent is doing so in this one it is actually trying to shorten a valid URL right and if I click on this play button right here as you can see it has entered a sample URL clicked on the button and we have our uh output in here like the shortened URL along with the QR code and everything is visible in here And again I can find exactly what the agent did. So like navigate to the website, fill in a dummy URL, click the uh shorten button, verify the element is visible. Okay, a couple of them. And if you want to make any sort of changes, well, you can just go ahead and give a custom prompt in here as to exactly what you want uh you know this AI agent to do or basically for this particular test, how you want to modify it and you can just go ahead and give a prompt and click on this update and regenerate steps button and it will go ahead and make changes and you can rerun this test. So that's one important thing. Okay, now I'll head back to the uh uh generation page. And as you can see, four out of six of them passed. So if you find any failed test in here, well, you'll be able to uh find that in here. Okay, in which it is basically the flow. I'll wait for test sprite to complete the testing process and I'll see you afterwards. All right, so there you go. As you can see, it says generation completed and in total we had around like six test and out of that five of them passed and here we have a failed test. And again if I open cursor it is actually preparing the test report. So we'll wait for that. In which way I'll open the failed test. And as you can see here we can find a reason why it actually failed. So it says back to snip button did not navigate to the same route. Okay. All right. So it says link not found. So here we have a error and again we can find a detailed note on the test failure in here and it could not be completed because navigation back to home route did not occur. Okay, that's the thing and all these test is actually completed and the interesting thing is that you can actually view a live screen recording of the AI agent trying to do you know all these tests. So in this case it is actually trying to create a short link with a custom slug and it actually works. So you can find a screen recording of the same in which ways here we have the test report ready and if I click on the same there you go here we have the test report. Okay, I'll click on keep all. Okay, there you go. Here we have the test report and as we saw only one of them failed and again if I head back to uh the MCP test section right within testite and do a refresh I'll be able to find the same in the web interface right here as well and if I want to I can click on any one of them and again view all the testing details and also the preview like screen recording and also the code as well which is exactly what we see in the uh test page this page right here. Okay. So this is the basic flow of carrying out a test using Testbrite. Now there are some more important features that are newly introduced in Testbrite and one of them being the tests are now actually faster. Earlier you had to wait for a lot of time. Well, it's now way faster now. And again you have this page right here where you can actually go ahead and edit the test as it's going on. And again you can find full progress in this particular page right here. Next up if you head back to test sprite and again if you scroll down you'll find an option that says uh GitHub app. And I'll click on the same. And now it says connect your repositories to automate your testing life cycle. And now I'll click on this connect with GitHub app right here. And maybe before that I'll actually go ahead and let's say log to my GitHub account and push I mean create a new repository and push all the content. So for this I'll just go ahead and let's say URL shorter. And now it is going to be a private one. And I'll create the repository. And first of all I'll go ahead and uh create a repo and push everything. And now I'll copy all of these. Head back to cursor. Paste it in here. Hit enter. All right. URL shorter something random. Click on commit and I'll sync all the changes. Click on okay. All right. So that part is now complete. Okay. And now if I refresh, there you go. Here we have our repo ready. Next step I'll head back to test prite. Click on this connect with GitHub app option right here. And now I'll click on install and authorize. All right. So next up I need to select the repository. And now I'll select the URL shortener repository right there. And I'll make sure to enable this option right here that says run on pull request. And again, yep, I'll just enable include draft PR and also blocking PR feature. And I'll click on save changes. Okay. So I have basically connected test sprite to my URL shortener repo on GitHub. Okay. So that part is now complete. And now what happens is that whenever there is a new PR in this particular repo uh test itself will go ahead and spin up a new agent and carry out the entire testing operation and show us the you know result in there and if there are any issues it will block people from merging that particular pull request. So that is basically how it works. So in this case just to show you how this actually works in action I'll just go ahead and add this MCP test report. Okay. So basically it has created the test report. So I'll add the same in here and I'll go ahead and say can you please analyze the front-end test report and fix the failed test and then go ahead and create a new PR uh in our GitHub repo. And now I'll go ahead and hit enter. So basically here we have a failed test. So here we have the analysis and also detailed finding and now the AI agent will use all of that to fix the issue. And then I explicitly asked to create a new PR in our GitHub repo. So let's just wait for it. All right. So there you go. It has actually went ahead and fixed the issue that test sprite identified and right now it is trying to create a new PR. So let's see. All right. So there you go. A new pull request is now created. And I'll manually go ahead and create this pull request just like this. Okay. Let's just wait for it. And now there you go. As you can see test sprite pre-check is now in here. Since we already added test sprite to this particular repo. Every time we create a pull request, test sprite will do the testing and as you can see it says waiting for deployment and after deployment is done test sprite will go ahead and do all the test again and make sure everything works and if there are any issues test sprite itself will go ahead and block the merge and also show us all the output. So that's basically how it works. So that is also one more cool new feature right inside of the newest version of testprite. So basically this is how you run a full front end and backend test using testbrite. So the process is pretty simple and straightforward. You go ahead and sign up for testprite.com and create a new account. And after that, you add the testprite mcp to whatever a coding tool that you're using. And once added, you can just go ahead and give a simple text prompt asking testpite to do a full front end or backend test or even both. And hit enter. And it will go ahead and carry out the entire testing operation autonomously all without you having to lift a finger. And once done, you can verify everything. Uh find details of why each test passed or failed. And if there is any failed test, you can drag and drop that, you know, uh, report to the AI agent that you're using and ask it to fix it. And once everything is done, you can even connect your GitHub, you know, report directly to test sprite and every time a new PR is created, it will automatically run a test and, you know, you can just go ahead and figure out things later. Okay, if there is any problem, test sprite will let you know about it and it will also block the merge and again you can just go ahead and take it up from there. So that is basically all I wanted to show you in today's video. So the improved version of test sprite that is test prite 2.1 is now much more faster and also we have all these added capabilities and if you do want to try it out all you got to do is to click the link in the description below and head over to testbite.com and yeah that's pretty much all I wanted to show you in today's video so I hope you guys found this video useful if yes make sure to subscribe and I'll see you in the next