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).

Here’s an example snippet of HTML for a login form:

HTML, XML
Copy to clipboard
1<input type="text" id="username" name="username">
2<input type="password" id="password" name="password">
3<button type="submit">Login</button>

Let's break down each component:

1. Tags: Tags are the basic building blocks of HTML, used to define elements within the document. In the example, <input> and <button> are tags. The tags define what kind of element you are dealing with; for instance, <input> is used for input fields, and <button> is used for buttons.

2. Attributes: Attributes provide additional information about HTML elements. For example, the id, type, and name attributes in the <input> tags specify unique identifiers for the elements (id="username" and id="password"), the type of input (type="text" and type="password"), and the name associated with the input data (name="username" and name="password").

3. Text: Text is the content displayed to the user, often found within the opening and closing tags of elements like buttons or headings. For example, <button type="submit">Login</button> contains the text Login that will be visible to the user on the button.

Using the steps mentioned, you would inspect the input fields and see that they have the id attributes username and password, which you can then use in your Playwright script. Notice that when accessing an element by its id, we add a # before the id in the selector; for example, #username will be the selector referring to the element with id username. This is a requirement for CSS selectors when targeting an element by its id.

To input text into form fields, we use the fill method.

Here's the syntax:

TypeScript
Copy to clipboard
1await page.fill(selector, value);

• selector: A string representing the CSS selector to identify the element.
• value: The string you want to input into the selected element.

Here’s the code example we’ll be working with:

TypeScript
Copy to clipboard
1import { test, expect } from '@playwright/test';
2
3test('fill and submit form', async ({ page }) => {
4  await page.goto('http://localhost:3000/login');
5  await page.fill('#username', 'user1');
6  await page.fill('#password', 'pass1');
7  await page.click('button[type="submit"]');
8  expect(await page.url()).toContain('/home');
9});

In this code example, a test is created to automate the process of filling and submitting a form on a login page:

1. Navigates to the login page:

   • await page.goto('http://localhost:3000/login');
   • This line instructs Playwright to open the specified URL in a browser.

2. Fills the username field:

   • await page.fill('#username', 'user1');
   • This line selects the input element with the id of username and fills it with the text user1.

3. Fills the password field:

   • await page.fill('#password', 'pass1');
   • Similarly, this line selects the input element with the id of password and fills it with the text pass1.

4. Clicks the submit button:

   • await page.click('button[type="submit"]');
   • This line clicks the button element with the type submit to submit the form.

5. Checks the URL after submission:

   • expect(await page.url()).toContain('/home');
   • After the form is submitted, this line verifies that the URL now contains /home, indicating that the login was successful and the user has been redirected to the home page.

Forms are everywhere on the web: login forms, search forms, registration forms, and more. Being able to fill and submit forms automatically with Playwright ensures that you can automate critical user flows in web applications. This skill is invaluable for testing purposes, allowing you to verify that these essential parts of your application work seamlessly.

Imagine running an automated test suite that logs in users across different browsers, ensuring a consistent user experience. By mastering form automation, you'll be well-equipped to build robust tests that handle these common scenarios, giving you confidence that your application behaves as expected.