From 000e67ce0cf48bf909f3e7063e735a519b667b94 Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Fri, 13 Feb 2026 16:28:03 +0100
Subject: [PATCH] test(select): fix flaky e2e

The select has a hover/focus effect which sometimes is flaky.
By ensuring the dropdown is actually open before taking snapshot,
we can increase stability.
---
 .../e2e/element-examples/si-select.spec.ts    | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/playwright/e2e/element-examples/si-select.spec.ts b/playwright/e2e/element-examples/si-select.spec.ts
index d616b8df2..26f03f317 100644
--- a/playwright/e2e/element-examples/si-select.spec.ts
+++ b/playwright/e2e/element-examples/si-select.spec.ts
@@ -11,26 +11,25 @@ test.describe('si-select', () => {
   test(example, async ({ page, si }) => {
     await si.visitExample(example);
 
-    await page.getByRole('combobox', { name: 'FormControl' }).click();
-    await si.runVisualAndA11yTests('form-select');
-    await page.locator('.cdk-overlay-backdrop').click({ position: { x: 0, y: 0 }, force: true });
-
-    await page.getByRole('combobox', { name: 'Multi select' }).click();
-    await si.runVisualAndA11yTests('multi-select');
-    await page.locator('.cdk-overlay-backdrop').click({ position: { x: 0, y: 0 }, force: true });
-
-    await page.getByRole('combobox', { name: 'Multi-select with groups' }).click();
-    await si.runVisualAndA11yTests('multi-select-with-groups');
-    await page.locator('.cdk-overlay-backdrop').click({ position: { x: 0, y: 0 }, force: true });
-
-    await page.getByRole('combobox', { name: 'Select with custom template' }).click();
-    await si.runVisualAndA11yTests('custom-template');
-    await page.locator('.cdk-overlay-backdrop').click({ position: { x: 0, y: 0 }, force: true });
-
-    await page.getByRole('combobox', { name: 'Select with actions' }).click();
-    await si.runVisualAndA11yTests('actions');
-    await page.getByRole('button', { name: 'clear' }).click();
-    await page.locator('.cdk-overlay-backdrop').click({ position: { x: 0, y: 0 }, force: true });
+    const testCases = [
+      { name: 'FormControl', testName: 'form-select' },
+      { name: 'Multi select', testName: 'multi-select' },
+      { name: 'Multi-select with groups', testName: 'multi-select-with-groups' },
+      { name: 'Select with custom template', testName: 'custom-template' },
+      { name: 'Select with actions', testName: 'actions' }
+    ];
+
+    for (const { name, testName } of testCases) {
+      await page.getByRole('combobox', { name }).click();
+      await expect(page.getByRole('listbox', { name })).toBeVisible();
+      await si.runVisualAndA11yTests(testName);
+
+      if (name === 'Select with actions') {
+        await page.getByRole('button', { name: 'clear' }).click();
+      }
+
+      await page.locator('.cdk-overlay-backdrop').click({ position: { x: 0, y: 0 }, force: true });
+    }
 
     await page.locator('h4').first().click();