I'm currently conducting a form test that involves leaving mandatory fields empty to verify if the field displays a red border indicating it needs to be filled before proceeding. Below is the code snippet I have implemented so far:
driver=new FirefoxDriver();
driver.manage().window().maximize();
/** Test: Open page*/
driver.get ("URL with form");
/** The following checks for a text above the form specifying mandatory unfilled fields */
driver.findElement(By.id("nextbutton")).click(); /** leave all fields blank and click on next below form */
assertEquals("The following fields are mandatory", driver.findElement(By.cssSelector("p")).getText());
assertEquals("Field 1 is mandatory", driver.findElement(By.xpath("//form[@id='genericform']/div[2]/ul/li")).getText());
assertEquals("Field 2 is mandatory", driver.findElement(By.xpath("//form[@id='genericform']/div[2]/ul/li[2]")).getText());
assertEquals("Field 3 is mandatory", driver.findElement(By.xpath("//form[@id='genericform']/div[2]/ul/li[3]")).getText());
assertTrue(isElementPresent(By.id("Field1.Value"))); /** confirms the first mandatory field is present */
To further validate, I aim to assert that the mandatory field showcases a red border along with an icon, distinguishing it from non-mandatory fields that lack the same visual cues. https://i.sstatic.net/spbhw.jpg
CSS:
border-color: #E04228;
background: #FFF url("../img/icon-field-error.png") no-repeat scroll right center / 28px 22px;
The tools utilized for this test include Eclipse combined with Selenium webdriver.