VSelect and Playwright

[JChrist]

I can't find any way to test the functionality of a v-select component using playwright.
With vuetify 2.7, I clicked on the element by id and then clicked on the item by label.

For example, having a v-select element:

<v-select id="mySelect" v-model="myModel" label="select one"
  :items="[{title:'value a',value:'a'},{title:'value b',value:'b'},{title:'value c',value:'c'}]" />

The following playwright code used to do the job (in vuetify 2.7):

await page.locator('#mySelect').click();
await page.locator('.menuable__content__active .v-list-item__title:has-text("value a")').click();

Trying to migrate to vuetify 3, I'm using the following code:

await page.locator('#mySelect').click();
await page.locator('.v-select__content .v-list-item__title:has-text("value a")').click();

However, it fails (times out) on the line where I click the select element. The logs show:

waiting for locator('#mySelect')
locator resolved to <input size="1" type="text" required="" id="mySelect" ti…/>
attempting click action
waiting for element to be visible, enabled and stable
element is not stable - waiting...
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<div data-no-activator="" class="v-field__input">…</div> intercepts pointer events
retrying click action, attempt #1
...<keeps retrying with the same logs until time out>

[HendrikJan]

I'm using this:

// Select an option in a vuetify selectbox with a certain id
export async function vuetifySelectByTestId(page: Page, id: string, text: string) {
  await page.getByTestId(id).click();
  await page
    .locator('.v-select__content .v-list-item')
    .filter({ has: page.getByText(text, { exact: true }) })
    .click();
}

And then in my tests use this function like:

await vuetifySelectById(page, 'filter-input', 'Department');

[smajl]

The problem is that it fails one line with await page.getByTestId(id).click(); for us.
You cannot click the select at all. In search of a solution...

[KaelWD]

Use click({ force: true })

[JoachimTillessen]

Apparently this behavior is somewhat unstable. I've tested different recording tools to generate a protocol that works.
The cleanest version that ran successfully for me was this:

import type { Page } from "@playwright/test";

export async function vuetifySelectTest(
  page: Page,
  id: string,
  text: string,
) {
  await page.locator(`[data-testid="${id}"] i`).click();
  await page.getByRole("option", { name: text }).click();
}