chore: adapt UI tests to main branch

- `pf-topology__node__action-icon` is used for the route container
actions
too, not found a cleaner way for now to pick the second entry in the
list
- use replace instead of insert so that the test can work with both
released and main branch of kaoto. We do not care in this test where the
node is added
- the side panel needs to be awaited to be displayed on all OS now
(which seems more coherent)
- added an ugly sleep, not found another way to wait for panel to be
closed correctly. It seems like the close button is not ready
immediately even if displayed, unless it is it due to animation and the
click is sent to the wrong place?
- ignore extension recommendation: it avoids having a notification popup
on Windows for Windows Subsystem Linux extension to interfere with the
UI tests

Signed-off-by: Aurélien Pupier <[email protected]>

it-tests/BasicFlow.test.ts

@@ -41,6 +41,7 @@ describe('Kaoto basic development flow', function () {
   });
 
   it('Open "emptyPipe.kaoto.yaml" file and check Kaoto UI is loading', async function () {
+    console.log('start test open emptyPipe');
     const { kaotoWebview, kaotoEditor } = await openAndSwitchToKaotoFrame(
       workspaceFolder,
       'emptyPipe.kaoto.yaml',
@@ -139,12 +140,13 @@ async function addActiveMQStep(driver: WebDriver) {
   await driver.wait(
     until.elementLocated(By.className('pf-topology__node__action-icon'))
   );
-  await (await driver.findElement(By.className('pf-topology__node__action-icon'))).click();
+  const threeDotsIconOfOneOfTheSteps = (await driver.findElements(By.className('pf-topology__node__action-icon')))[1];
+  await threeDotsIconOfOneOfTheSteps.click();
 
   await driver.wait(
     until.elementLocated(By.className('pf-v5-c-dropdown pf-m-expanded'))
   );
-  await (await driver.findElement(By.xpath("//\*[@data-testid='context-menu-item-insert']"))).click();
+  await (await driver.findElement(By.xpath("//\*[@data-testid='context-menu-item-replace']"))).click();
 
   await driver.wait(
     until.elementLocated(By.xpath("//div[@data-testid='tile-activemq']"))

it-tests/PropertyPanelLoading.test.ts

@@ -37,14 +37,17 @@ describe('Property panel loading test', function () {
     ), 5_000);
 
     const closeBtn = await driver.findElement(By.xpath("//button[@data-testid='close-side-bar']"));
-    if (process.platform === 'darwin') {
-      // from some reason this extra dynamic wait is needed on macOS
-      await driver.wait(async () => {
-        return await closeBtn.isDisplayed();
-      }, 5_000, 'Close button is not displayed!');
-    }
+    await driver.wait(async () => {
+        return await closeBtn.isDisplayed() && await closeBtn.isEnabled();
+    }, 5_000, 'Close button is not displayed!');
+
+    // It seems that the close button might not react if clicked too fast after being displayed
+    await driver.sleep(1_00);
+
     await closeBtn.click();
 
+    await driver.sleep(1_000);
+
     try {
       await driver.wait(
         until.elementLocated(By.className('pf-v5-c-card')

test Fixture with speci@l chars/.vscode/settings.json

@@ -1,4 +1,5 @@
 {
     "git.openRepositoryInParentFolders": "never",
     "redhat.telemetry.enabled": false,
+    "extensions.ignoreRecommendations": true
 }