Step 1- Click step is to open an menu-Drop down step -Click on New automation

Step 2- Click on web

Step 3-We go to web page to get regular click step to select options from menu

Step 4- To record an option, click on Click Button to get recorded drop down menu

Step 5- Click on Step 3 – Click on three dots to get Advanced Settings, Change Step Type, Duplicate step and update section. It gives us to select recorded elements

Step-6- Go to page to get ups where in we get native elements to select and also options to change record and typing step

Step 7- Click on + Icon to get other option.

Step 8- We get options like Click step, Type Step, Hover, Keypress

Step 9- When we select from the dropdown it gives the value of element in step 2 and in step type 3 we can change the value

Dropdowns are a common element in web forms, providing users with a selection of options to choose from. However, handling dropdowns in automation tasks can sometimes be tricky, especially when deciding between using click steps or type steps. In this blog post, we'll delve into the nuances of dropdown automation based on a conversation between Jeremy Redman and Kyle, where they explore when to use click steps and type steps for different types of dropdowns.

Hey everybody, Jeremy Redman here, Task Manager with Kyle. How's it going? Okay, cool. So we brought up this one thing, or we, this one thing got brought up to us, uh, from a customer about how to handle certain drop downs. And Kyle is going to go on record here, uh, and help with a couple of the things you might want to look out for.

When you select drop downs from a form, you might instinctively think of using click steps to interact with them. However, Kyle highlights a scenario where using click steps may not be the best approach. He demonstrates with an example of a selected element dropdown, emphasizing the need for a different strategy.

Moving on to native dropdowns that have a standard appearance across different websites, Kyle explains why type steps are more suitable in this case. These dropdowns, native to the browser or device, require a different approach compared to customized dropdowns. Kyle walks us through the process of recording type steps for these native dropdowns, shedding light on the importance of understanding the underlying mechanics.

Kyle compares the characteristics of native dropdowns on different platforms like Mac and Windows, highlighting the consistent use of type steps for these standard dropdowns. By recognizing the visual cues of a native dropdown, users can make informed decisions on whether to utilize click steps or type steps in their automation tasks.

In conclusion, Kyle emphasizes the importance of experimenting with type steps for native dropdowns and the potential pitfalls of relying solely on click steps. By understanding the nature of the dropdown and its visual cues, users can streamline their automation processes and ensure accurate interaction with dropdown elements.

VIDEO TRANSCRIPT

Hey everybody, Jeremy Redman here, Task Manager with Kyle. How's it going? Okay, cool. So we brought up this one thing, or we, this one thing got brought up to us, uh, from a customer about how to handle certain drop downs. And Kyle is going to go on record here, uh, and help with a couple of the things you might want to look out for.

When you select drop downs from a form. So Kyle, start a new automation and then go to the site that might have some of these drop downs. One you said was a selected element drop down, right? Correct. And so, for instance, in one of these examples, you're going to, you Instead of making a click step. So if I'm thinking about it right now, for me, Kyle, I'm like, okay, if I want to select a dropdown, I'm going to use a click step, right?

Yeah. So show me a dropdown where I would need a click step. Um, okay.

Okay. Um, one of these, do you want me to show you it in normal Chrome so we can click it a couple of times or yeah, sure. Show it to me like you're recording. Oh no, not recording. So this is the dropdown we're looking at is something like this. So we have something to click and that expands the options Something to click so something to look out for is you have something to click and then it has a list of options All right Yeah It'll look a little bit different than the ones that we when we go to the other websites of the style Usually if you're using click steps the website applied some custom styling to it If it's something that is more that we're going to use a change step for the type step for it.

I can show you that on UPS. Okay, show me, show me how these are captured in the recorder. Yeah. So for this one, we'd record a click step of the icon down here to open it. Okay. Okay. That opens the menu. And then we have another click step to change the menu. And this is where. This second click step when we're selecting an option is often going to be find by text.

So we click the three dots here and advanced settings, and then we enable find by text and then we can enter some texts there. The reason this is really helpful is like, let's say that this was a, um, this is a type step. No, this is a click step. That's why we need to use find by text. So the first step here, let me reload the page or let me play this so that it closes that menu.

I think. I don't know this website's gonna work. Yeah. Okay. This step is responsible for opening the drop down. Yep. Okay. Great. I'm with you. So, a click step to open the element. Correct. And then a click step to do what? Select an option, to select an item. Because we're clicking again. Oh, wait. My camera's kind of Okay.

