From 6b2d499fe961b7ea3001f723be88d23a72838c27 Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Sun, 30 Aug 2026 16:47:39 +0200
Subject: [PATCH] fix(e2e): target the picker's input, not the wrapper that now
 shares its class

Three Playwright tests fail in suite-wizard.spec.ts (95 passed, 3 failed):

  Error: locator.fill: Element is not an <input>, <textarea>, <select>
  or [contenteditable]
  locator resolved to <div class="input-field input-field--label-outside
  vs__search">

The selector assumed ".vs__search" identifies vue-select's search input.
The component library now also puts that class on a wrapper div, so
.first() resolves to the wrapper and fill() correctly refuses it. The app
never applies the class itself -- nothing in src/ mentions vs__search --
so this is the library's markup moving, not a defect here.

The locator now demands an actual input and accepts the class sitting
either on it or on an ancestor, so it survives the markup moving again:

  .suite-wizard-step2 input.vs__search,
  .suite-wizard-step2 .vs__search input

Only the two .fill() sites were affected. catalog-ratings.spec.ts:176 uses
the same ".vs__search" selector but only clicks it, which a wrapper div
accepts, so it is left alone rather than changed on speculation.

Why this surfaced only now: E2E runs on promotions into beta and main, not
on pull requests into development, so a development-only change carrying
this could not have shown it.

Verified: prettier clean, and tsc reports no errors for this file.
---
 tests/e2e/spec-coverage/suite-wizard.spec.ts | 24 ++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/spec-coverage/suite-wizard.spec.ts b/tests/e2e/spec-coverage/suite-wizard.spec.ts
index 08a06c9d..797513cc 100644
--- a/tests/e2e/spec-coverage/suite-wizard.spec.ts
+++ b/tests/e2e/spec-coverage/suite-wizard.spec.ts
@@ -121,7 +121,17 @@ async function fillDetails(page: Page): Promise<void> {
 /** Attach one seeded module through the real NcSelect multi-picker. */
 async function attachApplication(page: Page, name: string): Promise<void> {
 	const w = wizard(page)
-	const picker = w.locator('.suite-wizard-step2 .vs__search').first()
+	// `.vs__search` no longer identifies the input on its own: the component
+	// library now also puts that class on a wrapper, so `.first()` resolved to
+	//   <div class="input-field input-field--label-outside vs__search">
+	// and `fill()` refused it with "Element is not an <input>, <textarea>,
+	// <select> or [contenteditable]". Demand an actual input, whether the class
+	// sits on it or on an ancestor, so this survives the markup moving again.
+	const picker = w
+		.locator(
+			'.suite-wizard-step2 input.vs__search, .suite-wizard-step2 .vs__search input',
+		)
+		.first()
 	await picker.click()
 	await picker.fill(name)
 	// The option list is teleported to body by vue-select, so it is queried on
@@ -176,7 +186,17 @@ test('suite wizard: the applications step offers existing modules and no create
 	// The picker offers a module that genuinely exists in the register — the
 	// one this run seeded. If the step invented its own options, or fetched
 	// nothing, this fails.
-	const picker = w.locator('.suite-wizard-step2 .vs__search').first()
+	// `.vs__search` no longer identifies the input on its own: the component
+	// library now also puts that class on a wrapper, so `.first()` resolved to
+	//   <div class="input-field input-field--label-outside vs__search">
+	// and `fill()` refused it with "Element is not an <input>, <textarea>,
+	// <select> or [contenteditable]". Demand an actual input, whether the class
+	// sits on it or on an ancestor, so this survives the markup moving again.
+	const picker = w
+		.locator(
+			'.suite-wizard-step2 input.vs__search, .suite-wizard-step2 .vs__search input',
+		)
+		.first()
 	await picker.click()
 	await picker.fill(APP_A)
 	await expect(