How to access vuetify-component with codeceptjs

Question

I'd like to write some tests witch codecept.js but I'm not able to access the vuetify components.

    <v-layout>
      <v-flex xs7>
        <v-text-field
          ref="video1min"
          v-model="video1min"
          :rules="[rules.required, rules.youtubeVideo]"
          clearable
          class="pt-0"
          placeholder="Youtube Link"
        />
      </v-flex>
      <v-flex xs5>
        <v-checkbox
          v-model="defaultVideo"
          v-ruid="'defaultVideo'"
          label="Default Video"
          color="primary"
          class="default-video"
          @change="setDefaultVideo"
        />
      </v-flex>
    </v-layout>

I added an v-ruid which normally can be clicked like that:

I.click('[data-ruid=defaultVideo]');

But witch the vuetify components, I always got that error message: element not interactable

It's because the data-ruid is added to div around the checkbox. How can I access the checkbox directly?

enter image description here

Đorđe Zeljić · Answer 1 · 2019-05-09T12:02:29.487

0

You can use CSS Selector to get input dom element inside.

This selector should work:

'[data-ruid=defaultVideo] input'

Edit:

Also in case of v-checkbox you also can click on label.

Selector is:

'[data-ruid=defaultVideo] label'

edited May 09 '19 at 12:02

answered May 09 '19 at 11:43

Đorđe Zeljić

1,689
2
13
30

that does not work, then I got `element not interactable` as error – carl May 09 '19 at 12:08
Maybe your element is not visible at the moment. Can you also try `I.click({css: '[data-ruid=defaultVideo] label'})` – Đorđe Zeljić May 09 '19 at 12:12
Also wrong, got that error message: `Clickable element {"css":"[data-ruid=defaultVideo] label"} was not found by text|CSS|XPath` – carl May 09 '19 at 12:35
I've added an image witch the css from inspect mode – carl May 09 '19 at 12:37
Strange. Can you provide more source code and information about versions of vuetify, vue? – Đorđe Zeljić May 09 '19 at 19:38
So I posted the whole `v-layout` where the checkbox is located. I use `"vuetify":"~1.0.18"`and `"vue": "^2.6.10",` – carl May 10 '19 at 05:41

How to access vuetify-component with codeceptjs

1 Answers1