Input Fields | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore the automation of UI components using Cypress , specifically focusing on input fields. Here are the key points covered: Setting Up Tests A new spec file named UIComponents.cy.js is created for testing various UI components. The beforeEach hook is used to set up the test environment without specific navigation, allowing for testing across different pages. Working with Input Fields To type into an input field, use the type method with a locator for the web element. You can specify a typing delay by passing an object with a delay value. To clear an input field before typing, use the clear method. Cypress allows command chaining , enabling multiple actions on the same locator without repeated calls. Locating Input Fields Input fields can be targeted directly by their ID or indirectly through their associated label . Using cy.contains can help locate elements by their visible text. Handling Quotes and Variables Be cautious with quotes when typing strings that contain quotes. Use backticks for string interpolation when including variables in input fields. Assertions and Dynamic Values To avoid test flakiness with dynamic values, assert the input field's value before modifying it. Use not.have.value for negative assertions to ensure the field is not empty before typing. Key Presses and Navigation To simulate key presses, use curly braces with the key name, e.g., {enter} . For tabbing between fields, use the press method instead of type . In summary, when automating input fields with Cypress, utilize the type , clear , and press methods effectively, and always validate input fields to ensure robust tests.
Video Transcript
Hey guys, in this module, we will talk about automation of different UI components using Cypress. In this particular lesson, we will start with input fields. So let's begin. For this module, I created a new spec file, and I called it UIComponents.cy.js. We're going to put all our tests into here related to different UI components. Also, I put into before each also just CyVisit, and I did not include navigation to the page inside of the before each, because during this module, we will navigate across different pages in our test application testing different type of UI components. So I put form and form layouts at the beginning of the next test and let's start working on this. So I'm going to collapse this panel, so we will have more space on the screen. Previously, we already used input fields right here when we were talking about invoking different elements and right here. So we were using method type to type something into the input field. Well, quite obvious. You provide the locator for your web element, then call method type, and in the single quotes, put the string that you want to type. Let's try to run it, and going back to application, I will use different input field. I will use this e-mail that has ID input e-mail one from the form using the grid. So I will replace this ID, and I will open Cypress and run my test to check if it is working. Running the test. Here we go. Hello at test.com was successfully printed. So what else you can do? So the second argument that you can provide inside of the type is the delay if you want to type slower inside of the input field, then you put the comma over here, provide the object, and here you have a delay. Let's say we will type the characters with 200 milliseconds between each character. Look, when I run the test again, so hello at test.com, you see it's typing slightly slower. To clear the input field, let's say there is something else in the input field, you need to clear it and then type something else. If I will type, for example, type hello, something like this, and look what's going to happen. So it's typing hello at test.com, and then it's typing appending the text hello to the existing text. So if there is something in the input field, you need to clear it and type a new message. You can use a method clear, and you can do it like this, .clear before the typing the message that you want. If we go back, so now the message hello is printed. So this is also one of the beauty of the Cypress framework. Since you can chain the commands, you don't need to call this locator for every independent command. So you call the locator once and then you type .clear, .type, and then after that, you can make, for example, validation. We're going to talk about it in just a second. Now let's talk about the locator for the input field. So here we specifically use the input field. So this guy that specifically targets the input field locator. But you can also use a label for the input field if, for example, your input field does not have a unique identifier like in our case, we have ID for this input field. But if you don't have ID, but you have a label, Cypress is smart enough to figure out that if you target the label, it means that you want to type something into the input field. And we have a label with the text email. This is a visible text. And let's say we will get this form by using the grid. So we identify the exact form. And in the context of the form, the label email will be unique. And that way we can target the input field. So let me find the previous examples with CyContains. It will be slightly faster. So here we go, CyContains using the grid. So I'm copying this guy, so using the grid. And then I look contain email. So this will give me the label email, because this is the only text email within that form. And then I can type something, yes, it works. And going back to Cypress, and here we go, hello, yes, it works. And you can see the text was appended to the previous text. But the tricky part here though, that clear will not work on the label. So if I type to clear the input field before typing the new value and try to open it, and here we go, unfortunately, clear doesn't work. We have the error message that it's looking this kind of like a input select text area button and so on, but label does not work. So that's kind of a bummer. And if you want to use a label, you will not be able to clear this input field. So just for your information, so let me put the clear afterwards. And right now it should type, yes, it works. All right, so let's move on. In case you want to type something with a double quotes or single quotes, you should pay attention to what kind of quotes do you use so the outer quotes and inner quotes will not conflict. For example, if you want to use double quotes string with a double quotes, then using outer quotes is fine. For example, if I type, yes, it works, and I go back. And yes, it works, you see it in the double quotes. But if you need a string with a single quote, and you will try to do something like this, like this. You see we have a conflict of Cypress doesn't know where to stop because we have single quotes here and here. In this case, you need to use double quotes for the outer string like this. And then single quotes will be printed into the input field. And here we go, we see a single quote. It's a little bit small, but I think you got it. And one more example about the quotes. Sometimes you may need to print the variable value inside of the input field. How about that? So let me create a new constant. Let's say name equals to Artem, like this. And then I want to use the constant name inside of the type. In this case, I would use a backtick. So this is a symbol to the left of one on your keyboard. Then you use this dollar sign, then use curly brace, and then provide the constant or variable name. And then, for example, Artem at test.com. So I take the variable and make like a concatenation of the string in the input field to add the at test.com. So this is a standard JavaScript syntax. And this syntax also work within the type field. And here we go, we have Artem at test.com printed successfully. So sometimes you may have situations in your scenario that you need to open the page with the input field. You need to clear this input field with some predefined value and type your own value. But those values that are loaded into the input fields often are dynamic. And quite possible that when UI is loaded, the input field is available before the value pops into this input field. And when you run the test, if you just locate the element and try to clear it in type, it is possible that Cypress type faster into this input field before the actual value coming from the API. To avoid the situations like this and avoid the test flakiness, it would be considered a good practice to make assertion of this input field before modifying. So that way, assertion wait for the value, for the initial value of the input field. And then you can update, modify, and do whatever with it. And you would do it very simple. So for example, I type input field and then you type your assertion. Then you type half value. So this is how would you make the assertion. And the value we expect is this guy, like this, right? And after the value is printed, then we can clear the value. And then type whatever I need. For example, test at bonderacademy.com. Like this, going back. Yeah, you see? So we targeted the input field. We made the validation of the input field before clearing it and then typing a new value. Alternatively, if you don't know what value you expect, let's say it's dynamic value of some weird name that not necessary in your case. Then you can use a negative assertion. And you can type something like not have value and you just put empty string. So with this validation, you're essentially saying, hey, I would expect that input field would not be empty. And when it is not empty, then I clear this value and then type something into it, and then it worked the same way. So through the validation, we're clearing and typing. And through the type command, you can also do different key press. So let me show you one more example. And for that, we will navigate to this Auth and Login page. So let's say we want to type email and password. And instead of clicking Login, we want just to hit Enter button, and the Enter button should work. So let me show you how that thing works. So I need to click on Auth and Login. Let me quickly create those steps. So after Form Layouts, I add Auth and then Login like this. And then I need sci-get. So let's find the locators for this page, Login, Inspect. We have id for the email. So I put id for the email, and for example, type any value that we have like this. And sci-get, and for the password, I believe we should have id as well, inspect. And yeah, for the password, we have id as well. Going back, hash sign, and we type, I don't know, whatever password. Welcome, like this. And after we did this, if you want to hit Enter, then inside of the string, I put the curly braces and type Enter. So that's pretty much hitting the Enter button on your keyboard. And let's go back to the Cypress, and here we go. It worked very quickly. So initially, we're typing into the input field, then we're navigating to the login. Here we go, you see it happened very quick. Enter was hit, and then we navigated back to the homepage. Additionally, you can find in the documentation other options how to use different key combinations. So you can use Shift, Alt, and B. If you put the plus, it means that user clicks on this modifier before and then typing the word hello. If you will use before the plus, like Shift and Alt, it means that user held those modification buttons all the time. But keep in mind, if you will try to use Shift and then Hello, expecting that all letters will be printed in the capital case, it will not work. You will need to literally type or input all caps for that separately. So those key modifiers mostly for accessibility testing and all that stuff. And only one key combination does not work with these key modifiers is Tab. So when you need to tab, you cannot use Tab, and it will tab on the next section of the screen. For that, I don't know why, Cypress has a method Press that supports just this command. So let me show you this. Going back to that test, let me coming this out. And let's say that after we typed into this input field, I will put Press, and I want to tab to the next field. What's gonna happen? So I go to Documentation, because the command is weird, though. This, this is what you need to provide as the argument into the tab. So like this, and going back to Cypress. All right, and you can see that right now, after we typed something into the email field, the password is highlighted. So we click Tab, and the next element that was selected was the password field. So this Press tab is useful for accessibility testing. If you need to test how user can navigate back and forth in your application through the tab commands, this is how would you use it. I think this is it, so let's make a quick summary. When you need to type something into the input field, just use value type. If you want to create a delay between type characters, use a delayed and amount in milliseconds. Use a method clear to clear the input field, and it considered a good practice with a dynamic value. Before clearing the method, make sure you make a validation that input field is not empty, so that way you will avoid flakiness inside of your test. You can also invoke different key press, providing the name of the key in the curly braces. And if you need to click Tab, you need to use method Press. And one more thing that I just want to remind you, if you want to extract the value inside of the input fields, we are using invoke prop value. When you call invoke prop value, you can extract value from the input field and use it later for something else. All right, that's it guys, and I'll see you in the next lesson.