How to test the Login form? (field not found)

Flow
1

I want to make sure that I can login. It’s a very simple test:

class LoginViewTest extends KaribuTest {
    @Test
    void nathanCanLoginWithForm() throws Exception {
        _get(TextField.class, spec -> spec.withId("vaadinLoginUsername")).setValue("user@email.com");
    }

Result

java.lang.AssertionError: /login: No visible TextField in UI matching TextField and id=‘vaadinLoginUsername’: . Component tree:
└── UI
└── LoginView
└── Button[text=‘Register New User’, @slot=‘custom-form-area’]

This is confusing because when I render the html and inspect, I can see the field with the id:

HTML

<form method="POST" slot="form" action="login" data-bitwarden-watching="1">
          <input id="csrf" type="hidden">
          <vaadin-text-field name="username" id="vaadinLoginUsername" required="" autocapitalize="none" autocorrect="off" spellcheck="false" autocomplete="username" has-label="" invalid="" has-error-message="">
            <input type="text" slot="input" id="input-vaadin-text-field-6" required="" name="username" autocapitalize="none" autocomplete="username" autocorrect="off" aria-labelledby="label-vaadin-text-field-0" aria-invalid="true" invalid="" aria-describedby="error-message-vaadin-text-field-2">
          <label slot="label" id="label-vaadin-text-field-0" for="input-vaadin-text-field-6">Username</label><div slot="error-message" id="error-message-vaadin-text-field-2" role="alert">Username is required</div></vaadin-text-field>

          <vaadin-password-field ...</vaadin-password-field>
        </form>
2

The Karibu testing library you are using can only test things that are modeled on the server side. LoginForm does not have any children on the server-side - the form element, input fields, buttons etc. are all rendered by the web component. This is indicated in the error message that shows the UI tree that you can interact with from the test. The only components that you can interact with on the server are the ones that you put in the custom area, so in your case the register button.

If you want to test the login form with Karibu, the only thing you can do is fire a login event with username + password on the component to trigger its login logic. That effectively simulates the user entering a name + password in the browser and then clicking the login button, which would then cause Flow to send a similar event to the server for processing. Karibu has some helper for that: karibu-testing/karibu-testing-v10/src/main/kotlin/com/github/mvysny/kaributesting/v10/LoginForm.kt at b958839b7637dc597186c0eba20fa08d7317216e · mvysny/karibu-testing · GitHub

If you find that too “synthetic” for a test case, then you’ll have to go the browser testing route using either TestBench, plain Selenium or Playwright.

1 Like
3

Thanks! Yes, I have another test that uses those helper methods. I wanted to also have it poke at the fields. I’ll look at TestBench.