Controlling and Interacting with Form Fields

Ability to control in a third form elements is a core part of a lot of web publication testing. And the most common component that you will find in HTML forms is the humble input element to demonstrate controlling forms. With playwright, we have a very simple HTML page consisting of two simple input elements. A key thing to note about the input element is that in addition to type text, it supports other types as well. For example, type number and a number of these types only have a slight modification to the UI and the keyboard that might show up on a mobile browser. But as far as the test interaction will go

for these particular text type inputs, that will be the same from playwright. So even though our second input is of type number, its value will still be the string representation of that number. And just as a quick recap of HTML basics, whatever string is currently being displayed by the input element, we can actually get a hold of that string by using the value property. Now let's take a look at how we can control these inputs, assert their values and submit a form. Using playwright within a basic test, we get access to the name input and the count input locators by using the utility method

that we've looked at in a previous lesson called Get by test, ID locators provide a method called fill, which can be used to completely replace whatever value the input might currently have. We can also read the value from an input locator by using the input value method. And this API is promise based. So of course we will await it to get the final string value. And although we can use the result for an assertion, you should actually use a specialized assertion method on expect called to have value. The two have value method will automatically retry and wait for the input to result in that particular value,

whereas the input value method is just a snapshot of a value at a particular point in time and does not do any smart retries. Another action present on the input locators is the type method. And this can be used to send additional keystrokes to an input which will essentially append to the existing value. So after we add a space world to the existing value, the final value should be Hello space world. The type method is extremely useful when you are working with something like an auto complete style input. As we mentioned previously, a number input is not that different from a standard text input. And in fact, the value that we provide

and the value that we read are still going to be strings when working with a number HTML input. A fun fact about the input element is that if the user presses the enter key in a standard HTML form, that is considered the same as an HTML form submission. So we can press the enter key in the name input or the count input, or the user can choose to explicitly click the submit button to submit the HTML form. Now let's run this test to see it in action. We start off by filling the name input with hello and we expect the value to be Hello. And of course, since in this particular case there is no lag, the input value immediately turns to the string.

Hello. We type in the characters space world and we expect the value to be hello world. We provide the value 1, 2, 3 to the count input and we expect it to be 1, 2, 3. And finally we can submit the form by either pressing the enter keys or clicking the submit button. As you can see, playwright has a very full fledged yet quite simple API for interacting with form elements. Another common field that exists in a lot of HTML forms is the checkbox. A common use case for this is something like terms and conditions that we want the user to accept. And the checkbox has two simple states which are checked and unchecked.

Here we have a simple HTML form consisting of a simple checkbox. The user can check the box and click submit and checked is true, or the user can uncheck it and click submit again. And now the checked value is going to be false. Let's create a simple playwright test to demonstrate how we can interact with the standard HTML checkbox. We get a located for the checkbox by using get by test id, and we can read the bullion value of the checkbox by using the utility method called is checked. This will return a promise to a bullion and of course we can await that to see the current value, which should be false because we start off as unchecked.

On this page, the playwright expect API comes with a utility called to be checked, and of course this is what we should prefer to use because this has the automatic retries built in right now, we expect it not to be checked, so we add not to the expect to be checked chain. A simple way that we can interact with the checkbox is to click it. So right now, if we click it, then we can expect it to be checked. And if we click it again, then we expect it to be not checked. The click method leaves us at the mercy of the current state of the checkbox. So playwright also provides utility methods called

check and uncheck. These methods will automatically do the smart thing of clicking the checkbox only to move it into the desired checked or unchecked state. Now let's run this test to see it in action. We start off with a checkbox unchecked, so of course the current value is going to be false. We can click it and we expect it to be checked. We click it again and we expect it to be not checked. We invoke the check method and we expect it to be checked. We invoke the unchecked method and we expect it to be unchecked. And as you can see, everything passes with flying colors. When you want to give the user a limited set

of options from which they can only select one, it's common to use radio inputs, which are a part of a radio group. Here we have a simple HTML form consisting of three radio inputs. The user can choose their favorite fruit to be either apple or orange or other, and once they are happy, they can submit the form. A key thing to note about radio inputs within HTMO is that only one of them can be selected at a time. Now let's create a simple test to demonstrate how we can interact with radio inputs using playwright. A key thing to note about radio HTML inputs is that each radio item is its own distinct component. So we will need to create different locators

for the different items that we intend to test. And these radio items behave exactly the same as the checkbox that we saw before. So they have the checked property and they can either be checked or unchecked. Right now, the user hasn't selected any option, so we expect all of them not to be checked. The user can click on an individual item, and of course it'll cause that item to be selected. So if you click the apple, then apple should be checked and the other items should not be checked. And then if the user tries to click the orange, then only orange should be checked and apple and other should no longer be checked.

And just like the checkbox, we can also select an item by using the check method. So if you make an action on other to be checked, then apple and orange should not be checked and other is the only item that should be checked. Now let's run this test through playwright to see it in action. We start off with all the items not checked, then we will go ahead and click the apple, and of course apple will be checked and the other items will not be checked. Then when we click the orange, then only orange will be checked. And of course if we explicitly set other to be checked, then apple and orange will not be checked

and only other will be checked. A nice mental model to have is that radio inputs are just a mutually exclusive set of check boxes. And this is also reflected in the API that we use with playwright. One of the most powerful built-in input fields in HTML forms is the select input also called a dropdown. It allows the user to select a value from a list of possible options. Here we have a simple HTML form consisting of a simple checkbox that allows the user to select a particular country. For example, they can select Australia or they can select Canada, and then they can submit the form and we can see the value that is being set

by the input behind the scenes. Now to demonstrate how we can control the select component with playwright, we create a simple test and of course we get a locator for the select element. By using the utility get by test id, playwright locators provide a method called select option, which can be used to select an option from a select input. And to assert a value, we use a method that we have seen before as well, which is to have value. In addition to providing a string value to the select option method, we can also provide an object with a label pointing to a string, and this will actually select the option from the select dropdown, which has the label matching the provided string.

Now let's submit this form as well so that we can see the interplay between the value that is selected and the label that is present within the dropdown. We run this test with playwright, select the Option Australia, and we expect the value to be Australia, and of course that works. Next, we select an option such that the label is the string Canada with the capital C, and you can see that this is the label that is currently showing within the UI for the select input. And after we submit the form, the value that gets loaded is Canada with a small C. As you can hopefully see, there is a lot

of power built into playwright for working with HTML forms, and once you've used it a few times, the API does become quite intuitive. As always, thank you for joining me and I will see you in the next one.