Cy Prompt | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Advanced Features
Instructor: Artem Bondar
Lesson Summary
Cypress has introduced an AI-powered command called CyPrompt that translates natural language steps into executable Cypress commands. Here’s how to set it up and use it effectively. Setup Instructions Register for a Cypress Cloud account (required for this feature). Add the following configuration to your cypress.config.js file: experimentalPromptCommand: true Log in to Cypress Cloud through the Cypress runner to enable synchronization. Using CyPrompt To demonstrate, a simple script is created to navigate to an application, sign in, and execute commands using Cy.prompt . The command takes an array of strings, each representing a step that Cypress will interpret and execute. Execution and Performance When running the test, the AI processes each step quickly, and results are cached for faster future executions. Modifications to the prompt trigger the AI to regenerate steps. Considerations Generated locators may be questionable and less stable, particularly in complex applications. Self-healing features attempt to adjust to changes in the application but require supervision. Usage limits apply: free accounts are limited to 100 prompts per hour; paid accounts allow 600 prompts per hour. Overall, while CyPrompt can speed up script generation, caution is advised regarding the reliability of generated locators and the self-healing feature. For critical applications, manual verification of locators is recommended.
Video Transcript
Cypress just released AI-powered command CyPrompt that uses AI to convert natural language steps into executable Cypress steps. So let's see how to set this up. So first of all you need to register Cypress Cloud account. We will not use Cypress Cloud for anything else but without Cypress Cloud this feature does not work. Then inside of your project you need to add this configuration into Cypress config file to enable this feature experimental prompt command set to true and then in Cypress runner in Cypress runner you go here to the runs and over here you will see a button login with your credentials to the Cypress Cloud. After that synchronization will happen magically and you will be able to use Cyprompt inside of your project. Now let's see this command so I set up this simple script to navigate to application sign in type username and password and click sign in button. So this is the typical script how I would write it in Cypress if I would use just normal Cypress scripting and this is the example of the same exact script using Cy.prompt and look this is a single command Cyprompt then inside of it we have an array so this is the array of strings this is the string number one this is the string number two all the strings are separated by comma and every line or every string this is a step that Cypress will interpret for the step that you want to execute and convert it into the Cypress code in the background. So let's see how does this work so I going back to the test examples and I run this demo prompt.cy.js that will trigger this Cy.prompt and look what's going on so it is running the application and then trying to follow the steps line by line prompt by prompt executing those steps and here we go tests were executed so these are my five steps one two three four five and they were executed successfully and also I would like to point that it was reasonably quick so comparing to the playrate mcp for example where the execution in every step takes quite a lot of time this execution of steps was pretty quick which I liked. Now let's look what is inside so when we expand the prompt step under the hood we see the actual cypress step so every prompt cypress using ai converting into the cypress step and then execute it so over here for example a click sign in button was converted into cyget a router link login and then dot click or for example the prompt type email into email input field was converted into get input form control email type test gen test and so on and when I run this test for the first time cypress generates those steps and save them into the cache and if I try to rerun this step one more time look right now execution is a lot faster why because cypress remember those steps and if test pass successfully if we did not modify anything it will simply execute this cache if I will modify at least any single line for example I will remove the input field just type type into password field like this I will go back and now cypress see okay we have modified our prompt and it will trigger ai process one more time to complete through entire steps inside of the prompt and once the new cache is generated the next execution is faster so what you can do with this afterward you have kind of two options the option number one you can click on the code you can see this code generated and you can click save the code the code is saved and it is going back to your application so your initial prompt is commented and then the steps that were generated by cypress is provided line by line over here so this kind of a way to generate the cypress script faster but you should pay a close attention to the locators because look the locators like input ng invalid it's kind of questionable locator or button btn this is also questionable locator so when you have a simple application yeah maybe it's gonna work but in the more complex application your locator will be just brittle and unstable and just for the comparison how I would write it otherwise if I would write the script I would use sci contains button sign in sci get placeholder password more meaningful more descriptive more reliable locators the ai it's created workable locator but as you can see well sometimes it's questionable about how stable this locator will be later down the road and the second option you can just keep this prompt as is without converting it to the cypress steps line by line and in this case every time you run the sci prompt it will just use either cached result or if the test failed it will re-trigger ai process to execute your test but you have a dependency on cypress cloud and you need to remember that so let's look into another example for example let's look into the calendar so let me go to my test application so the calendar let's say I want to select the october 29th right and we have october 29 number 29 over here as a boundary month let's see if ai will be able to figure out and pick successfully the date in the calendar so going back to the prompt and I set up some preconditions so my prompt is click on the form picker input field right so this is the form picker we want to click by the placeholder and then select october 29th in the calendar so it seems like a understandable prompt from the human perspective right select october 29th but let's see what happened if I try to execute this thing so here's my calendar running the test so it's expanded the calendar but then it's struggling to understand what is it to select the october 29th couldn't find target element for calendar so it was not able to figure out what is the calendar and the fail it prompt and so on so on so it was not able to pick it instead we need to convert it to a more precise prompt like click the value 29 in the calendar and let's see what gonna happen in this example so running the calendar one more time so it's trying to run the prompt and yeah and it's selected october 29th which is pretty cool considered how much input I provided I said click 29 in the calendar so it also had option to select this 29 in the calendar but somehow it was able to figure out that it is active calendar and if we look into the locator and like oh my god so let me open it so look at this madness so I think when you automate test application you would not want to have allocators like this so that's why using sci prompt and using it for the locator generation is you know kind of questionable kind of questionable idea and also using the prompt you can use also verification so if you do something like verify october 29 is displayed in the input field if I run it one more time and it's selected october 29 and then it's validated the value so with the validation was a little bit better but still look at the locator locator is just awful like here is just awful so instead of using the same placeholder form picker that was used before because this locator is still available inside of the same input field AI was not able to figure this out it's provided a new more brittle selector for this input field but the assertion was generated all right sounds good moving on another use case that I hoped AI will be able to figure out is the iframes you know the cypress has a kind of painful history related to the iframes because it's tricky to select the iframes in cypress quite often sometimes it works sometimes it doesn't and I hope that AI feature of the cypress will be able to handle this so for example this iframe dialogue when I click on this button so these two buttons in this application located inside of the iframe and let's say I want to click open dialogue with escape to close click on specifically this button and if I go to my iframe tests where's iframe test this guy and I provide click open dialogue with escape close button specifically the name of the button click and that this is a button single simple prompt but unfortunately if I try to run this AI mode is not able to handle this look this button is highlighted you see so instead of selecting iframe dialogue and clicking on this button it clicked on this button with backdrop instead so unfortunately AI mode is not able to handle iframes and the last feature that I want to show you is a self-healing so self-healing triggered automatically if the application something change in your application so you run your test you run your prompt test is executed but if something changed later inside of your test then your test failing and cypress trying using AI trying to figure out this and automatically fix the selector for your scenario so let me show you the example so self-healing going back and we are on the smart table page let me show you this page first of all so we are on the smart table page and I want to type first name last name and username and my prompts are simple type artem into the first name type bonder into the last name type tester into username right so pretty straightforward one two and three so let me run this test so right now it's triggering the AI prompts artem bonder and tester is typed into the username so far so good but then let's imagine the situation that our developers decided to change the username into the middle name so what's going to happen after that so I'm changing the username to middle name real quick so checking the update of the application refresh here we go so the middle name is updated but our script remembered that we supposed to type by the username placeholder right so if you try to run the same cypress test self-healing how it's going to self-heal and where it's going to type so now it's typing the first name last name and the middle name it's somehow the username it types somehow into the id for whatever reason so our prompt did not change so our prompt still say the same type tester into the username but since username is not available anymore it is middle name over here and AI just decided to put this username into the id so what I want to say here is that be very careful with the self-healing feature and keep it absolutely supervised so I would be really really careful about this and I believe this is a few words about the prompt syntax and prompt styling that cypress recommends to do so when you type your prompts always start with the action word like type or click or enter or tap hover and so on if you want to interact with specific visible values on the page put them into the double quote so it will be more precise targeting for the AI hey this is what type of element you want to select so in your prompts you want to be as specific as possible and also like I mentioned this feature works only with the cypress cloud and there are limitations so where are usage limits so far for the free accounts you are limited to 100 prompts per hour or 500 prompt steps per hour and for the user with a paid account 600 prompts per hour this seems okay for me if you would use the side prompt for the step generation but like I mentioned before the quality of the locators that are generated by side prompt is kind of questionable how I would use this feature honestly I don't know maybe I would keep side prompt just a single line somewhere in the code for some scenarios that I cannot handle the stable locator or maybe where the selector constantly changes as something like this and I would cross the fingers hoping that AI will figure out correctly which locators to pick for pick certain buttons or something like this because you saw the self-healing also not perfect maybe this is the use case that I would use I would not trust side prompt to generate allocators for me that I would use in the real production environment so I believe that's it guys let me know what you think in the comment if you try this feature already with the Cypress I would like to know your opinion check the useful links down below in the description put the likes and subscribe and I'll see you next week