Blog #7: Fun & Hands-On Guide to Testing Forms with Playwright 🚀

Forms are like your app’s "conversation starters" with users. If input fields, radio buttons, or checkboxes break, it’s like your app suddenly forgets how to speak! Let’s learn how to test these elements interactively using Playwright—no prior experience needed!

---

🕹️ Quick Interactive Quiz!

(Answer as you read!)

Q: What’s the first thing you test for any form element?

A) Color
B) Visibility
C) Font size

Spoiler: The answer is at the end of this section!

---

🎮 Let’s Play! Testing Input Fields

Imagine this: You’re testing a login form. Let’s make sure the email field works.

Step-by-Step Demo

Here’s a sneak peek at the some must-do tests for input fields:

Test Explanation:
Visibility: We first check if the input field is visible. A hidden input field is like an invisible form—it can’t be used!
Enabled State: Next, we ensure the email input field is enabled. A disabled field is a dead end for the user—it’s not clickable or editable.
Initial Value: We then verify that the email input field is empty when the page loads. You wouldn’t want a pre-filled email like "testuser123@gmail.com" if that’s not what the user intended!
User Interaction: Now, we simulate the user typing in the email field. After typing, we confirm that the value entered matches exactly what the user typed, ensuring the input works as expected.
Clear the Field: Lastly, we test the ability to clear the field. Once the user is done, they should be able to erase what they’ve typed, and the field should become empty again.

💡 Pro Tip: Try breaking the test! Change 'testeruser123@gmail.com' to 👩‍💻 and see what happens.

---

🎯 Testing Radio Buttons (The “Choose One” Game)

Imagine you're on a form where you need to choose your gender: Male or Female. Let’s ensure both radio buttons work perfectly.

Test Explanation:
Visibility: The first test checks if the radio button is visible on the page. If the button is hidden, it’s like trying to make a selection on a ghost form!
Enabled State: Here, we ensure the radio button is active and clickable. Disabled radio buttons are like locked doors—can’t click them!
Default Unselected State: By default, the female radio button should be unselected. This ensures that no one’s choice is pre-filled (which would be a bit creepy, right?).
User Interaction (Selecting the Radio Button): Next, we simulate the user’s action by selecting the female option. This mimics a real user’s interaction with the form.
Verification Post-Selection: Once selected, we verify the button’s state to ensure the UI reflects the user’s choice.
Alternative Check: A quick alternative to verify if the radio button is selected is using isChecked(). This returns true when the button is checked and false when it's not.
Male Button Check: Finally, we ensure that the male radio button is still unselected after selecting the female option, confirming that only one choice can be selected.

---

🤖 Testing Checkboxes (The “Select All” Puzzle)

A form asks, “Which hobbies do you enjoy?” 🎮🎸📚
Checkboxes are special because, unlike radio buttons (which only allow one option to be selected), you can select multiple options! This makes testing checkboxes a little different—let’s see how we can test them with Playwright.

Let’s Dive In!

We’ll test three checkboxes for hobbies: Gaming, Music, and Reading. Here’s how we do it step-by-step!

Test Explanation:

1. Locating Checkboxes: We identify the checkboxes using their CSS selectors and store them in an array (checkboxLocators).

2. Checking Checkboxes: We loop through each checkbox and use .check() to select them.

3. Unchecking Checkboxes: We loop again, checking if the checkbox is selected with .isChecked(), and uncheck it with .uncheck() if true.

Difference Between Checkboxes & Radio Buttons:

• Checkboxes allow multiple selections, and each can be independently checked/unchecked.

• Radio Buttons allow only one selection.

Pro Tip: Test visibility, enabled state, and checked state—same as radio buttons!

---

📊 Cheatsheet: Your Testing Toolkit

Q: What’s the first thing you test for any form element?

✅ A) Visibility! (You can’t interact with something you can’t see!)

---

🚀 Do You Have to Use All Assertions?

No, you don't need all assertions for every element. Use the ones that match the behaviour you're testing. 

Focus on what's important for each case, and keep it simple!