Transcripted Summary
In this test, I'm visiting my board and I'm adding a new list and then adding a new card.
Every time I'm getting an element, I'm using my custom data-cy attributes, which I have added into the code of my application. Since I'm relying on these heavily, it might be better if I don't have to add those square brackets and data-cy every time I try to find an element. For this, Cypress has a really great API that allows us to create our own custom commands.
So I'm going to create a custom command, which will allow me to just add the value of the data-cy. It will be sort of a wrapper around my get command. So to create my custom command, I'm going to call cypress commands add. And then the first argument is going to be get data-cy, which will be the name of my command. And then a second argument will be a callback function, which will take a parameter of input that I'm going to add to my get command.
So the way this is going to work is that I'm going to do a get command and then add data-cy and add whatever the input is into the command. So now I can select all of my get commands and rewrite them to get data-cy. And I can just remove this part. When I now save my test, you can see that it is doing exactly the same thing as it did before.
In fact, we can see the exact same commands as we had before. We don't see the get data-cy, we only see the get command. That's because our custom command does not really have logs yet. To add those, we'll use another cypress API, which is called cypress log. And this one is going to accept an object as an argument. So let's give it a display name, which will be get data-cy, a message, which will be our input.
So whatever we pass as an argument. And let's now save my test. We can now see get data-cy appear. So we can see get data-cy add list input in my first command, the second one, and the third one as well. We still get our get commands. So we can add a options object, which will say log false and make our timeline a little bit cleaner. Now, when I click on data-cy and open console, I can see that I don't really have too much information in here. So we can expand our cypress log by adding console props and then make this function return a selector, which will be our input.
When I save my test now and click on any of the get data-cy, I can now see that the selector was the input that I have passed into my command. So this is how you can create custom commands. There are some recommendations on custom commands in cypress documentation, which I find really useful. The number one recommendation would be don't try to add everything into custom command. They're useful for creating small utilities like this, wrapping some API calls, or even wrapping a certain part of logic.
You can kind of think of them as page objects, but they're not really that. They can wrap a sequence of commands, which is often repeated, but you don't really want to overdo it. Cypress commands are pretty readable out of the box, so there's no need to wrap everything in a custom command or some other abstraction. Also, you might have noticed that I'm getting some errors from my TypeScript compiler in my VS Code.
To learn how to fix this when we are in TypeScript, I recommend you check out the free course on TypeScript in Cypress that's available here at Test Automation University.
Resources
Resources
- Docs for creating custom commands
- Docs for creating autocomplete capabilities for custom commands
- My article on how you can improve your custom command logs
- Fun little thought experiment on how you can make your custom command autocomplete your selectors
