Testing a vuetify on rails project with capybara selenium

Question

I often use this site but it had never happened to me to ask a question. Now I am blocked and so it is time to ask the first one.

I need to test a sign up form created with vue 2 and vuetify, server side rendered with ruby on rails, webpack 5. I configured capybara with selenium chrome headless driver, it works when it comes to interacting with text fields and buttons but when I try to check the checkbox:

(byebug) check('Accept')
*** Capybara::ElementNotFound Exception: Unable to find visible checkbox "Accept" that is not disabled

Vuetify hides the input and replaces it with beautiful div but, what is the best approach to check a v-checkbox?

Signup form

If I add the visible attribute, the input is found but nothing happens. I think I need to interact with some other element?

(byebug) check('Accept', visible: false)
#<Capybara::Node::Element tag="input" path="/HTML/BODY[1]/DIV[1]/DIV[1]/DIV[1]/MAIN[1]/DIV[1]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/FORM[1]/DIV[2]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/INPUT[1]">

I also tried this but still nothing happen:

(byebug) page.find('input[type=checkbox]', visible: false).set(true)
#<Capybara::Node::Element tag="input" path="/HTML/BODY[1]/DIV[1]/DIV[1]/DIV[1]/MAIN[1]/DIV[1]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/FORM[1]/DIV[2]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/INPUT[1]">

So I also tried the click way but getting this error:

(byebug) page.find('input[type=checkbox]', visible: false).click
*** Selenium::WebDriver::Error::ElementClickInterceptedError Exception: element click intercepted: Element <input aria-checked="false" id="input-96" role="checkbox" type="checkbox" value=""> is not clickable at point (234, 531). Other element would receive the click: <div class="v-input--selection-controls__ripple"></div>
  (Session info: headless chrome=85.0.4183.121)

I tried also executing the raw script:

page.execute_script("window.uiApp.$data.terms_and_conditions = true")

The vue app is mounted in this way:

    window.uiApp = new Vue({
      i18n,
      vuetify,
      store,
      router,
      el: id,
      render: h => h(App, {
        props
      })
    })

But window.uiApp.$data is empty, so this attempt also seems to fail :( How to access vue component data (without vue web tool)?

I don't know what else to try, thanks in advance

Answer 1

Looking at the HTML shown in your linked image (in the future when asking questions it would be helpful if you included the relevant HTML directly in your question) it looks like you have a label associated with the hidden checkbox that the user can click. In that case you can use

check('Accept', allow_label_click: true)

which, when the actual checkbox is hidden, will click on the associated label instead. If you want that behavior to be on by default you can set Capybara.automatic_label_click = true.

Your other option is to determine exactly which element is actually being shown as the 'checkbox' and use find(...).click to locate that element and click on it.

Answer 2

I changed the checkbox in this way:

              <v-checkbox v-model="terms_and_conditions"
                          @input='$v.terms_and_conditions.$touch()'
                          @blur='$v.terms_and_conditions.$touch()'
                          :label="$t('commons.accept')">
              </v-checkbox>
              <div class="ml-2">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on }">
                    <a
                        target="_blank"
                        href="/users/terms_and_conditions"
                        @click.stop
                        v-on="on"
                    >
                      {{ $t('session.sign_up.terms') }}
                    </a>
                  </template>
                  {{ $t('session.sign_up.terms_hint') }}
                </v-tooltip>
              </div>

Thank you