I've got a basic web payment form, which needs to be automately tested. The form contains five fields - email, card number, card month expiry, card year expiry and CVC code. Also, have two buttons - pay(with displayed amount and currency) and cancel. If all fields are populated correctly and press pay, the user is redirected to a payment confirmation page. If, for example, the email field isn’t populated and press pay button, a floating message appears below the email field and says: ‘Email field must be filled before proceed’. In a couple of seconds, this floating message disappears. In my manual test I just verify that after press pay button, this message appears.
But in an automation test, the message isn’t visible in the DOM of the page. My idea is to assert that after press pay button, the button is still displayed with amount and currency. Is this the best approach in this situation and are floating messages like this, the best way to display field validation errors to the user?