Selenium Java Coding Tips & Tricks #9 | How to Find Mandatory Fields on the Page | Pseudo-elements

Introduction

In this tutorial, we will explore how to identify mandatory fields on a web page using Selenium with Java. This is particularly useful for ensuring that all required inputs are filled out before form submission, enhancing user experience and improving form validation. We'll also discuss the use of CSS pseudo-elements to visually indicate these mandatory fields.

Step 1: Setting Up Your Selenium Environment

Before you can find mandatory fields, ensure your Selenium environment is properly set up.

1. Install Java: Make sure you have Java Development Kit (JDK) installed on your machine. You can download it from the Oracle website.
2. Add Selenium Dependency:
   • If you're using Maven, include the following in your pom.xml:

     <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>4.0.0</version>
     </dependency>
     

   • Alternatively, download the Selenium JAR files from the Selenium website.
3. Set Up an IDE: Use an IDE like IntelliJ IDEA or Eclipse to write and run your Selenium scripts.

Step 2: Locating Mandatory Fields

To find mandatory fields on a page, you'll typically look for HTML attributes such as required or specific classes that denote mandatory fields.

1. Inspect the Page: Use your browser's Developer Tools (usually accessible by pressing F12) to inspect the form elements.

2. Identify Attributes:

   • Look for the required attribute in input fields:

     <input type="text" required>
     

   • Check for specific classes that may indicate a mandatory field, like mandatory or required-field.

3. Write Selenium Code:

   • Use the following Selenium code to locate mandatory fields:

     WebDriver driver = new ChromeDriver();
     driver.get("URL_OF_YOUR_WEBPAGE");
     
     List<WebElement> mandatoryFields = driver.findElements(By.cssSelector("input[required], .mandatory"));
     for (WebElement field : mandatoryFields) {
         System.out.println("Mandatory Field Found: " + field.getAttribute("name"));
     }
     

Step 3: Highlighting Mandatory Fields with CSS Pseudo-Elements

To improve user experience, visually indicate mandatory fields using CSS pseudo-elements.

1. Add CSS Styles:

   • Include the following CSS in your stylesheet to mark mandatory fields:

     input[required]:before {
         content: "*";
         color: red;
         margin-right: 5px;
     }
     

   • This code adds a red asterisk before the label of each required input field.

2. Test Changes:

   • Refresh the webpage to see the updates. Ensure that the asterisks appear next to all mandatory fields as intended.

Step 4: Validating Form Submission

Finally, ensure that the form correctly validates the mandatory fields upon submission.

1. Set Up Form Submission:

   • Include a button in your form for submission:

     <button type="submit">Submit</button>
     

2. Add Validation Logic:

   • Use JavaScript to check if all mandatory fields are filled before allowing form submission.
   • Example validation code:

     document.querySelector("form").addEventListener("submit", function(event) {
         let invalidFields = document.querySelectorAll("input[required]:invalid");
         if (invalidFields.length > 0) {
             event.preventDefault();
             alert("Please fill out all mandatory fields.");
         }
     });
     

Conclusion

In this tutorial, we covered how to identify and highlight mandatory fields on web forms using Selenium and CSS. By implementing these techniques, you can improve form validation and enhance the user experience. As a next step, consider exploring more advanced Selenium features to automate form testing or integrating validation scripts into your web applications.