Unable capture the "success" state of the elements after form submission

Question

I'm trying to learn Java and using Selenium for my AQA tests.

Here's a dummy website that offers different kind of forms / pages / buttons to train: https://play1.automationcamp.ir/forms.html?

I'm working with "Form with Validations" section.

The test that I'm trying to create should check that the field / Terms and conditions label styles are changed accordingly after performing these actions:

• All fields are filled with valid data
• Terms and Conditions checkbox is clicked
• Submit button is pressed

The issue arises when Im trying to submit the form. The styles are changed accordingly. BUT - after a split second they are changed back to their default state. This prevents me from checking the state of the fields styles right after clicking on the the "Submit" button.

I've tried to create a custom method that will wait exactly for the moment when the styles are changed and THEN - stop any DOM updates. But of course, I was unsuccessful in it.

Heres the Test:

@Test
public void checkSuccessfulFormSubmission() throws InterruptedException {
    SoftAssertions soft = new SoftAssertions();
    BaseOperations.navigateTo(URLs.FORMS_PAGE);
    ValidationForm page = new ValidationForm(getDriver());

    page.setDataForAllFields(getDriver());
    page.getTermsCheckbox().click();
    page.getSubmitButton().click();
    page.waitForValidatedForm();

    soft.assertThat(page.isAllFieldsSuccess()).isTrue();

    soft.assertAll();
}

And here's the waiting method that I'm trying to work on:

public void waitForValidatedForm() throws InterruptedException {
    List<WebElement> elements = getAllInputs();
    BaseOperations.getWait().until(driver1 -> {
        Boolean isAllInputSuccess = elements.stream()
                .allMatch(element -> getBorderColorCssPropertyValue(element).equalsIgnoreCase(getExpectedSuccessBorderValidateColor()));
        for (WebElement element : elements) {
            getBorderColorCssPropertyValue(element);
        }
        Boolean isLabelSuccess = getTermsLabel().getCssValue("color").equalsIgnoreCase(getExpectedTextSuccessColor());
        log.info(getTermsLabel().getCssValue("color"));

        return isAllInputSuccess && isLabelSuccess;
    });

    Thread.sleep(1000);
}

I'm welcoming any suggestions / approaches that will help me to complete this check.

Thanks!

========

I know its hard to understand fully what's going on in the test that I have written so far, so for a reference - here's a link to my GitHub repository that contains all helper methods for this particular Form: GitHub Link

Answer 1

Honestly, I wouldn't worry about it. What this form does and what you are trying to verify doesn't happen on real life forms. In actual forms, you either get a success message or it transitions to another page, both of which can be verified easily. This section of the page is intended to validate the failure cases like leave the City field blank, submit the form, and then verify that the, "Please provide a valid city." error message appears.

---

I investigated the page and this is what I found:

1. You can't validate the green checkbox or red X for success/failure. It's some native formatting to the INPUT in the form.

2. You also can't validate the green/red border around the INPUT. It's also some native formatting to the INPUT in the form.

3. The only thing I could find to validate success was what I said above... whether the error message is displayed. The downside is that there is no formatting change on the DIV that displays the error message, e.g. "display: none" vs "display: block", etc. The only thing we can rely on is to use element.isDisplayed() on each message element.

4. The easiest way to determine if the page has reloaded after submitting the form is to check one of the elements for stale. I chose the Submit Form button.

Once you put all of these together, you get the code below.

WebDriver driver = new ChromeDriver();
driver.get("https://play1.automationcamp.ir/forms.html");

driver.findElement(By.id("validationCustom03")).sendKeys("City");
driver.findElement(By.id("validationCustom04")).sendKeys("State");
driver.findElement(By.id("validationCustom05")).sendKeys("Zip");
driver.findElement(By.id("invalidCheck")).click();
WebElement submitFormButton = driver.findElement(By.xpath("//button[text()='Submit Form']"));
submitFormButton.click();

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.stalenessOf(submitFormButton));
boolean cityErrorIsDisplayed = driver.findElement(By.id("invalid_city")).isDisplayed();
boolean stateErrorIsDisplayed = driver.findElement(By.id("invalid_state")).isDisplayed();
boolean zipErrorIsDisplayed = driver.findElement(By.id("invalid_zip")).isDisplayed();
boolean termsErrorIsDisplayed = driver.findElement(By.id("invalid_terms")).isDisplayed();

Assert.assertFalse(cityErrorIsDisplayed, "Verify City error is not displayed");
Assert.assertFalse(stateErrorIsDisplayed, "Verify State error is not displayed");
Assert.assertFalse(zipErrorIsDisplayed, "Verify Zip error is not displayed");
Assert.assertFalse(termsErrorIsDisplayed, "Verify Terms error is not displayed");

driver.quit();