chore: fix component tests after vue-select 4.0.0 bump

- Align @playwright/experimental-ct-vue with @playwright/test 1.59.1
  to fix CT babel "Couldn't find a Program" error
- Update NcSelectUsers spec to use combobox role
-e
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

Author: pringelmann

package-lock.json

@@ -133,7 +133,7 @@
     "@nextcloud/stylelint-config": "^3.2.1",
     "@nextcloud/vite-config": "^2.5.0",
     "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
-    "@playwright/experimental-ct-vue": "^1.58.2",
+    "@playwright/experimental-ct-vue": "^1.59.1",
     "@playwright/test": "^1.59.1",
     "@types/gettext-parser": "^9.0.0",
     "@types/node": "^24.12.2",

package.json

@@ -9,8 +9,8 @@ import UserSelect from './UserSelect.story.vue'
 test('has options', async ({ mount, page }) => {
 	const component = await mount(UserSelect)
 
-	await expect(component.getByRole('searchbox')).toBeVisible()
-	await component.getByRole('searchbox').click()
+	await expect(component.getByRole('combobox')).toBeVisible()
+	await component.getByRole('combobox').click()
 
 	expect(await page.getByRole('option').all()).toHaveLength(3)
 	await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
@@ -21,8 +21,8 @@ test('has options', async ({ mount, page }) => {
 test('can filter by name', async ({ mount, page }) => {
 	const component = await mount(UserSelect)
 
-	await expect(component.getByRole('searchbox')).toBeVisible()
-	await component.getByRole('searchbox').fill('Em')
+	await expect(component.getByRole('combobox')).toBeVisible()
+	await component.getByRole('combobox').fill('Em')
 
 	await expect(page.getByRole('option', { name: 'Emma' })).toBeVisible()
 	expect(await page.getByRole('option').all()).toHaveLength(1)
@@ -31,8 +31,8 @@ test('can filter by name', async ({ mount, page }) => {
 test('can filter by mail', async ({ mount, page }) => {
 	const component = await mount(UserSelect)
 
-	await expect(component.getByRole('searchbox')).toBeVisible()
-	await component.getByRole('searchbox').fill('olivia@example')
+	await expect(component.getByRole('combobox')).toBeVisible()
+	await component.getByRole('combobox').fill('olivia@example')
 
 	await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
 	expect(await page.getByRole('option').all()).toHaveLength(1)
@@ -49,18 +49,18 @@ test(
 	async ({ mount, page }) => {
 		const component = await mount(UserSelect)
 
-		await expect(component.getByRole('searchbox')).toBeVisible()
-		await component.getByRole('searchbox').fill('O. <')
+		await expect(component.getByRole('combobox')).toBeVisible()
+		await component.getByRole('combobox').fill('O. <')
 
 		// should not exist right now as neither Name no email provided
 		await expect(page.getByText('No results')).toBeVisible()
 		expect(await page.getByRole('option', { name: 'Olivia' }).all()).toHaveLength(0)
 
-		await component.getByRole('searchbox').fill('O. <olivia')
+		await component.getByRole('combobox').fill('O. <olivia')
 		// now it should match the name
 		await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
 
-		await component.getByRole('searchbox').fill('O. <olivia@example.org>')
+		await component.getByRole('combobox').fill('O. <olivia@example.org>')
 		// now it should match the email
 		await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
 		expect(await page.getByRole('option').all()).toHaveLength(1)
@@ -75,8 +75,8 @@ test('can select option', async ({ mount, page }) => {
 		},
 	})
 
-	await expect(component.getByRole('searchbox')).toBeVisible()
-	await component.getByRole('searchbox').click()
+	await expect(component.getByRole('combobox')).toBeVisible()
+	await component.getByRole('combobox').click()
 
 	await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
 	await page.getByRole('option', { name: 'Olivia' }).click()
@@ -86,8 +86,8 @@ test('can select option', async ({ mount, page }) => {
 		id: '0-olivia',
 	})
 
-	await expect(component.getByRole('searchbox')).toBeVisible()
-	await component.getByRole('searchbox').click()
+	await expect(component.getByRole('combobox')).toBeVisible()
+	await component.getByRole('combobox').click()
 
 	await expect(page.getByRole('option', { name: 'John' })).toBeVisible()
 	await page.getByRole('option', { name: 'John' }).click()
@@ -109,14 +109,14 @@ test('can select multiple option', async ({ mount, page }) => {
 		},
 	})
 
-	await expect(component.getByRole('searchbox')).toBeVisible()
-	await component.getByRole('searchbox').click()
+	await expect(component.getByRole('combobox')).toBeVisible()
+	await component.getByRole('combobox').click()
 
 	await expect(page.getByRole('option', { name: 'Olivia' })).toBeVisible()
 	await page.getByRole('option', { name: 'Olivia' }).click()
 
-	await expect(component.getByRole('searchbox')).toBeVisible()
-	await component.getByRole('searchbox').click()
+	await expect(component.getByRole('combobox')).toBeVisible()
+	await component.getByRole('combobox').click()
 	await expect(page.getByRole('option', { name: 'John' })).toBeVisible()
 	await page.getByRole('option', { name: 'John' }).click()