Filling and Submitting Forms

Welcome back! You've come a long way, and your skills in handling web automation with Playwright are growing. So far, we've navigated web pages and performed simple click actions. Now, let’s dive into another crucial functionality in web automation: filling and submitting forms.

In the previous lesson, you learned to simulate user interactions by clicking a button. Building on that, we'll now focus on automating form interactions, which is essential for tasks like logging in, registering users, or filling out search forms.

In this lesson, you will master the following:

1. How to use CSS selectors to target elements.
2. Filling out form fields automatically.
3. Submitting the form and validating the result.

Before you can fill out and submit a form, you need to identify the input elements you want to interact with. The input elements are elements on the page on which you can type text. We already learned how to find elements by their texts, or by mentioning the element tag (we used button, for instance). But what if there are two fields of type input not containing any texts? There, we can use CSS selectors, such as id. Elements such as input fields often have unique attributes like id, name, or class that help you target them.

In some cases, it is even hard to differentiate if the content is a text or uses some other displayable mechanism. The type of an element can visually seem a button, but it can be another element. That's why it is crucial to understand how to identify properties of elements, such as type, text, or id.

1. Open the Browser's Developer Tools

   • Right-click on the page you want to inspect and select "Inspect" or press F12.

2. Navigate to the Elements Tab

   • In the Developer Tools, go to the "Elements" tab. Here, you can see the DOM structure of the web page.

3. Inspect the Element

   • Hover over the elements in the page or use the element picker tool (a mouse pointer icon) to select the element you’re interested in. This highlights the HTML markup of that element in the Elements panel.

4. Find the ID Attribute

   • Look for the id attribute in the highlighted HTML markup. If an id is present, you can use it directly in your Playwright script (e.g., #username).