Required Fields - Customization and Testing

Ask us anything
1

How do we:

  1. Customize the “Please fill in this field.” message?
  2. Detect that this message is being displayed?
    a. My client wants automated testing and so we need to test that missing values for required fields are enforced.
    b. We have 80% automated testing coverage on the frontend, except for these field validations.

image
image380×169 8.2 KB

2

some quick thoughts:

  • check the element has the :invalid pseudoclass
  • check the element validity property

see Client-side form validation - Learn web development | MDN

1 Like
3

Thanks for the suggestion. Neither the :invalid element state or the validity property exists on these WeWeb elements.

I must be missing something very obvious. Any other ideas?

<input 
  data-v-47d7ada4="" data-v-5d2667c9="" 
  class="ww-input-basic ww-element ww-element-815eff4b-e383-4a4d-addd-3a3d43036f8d ww-flexbox__object" 
  type="email" 
  name="input-email" 
  required="" 
  autocomplete="off" 
  placeholder="Enter your email" 
  min="0" max="10000" step="1" 
  ww-responsive="ww-element" 
  data-ww-flexbox-index="1" 
  ut-data="email-field" id="input-email" 
  data-ww-element="true" 
  data-ww-uid="815eff4b-e383-4a4d-addd-3a3d43036f8d" 
  data-ww-component-id="37" 
  ww-front-state="[object Object]" 
  style="font-size: 16px; font-family: var(--ww-default-font-family); line-height: 24px; font-weight: 400; letter-spacing: 0px; word-spacing: 0px; text-decoration-line: none; text-decoration-thickness: initial; text-decoration-style: solid; text-overflow: initial; margin: 5px 0px 0px; padding: 0px 0px 0px 12px; z-index: unset; align-self: unset; display: block; width: 100%; max-width: unset; min-width: unset; height: 38px; max-height: unset; min-height: unset; background: none; border: 1px solid rgb(212, 212, 216); border-radius: 8px;"
>
4

the code you posted shows an element with attributes. to check pseudoclasses existence or to access element properties you need to access the DOM with js, it can’t be done by just parsing the html.
in my previous link there are examples about accessing the validity property (with a different purpose thoug)
if you aim to test this by just parsing the html then checking for the existence of the required attribute (or other relevant validation attribute) is all you can do

5

@dorilama, thank you very much.

I was able to get it to work from your directions. For future users trying to do the same automated testing, I leave my JavaScript and Cypress code here.

JavaScript

When the required field error is displayed, the following pseudo class should exist on the input element.

document.querySelector("#input-password:invalid")

The field error text can be fetched using.

document.querySelector("#input-password:invalid").validationMessage

Cypress

describe('Login Form Test', () => {
    it('Prevent form submission if the required inputs are missing.', () => {
        // Visit the page
        cy.visit('https://my.app.com/login');

        // Attempt to submit the form without filling in required fields
        cy.get('form').submit();

        // Check for invalid fields
        cy.get('#input-email:invalid').should('exist');
        cy.get('#input-password:invalid').should('exist');

        // Check for invalid field message
        cy.get('#input-email:invalid').then(($input) => {
            expect($input[0].validationMessage).to.equal('Please fill in this field.');
        });
        cy.get('#input-password:invalid').then(($input) => {
            expect($input[0].validationMessage).to.equal('Please fill in this field.');
        });
    });
});
1 Like
6

well done :slight_smile:

7

Addendum: Getting the validity or validationMessage for a dropdown (multiselect) field is a bit more challenging. So documenting this for my (future) self and for the community.

For displaying the validationMessage of dropdown fields, WeWeb uses a hidden <input> element with the required attribute to trigger the browser’s built-in validation. This hidden input is the source of the “Please fill in this field” message. This is a clever trick that WeWeb uses to leverage the browser’s native validation of their dropdown field, which is a very custom implementation for us.

To interact with this field, I created a custom attribute for the dropdown named “ut-data” and gave it a name called “gender” for the gender dropdown. You can then access the fake/hidden input field this way.

  cy.get('div[ut-data="gender"] .multiselect-fake-input:invalid').should(
      "exist"
    );
    cy.get('div[ut-data="gender"] .multiselect-fake-input:invalid').then(
      ($input) => {
        expect($input[0].validationMessage).to.equal(
          "Please fill in this field."
        );
      }
    );