Setting the ID of components (v-dialog as example)

[x12a1f]

Hi,

I need to set the ID of a dialog so I can use selenium in my e2e test to check if the dialog is visible or not.

In my template I have:

<v-dialog persistent max-width="490px" :value="show()">...</v-dialog>

which results in the following HTML:

<div class="v-dialog v-dialog--active v-dialog--persistent" style="transform-origin: center center; max-width: 490px;">

In my test I am using Selenium Python and I would like to select the div with find_element_by_id() then use is_displayed() to check if it is visible. But I have some trouble assigning an ID to the <div>. I tried adding id="myId" to <v-dialog> but this ID never shows up in HTML.

How can I set the ID of the dialog in such a way it shows up in HTML. Or is there another way to select a dialog with selenium?

Thanks.

[x12a1f]

Setting the ID on <v-dialog> does work but not as how I expected it.

I solved it by adding a child element with an ID to the dialog content and looking for an element with this ID.

• If there is no such element, the dialog is not visible and never was.
• If there is such an element and the parent of this child has display: none in its style, the dialog was visible but is currently hidden.
• If there is such an element but the parent of the child does not have display: none, the dialog is currently visible.

[KaelWD]

You can use content-class to add a class to that element, but there's nothing to add an id.

[gabrieljbaker]

This is probably a super dumb question @KaelWD , and I apologize for that - but how am I supposed to add an id to a v-dialog, or a v-select for that matter? Typescript now complains about id not being a prop on vuetify component classes.