I'm clicking again to select an option here, right? Okay. But let's say that I didn't always want to select photos. This is no, don't do that. Don't say that. Don't go on. So this is a normal, what I would consider to be a regular dropdown. I use click this and then click that, right? Every time this runs, I want to click to open the dropdown and then I want to click photos.

Now, is that, is that, is that the end for this type of drop down? Yeah. Okay, now, start the another type of drop down. Don't, don't talk about it from this point of view. Talk about the other way to handle it from the beginning. Okay, um, do you want me to delete these steps? Yes. Okay, I'm gonna delete these.

And then we're going to add in, we're just going to edit this, go to page step to go to UPS instead. Okay.

Okay. So come on UPS. And this, this will be great to illustrate the difference in how you type, how you tend to think. About dropdowns, right? Like, they're not all the same. Sometimes they are different. So here is a form, right? This is a form on UPS that one of our customers was using. Okay, now this dropdown, what makes this dropdown different from the other one?

So, uh, let me show you in Chrome really quick. So this is, I'm not recording that way. I can click and show you things. If I click into this one, this dropdown is that kind of standard native one. We can see across a ton of different websites. So this is a native, like it's native to the computer, native to your phone.

This isn't by native. It's native to Chrome, native to your phone, native to your laptop, not native to this. website with their UI and their custom CSS, right? Their custom design. Yeah. They're not designing this. If they wanted to design it, they went the other route most likely. Okay. So this, if I, and then if I want to change something, I'm clicking in here and then I'm clicking again, which is why everybody confuses this to be two click steps as well.

The difference is, is that the website considers this a typing step. Because as far as websites are built and as far as they know, this is an input field with options available. Okay, great, great. So this, so is it safe to say that native drop downs that look like, they'll all kind of look like this if you're on a Mac.

They should almost, they should always have this style and then windows will Windows will be not the same, but it'll have the same kind of characteristics. But Windows users will understand that this is the same kind of They should recognize their dropdown. They should recognize they're normal. Okay, so is it safe to say that when you see a native dropdown with options like this, it will most likely be in a Typing step that you'll have to use.

The native dropdowns will always be a typing step. Okay, great, terrific. The native dropdowns that are native to your Windows or your PC or your, you know, whatever. Um, Windows PC or Mac, Apple, will always be a type step to select from the dropdown, correct? Correct. Okay, now show us how that's done, how you wanna, how you do that.

So it'll be kind of confusing when we record this. By the way, why don't I see the what's next there? Because I had deleted my steps and then I had done some other things, um, that made it go away. Okay. So what I can do is I'll record a type step. A type step. Okay. And then I can click the dropdown. I don't know if this is the Chromium window or not.

I might have. No, it's not. Okay. This is the recording one. There we go. So go type wherever needed, even though we're not typing, it's the changing that we're talking about. The, the form, the, this select is changing. So if we click in here and then I select something else, we'll see that this is changing also, right?

Which is telling us that it's recording our type steps the same way that normal typing steps would show. Can you move your browser over? Cause your picture's in the way. Okay. There we go. Okay. I'll redo that. So we'll see that this number changes. Uh, yeah. So let's see, it says one 60, one 99, so it's not going to type the, the actual.

Words you see, it's going to know that select value down there at the bottom. It depends on the website, what's going to be shown here, some websites, and I don't want to inspect element and show you all the nonsense for it. But basically, as far as UPS knows 160 means New Zealand. So they display New Zealand for the user, but they remember 160.

So if New Zealand ever changes their country's name, it doesn't affect UPS. That's the whole kind of idea and why websites do this. Okay. So if we were to confirm this step, we're done recording. This will record that number. Okay. Okay. Okay. Because that's what the, that's what this was changed to. As far as the website knows, this was changed to one 60.

It just so happens that humans read it as New Zealand is what we can think of that as. Yep. So if I was to change this the same way, like if I typed my first name, right, if I type. Can I record a type step to show you this? What are you doing? I'm going to, I'm going to show you how you like change the drop down value.

Okay. So if I was to record a normal type step of name and I entered Kyle, and then I changed this to Jeremy, it should type Jeremy, right?

It's the same thing for drop downs. Sometimes with the websites, they might have a number versus like a name and things like that. Yep. We handle this for the users automatically. So this recorded when I clicked into the browser. Um, this, uh, this is back on that country dropdown. I'm going to delete the name one.

If I wanted to change this from New Zealand to something else, if you wanted to change the dropdown from New Zealand to something else, We recorded the type step already of changing it to New Zealand, right? And it's kind of confusing how it's the 160 there. We automatically handle it for the users if they want to enter what was displayed.

