Input Fields | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
Welcome to the new section, Mastering UI Elements , where we will explore how to automate various UI components. This section includes regular homework assignments for automating specific test cases, which will be submitted for code review. Lesson Overview In this lesson, we will focus on: Automating input fields Making assertions on the values within these fields Setting Up the Test We begin by creating a new spec file named Components.spec.ts . The setup includes: Importing necessary modules Using a beforeEach hook to navigate to the test application Creating a test suite for the form layout page Automating Input Fields To automate input fields, we use the following methods: Locator Creation: Use page.locator to define the input field. Filling Input: Use fill method to input text (e.g., await using the grid email input.fill('[email protected]') ). Clearing Input: Use clear method to remove text. Simulating Keystrokes: Use press sequentially to simulate typing with optional delays. Making Assertions Assertions can be made in two ways: Generic Assertion: Extract the input value using input value and validate it. Locator Assertion: Use to have value method to check the expected value directly from the locator. Summary In this lesson, we learned how to: Use fill to input text Clear input fields with clear Simulate typing with press sequentially Make assertions using input value and to have value See you in the next lesson!
Video Transcript
Hello guys, welcoming you to a new section, Mastering UI Elements. In this section, we will go a deeper dive into how to automate different types of UI elements. And also starting from this section, you will have a regular homework assignments where you will need to automate the particular test case and submit this test case for the code review to the instructor. And the video about how to make homework assignments will be later in this class. And in this particular lesson, we will talk about how to automate input fields and how to make assertions of the values inside of the input fields. So let's get into it. And we're beginning a new section talking about UI components. And let me create a new spec file for that. Test new file. Components.spec.ts. And let me quickly set this up. So I need to copy the import. Then I need to create a before test hook, test before each. And here we will navigate to our test application, await page, go to. Then I create a new test suite for the forms layout page, test describe. And inside of form layout page, I will create another before each test. Before each, where we will navigate to the form layouts page. I'll copy those steps from here, from the previous lesson. And create a new test. All right, the initial setup is ready, so let's go to our test application. Here's the test application. We have the form layouts page, and using the grid is one of the form. So let's, for example, type something in this email input field. And I will show you how to do this in the playwright. So first thing, we need to write the locator for this email input field. And I create a new constant using the grid email input equals to page.locator. So this is what? This is NB card. We already know this from the previous lesson. This NB card has a descending text. Has text using the grid. And we want to find a child element by role. Get by role, which is a text box with a name, email, okay? That's it, so let me make it wider. Okay, so this is our locator. And here, email with a capital E, email. Exactly how the text is displayed right here inside of the input field. All right, and let's type something into this input field. And I use command await. Call my locator using the grid. And in order to type something into the input field in playwright, you need to use a method fill. And inside of the method fill, provide the argument with the text that we wanna type. For example, test at test.com. And let's quickly run this to see how it works. I run this test. And as you can see, we successfully typed the message into the input field. If you want to clear the message from the input field, you need to call your locator again. Await, using the grid email input and call a method clear. And the message that you typed on the previous step will be cleared. So let me run it one more time. And you see, the message was cleared successfully. Unfortunately, in the playwright, you cannot chain the clear command after the fill command. So if you type something like clear, this unfortunately will not work. So in order to clear the message, you need to call your locator one more time and then call method clear. And another method that you can use to fill out the input field, if you want to simulate the keystrokes of the keyboard. It's await using input field, and you call a method press sequentially. And then type the message. For example, we want to type a little bit different. Message test2 at test.com. Let me run it one more time. And now you can see test2 at test.com was printed inside of the input field. And what also this press sequentially method can do is to create a delay between the keystrokes. If for some reason in your test scenario you want to simulate like slower typing into the input field, you can simulate that as well. You need to provide a second argument with the object delay and type the amount in milliseconds how long you want to delay between the keystrokes. For example, I want to type half a second. And if I run this one more time, you can see that right now it's typing really, really slow, simulating the keystrokes. All right, that worked fine. And let's talk about the assertions, how to make assertions of the input field. If you want to use a generic assertion, then you first need to grab the text from the input field. And let's take this text and assign to the constant. Const input value, for example. Then we call our locator await using the grid and we need to call a method input value. So method input value will extract the text from the input field and will save into the constant. And now you can use a generic assertion to perform the assertion of this input value. Expect input value to equal And the value that we expect is this one, test2 at test.com. And let me run this test. And test passed successfully. And the second example, if you would like to use a locator assertion, it would be a little bit different. Locator assertion. And we type await, expect. We provide the locator, which is using the grid. And then we call a method to have value, not the text. To have text will not work for the input field. For the input field, we need to use to have value method and type the expected text that we want to see as a value. And that's it. Let me run this test. And test passed successfully. All right, that's it, guys. Let me summarize what we did in this lesson. In order to type any text into the input fields, you need to use method fill and provide the argument as a string what you want to type into this input field. In order to clear the input field, you need to use method clear that have to be called from the locator. If you want to simulate a key strokes on the keyboard, you can use method press sequentially. And if you want to simulate delays between the key stroke, pass additional argument providing the amount in milliseconds. How long do you want to delay a key strokes? Also for generic assertion, you need to use a method input value that will extract the value from the locator from the input field and assign to the constant or variable. And then you can call generic assertion to perform the validation. If you use allocator assertion, you provide the locator and use a method to have value assigning the value inside of the input field. All right, that's it guys and see you in the next lesson.