Using Type + Keypress for a Custom Dropdown

How to Use Type + Keypress for a Custom Dropdown

Using Type and Keypress for a Custom Dropdown

Navigating the intricacies of custom dropdown functionality in web applications can often be challenging. If you've been vexed by dropdowns that don't behave as expected, you’re not alone. Here's a detailed guide on how to effectively handle dropdowns by using type and keypress actions in your scripts.


Introduction

Dropdowns are a common UI element, but they can be tricky to automate, especially when their behavior isn't straightforward. In this post, we'll walk you through the process of recording type and keypress steps to manage dropdowns efficiently. Let's dive in!


Step-by-Step Guide to Recording Dropdown Actions

  1. Navigating to the Target Screen
      • Start by navigating to the screen where the dropdown is located. If there were any prior steps you didn't use, such as clicking an unnecessary button, feel free to skip them and focus on the dropdown.
  1. Recording the Type Step
      • Once you’ve selected the necessary element in your table, initiate a type step on the required field. Note that this specific website may have an unusual way of handling dropdowns, but you can still manage it effectively.
      • Click on the dropdown and type in the desired value. For example, let’s enter "six months plus one connection" and confirm the step. Don't worry if it shows as undefined; this is part of the process.
  1. Handling Unusual Dropdown Behavior
      • Often, the typed-in value won't persist after confirmation because the dropdown requires an additional action. In this case, hitting Enter after typing the desired value ensures it’s properly saved.
  1. Recording the Keypress Step
      • Since the dropdown is still active, avoid using a click step. Instead, use a keypress step to finalize your input. Click on the input box, hit Enter on your keyboard, and confirm this action. This will help in saving the input value correctly.
  1. Testing the Keypress Step
      • To verify, change the value to something else, such as "one month plus one connection," and press play to see the action in the script. The new value should enter correctly, confirming that the keypress step works as intended.
  1. Switching Values and Ensuring Accuracy
      • Test the process by switching back and forth between different values. Always make sure to follow the sequence: enter the value, press Enter, and play the script. Adjust and test repeatedly to ensure the accuracy.
  1. Using Variables in the Dropdown
      • When setting up variables, place them in the type step. For instance, if you need the "dropdown variable" in your package, enter it directly in the type step. This consistent entry will ensure the value is saved in the intended field.

Conclusion

By following these detailed steps, you can manage custom dropdowns efficiently in your web automation scripts. Using type and keypress steps, despite their initial complexity, turns out to be a robust solution for difficult dropdown behavior. Ensure to save and test your steps consistently for seamless automation.


Video


Steps

Step 1- Click on Type Step

Notion image
 

Step 2-Click on 1 month+ 2 connection and change it to 6 months + 1 connection— Click on Confirm

Notion image
 

Step 3- Click on 1 month + 2 connection and change it to 1 month +1 connection — Click on Save

Notion image
 

Step 4- Click on Play icon and it will show 1 month + 1 connection

Notion image
 

Step 5- Click on Keypress step

Notion image
 

Step 6- Click on 1 month +1 connection — Click on Confirm

Notion image
 

Step 7- Again click on 1 month + 1 connection to 1 month + 2 connection

Notion image
 

Step 8 - Click on Play icon and we can see the changes

Notion image
 

Step 9- Click on edit and select @ Drop Down

Notion image

VIDEO TRANSCRIPT

 Okay, so here is how we do this. So, I went through all the play steps of getting to this screen, and now we have, this was clicking no changes, which was this, uh, dropdown right here. So we don't actually need this step anymore. Let me reset this as well. And then show you how we record this. So after we select the person in that table that we just had, we can record a type step on the ad package.

And this type step is a little weird to record. Um, cause this website is definitely a little funky with the way this dropdown is working, but here's how we do this. We can record a type step and then we're going to click this dropdown and we can type the answer we're looking for. So I'm going to do six months plus one connection just to, uh, Test for example, and then I'm going to confirm this step and it's okay that this still says undefined We're gonna confirm this and then I'll say no and we will now see that this has A value here now The reason it doesn't show the one that I typed is because we didn't save it with this drop down for whatever reason We're gonna need to hit enter after we type in what we're looking for So this is just a very unique kind of case that we've seen So what you'll see that I can do here is I typed a different answer.

Obviously, um, that's okay. We're going to record the proper way and show you how to set up variables with this now. But what we can do is I'm going to change this just to demonstrate this working to one month plus one connection. And then I'm going to click play next to this. And we'll see that that types in the one month plus one connection.

Now it doesn't select it. And because this is still a dropdown, we don't want to use a click step where we can use instead is we can use a key press step. So I'm going to record a key press step. I'm going to click on this box right here, and then I'm going to hit enter on my keyboard. I'll click confirm, and that's, what's going to help us save, uh, whatever we enter in that dropdown.

So if I change this back to one month plus two connection, uh, I think that's what it was. Maybe it's connection. I can click play, and then I can play the key press step. And we'll see that that saves in whatever we had typed again, just to show switching this back and forth. You can do this. Oops, sorry.

That was the wrong order. Click play here, play that, and then play this. So what we can do is, is the variable that we need to use for this package is going to want to go inside of the type step here. So we'll enter that in here. So this dropdown variable, um, I'm going to edit this for you now, but I think, just double check me.

The dropdown is what you're going to want to type. And that will get entered into this add package section. Um, so again, that's how you're going to record this dropdown. It's just a little weird of a situation. You're going to use this type and this keypress step, which looks to be handling this really well.

I'm going to save this for you in your account. The only step I edited was this step 10, which was originally clicking on this package, and now it types and uses keypress.

Did this answer your question?
😞
😐
🤩