So if I enter Argentina here and I save this, even though Argentina has a number, like 100 or something, if I play this, we handle this for the user automatically. Now, how does that work necessarily? Because I wouldn't intuitively know to do that. Can I inspect element and show you or no? No, I mean, not yet.

Not yet. So like, you only know that to do this because you've inspected the element in the element inspector panel, right? No, that's just how I was trying to tell you. But okay, yes, I found that out a long time ago. So I'm applying the same thing that's been found out a long time ago here. Okay. Of this select has a different value.

Then it does label. Okay. So first, the only thing I really want to know it, cause there's two different things here. There's one, how to set up for a native dropdown like this with a type step, not a click step. That's important when you see a native, native looking dropdown. you use a type step, not a click step.

That is something you might want to experiment with if that step is failing. So again, just try that. Try making it a type step and doing it if it fails just in case. Now, if you want to change that type step, Now continue Kyle. So changing this type step, we can change it to whatever we want. I keep clicking in the browser.

Um, we can change this to whatever we want. So, uh, for a second there, you saw that suggested step of 10. That's our, what would it do if I push, if I put, um, Argentina one. It probably won't. Let me change it to like Brazil so that this isn't the same one that we have selected. It probably will keep the same one selected because it doesn't, or it's not the closest one.

That might just kind of be a luck thing of it being the closest result. Great. So wait, so, okay, so we can stop there. You can kind of guess on 100, you really should guess. Can I, can I demonstrate how wrong it goes? If you're wrong and how quick, you know, because if we want to record a click step here of changing this to Argentina, I'm going to suffer.

And before I report it as a bug, I'm going to try the opposite way. So if I record a click step, Okay. And I click in here. It should have stopped me. That's what we should have learned over using task magic for a couple weeks, but that's fine. You don't know that yet. No big deal. Now, if I select something else.

That's fine. I can confirm this step. Fantastic. I confirmed it and then it played that step. That's kind of weird, but we're going to ignore the fact that you should recognize that that's weird, right? I'll refresh the page really quick. And now if I play this step, there's no possible way for me to change what it's, what's being selected.

I can't record a click step because if I go here and then I do this, it goes away. It's just all sorts of wrong. So it actually showed me Costa Rica there. It shows you it, it's cause it, all it does is open the dropdown. It can't select anything though. Wait. So go, go to the dropdown, select a different one.

Like select Brazil. Okay. Now replay that step. And, uh, okay. It just opens the dropdown. It just opens the dropdown. Yeah. But it can't record another click step of the option. And the reason you should know that is one. Um, when we play it, when we try to record a click step, this will go away. Because the browser is trying to focus elsewhere and that drop down has to close.

So that's how we know that that's wrong. But we immediately see that if we record a type step and we change this to Canada, that changes. And if we change it again, that changes. And if we change it again, that changes, which kind of leads us in the direction of me not having it on the screen. This changes, right?

Consistently that number at the bottom, which is telling us that we are recording something. Okay, now back on the other website, if I was to go here and record, what did you just do there? I just edited the URL. Okay. If I go down here and I try to record a type step, which doesn't make sense from the beginning, right?

Slow down. Okay, let me close this. So let me delete the old steps. These are all of our testing on the other old steps from the old site that has anymore. So now this is the website that requires to click steps to use it, right? There's no possible way you're going to be successful recording. So if I record a plus and then a type, there's nothing to type.

You shouldn't be down this route anyways, right? Oh, yeah, sure. This I can't. Mhm. And so if I can, what does this, does this, uh, quasar design component piece, does this have a native one to demo on or no, this is an example of someone who takes a native one and customizes it. Hmm. Okay, so this dropdown here is also, uh, actually, yeah.

So this is why it's gonna be just custom. So Quasar material, all of your frameworks are the types of people that are trying to get rid of the ugly ht ML components, so they so won't use it. So is, so if you click on go to Docs index. Does it look native like the other ones? Um, I think this is just a button.

I think

that's just an example of a button. Yeah. That's just a button, like a button and a menu being together. But like this, for example, is going to be another one that probably is going to be a click step. I don't know yet, but based off like our first assumption, this normally would be something that's not going to be like a form, right?

It's not, I guess that's one thing. So we can stop this one there. That is how you handle. native looking dropdowns inside forms, right? Like I understand the difference of clicking that one because it's in a menu, right? So this is a good video on how to handle native dropdown menus inside forms and form builders, right?

Correct. Okay, cool. Awesome. Let us know what you think in the comments. Thanks, Kyle.