e2e: extract selectors to separate file

.github/workflows/e2e-tests.yml

@@ -51,13 +51,20 @@ jobs:
       - name: Build @kaoto/kaoto package in lib mode
         run: yarn workspace @kaoto/kaoto run build:lib
 
-      - name: 💾 Save build folder
+      - name: 💾 Save dist folder
         uses: actions/upload-artifact@v4
         with:
           name: ui-dist
           if-no-files-found: error
           path: packages/ui/dist
 
+      - name: 💾 Save lib folder
+        uses: actions/upload-artifact@v4
+        with:
+          name: ui-lib
+          if-no-files-found: error
+          path: packages/ui/lib
+
       - name: 💾 Save catalog build folder
         uses: actions/upload-artifact@v4
         with:
@@ -88,6 +95,12 @@ jobs:
           name: ui-dist
           path: packages/ui/dist
 
+      - name: 🗄️ Download the UI lib folder
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-lib
+          path: packages/ui/lib
+
       - name: 🗄️ Download the catalog build folder
         uses: actions/download-artifact@v4
         with:
@@ -147,6 +160,12 @@ jobs:
           name: ui-dist
           path: packages/ui/dist
 
+      - name: 🗄️ Download the UI lib folder
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-lib
+          path: packages/ui/lib
+
       - name: 🗄️ Download the catalog build folder
         uses: actions/download-artifact@v4
         with:
@@ -206,6 +225,12 @@ jobs:
           name: ui-dist
           path: packages/ui/dist
 
+      - name: 🗄️ Download the UI lib folder
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-lib
+          path: packages/ui/lib
+
       - name: 🗄️ Download the catalog build folder
         uses: actions/download-artifact@v4
         with:

packages/ui-tests/cypress.config.ts

@@ -1,10 +1,11 @@
 import { defineConfig } from 'cypress';
+import vitePreprocessor from 'cypress-vite';
 
 export default defineConfig({
-  projectId: 'ui-test',
-  video: true,
-
   e2e: {
+    setupNodeEvents(on) {
+      on('file:preprocessor', vitePreprocessor());
+    },
     baseUrl: 'http://localhost:5173',
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
     viewportWidth: 1920,

packages/ui-tests/cypress/e2e/beansConfig.cy.ts

@@ -1,3 +1,5 @@
+import { selectors } from '@kaoto/kaoto/testing';
+
 describe('Test for Bean support', () => {
   beforeEach(() => {
     cy.openHomePage();
@@ -6,7 +8,7 @@ describe('Test for Bean support', () => {
   it('Beans - create a new bean using bean editor', () => {
     cy.uploadFixture('flows/camelRoute/basic.yaml');
     cy.openBeans();
-    cy.get('[data-testid="metadata-add-Beans-btn"]').eq(0).click();
+    cy.get(selectors.METADATA_ADD_BEANS_BTN).eq(0).click();
     cy.get(`input[name="name"]`).clear().type('test');
     cy.get(`input[name="type"]`).clear().type('org.acme');
 

packages/ui-tests/cypress/e2e/codeEditor/malformedFlows.cy.ts

@@ -1,3 +1,5 @@
+import { selectors } from '@kaoto/kaoto/testing';
+
 describe('Test for Multi route actions from the code editor', () => {
   beforeEach(() => {
     cy.openHomePage();
@@ -9,9 +11,9 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.uploadFixture('flows/malformed/camelRoute/missingId.yaml');
     cy.openDesignPage();
 
-    cy.get('span[data-testid="flows-list-route-id"]').should('contain.text', 'route-');
-    cy.get('span[data-testid="flows-list-route-id"]').should('contain.text', 'route-');
-    cy.get('span[data-testid="flows-list-route-id"]')
+    cy.get(selectors.SPAN_FLOW_LIST_ROUTE_ID).should('contain.text', 'route-');
+    cy.get(selectors.SPAN_FLOW_LIST_ROUTE_ID).should('contain.text', 'route-');
+    cy.get(selectors.SPAN_FLOW_LIST_ROUTE_ID)
       .invoke('text')
       .then((text) => {
         const routeIdText = text.trim();

packages/ui-tests/cypress/e2e/codeEditor/multiFlowEditor.cy.ts

@@ -1,3 +1,5 @@
+import { selectors } from '@kaoto/kaoto/testing';
+
 describe('Test for Multi route actions from the code editor', () => {
   beforeEach(() => {
     cy.openHomePage();
@@ -7,13 +9,13 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.openSourceCode();
     cy.uploadFixture('flows/camelRoute/multiflow.yaml');
     cy.openDesignPage();
-    cy.get('[data-testid="flows-list-route-count"]').should('have.text', '1/2');
+    cy.get(selectors.FLOWS_LIST_ROUTE_COUNT).should('have.text', '1/2');
 
     cy.openSourceCode();
     cy.editorDeleteLine(21, 12);
     cy.openDesignPage();
 
-    cy.get('[data-testid="flows-list-route-count"]').should('have.text', '1/1');
+    cy.get(selectors.FLOWS_LIST_ROUTE_COUNT).should('have.text', '1/1');
   });
 
   it('User adds new route to Camel multi-route using code editor', () => {
@@ -30,14 +32,14 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.openDesignPage();
 
     // CHECK that the route ID is shown in the
-    cy.get('[data-testid="flows-list-dropdown"]').click();
+    cy.get(selectors.FLOWS_LIST_DROPDOWN).click();
     cy.get('[data-testid="flows-list-table"] [data-testid="goto-btn-route-new"]').should('be.visible');
-    cy.get('[data-testid="flows-list-dropdown"]').click();
+    cy.get(selectors.FLOWS_LIST_DROPDOWN).click();
     cy.showAllRoutes();
 
     // CHECK the new empty route was added
-    cy.get('[data-testid="flows-list-route-count"]').should('have.text', '3/3');
-    cy.get('g[data-layer-id="default"]').should('exist').contains('from: Unknown');
+    cy.get(selectors.FLOWS_LIST_ROUTE_COUNT).should('have.text', '3/3');
+    cy.get(selectors.DATA_LAYER_ID_DEFAULT).should('exist').contains('from: Unknown');
   });
 
   it('User deletes second route from multi-route using code editor', () => {
@@ -47,7 +49,7 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.openDesignPage();
 
     cy.showAllRoutes();
-    cy.get('[data-testid="flows-list-route-count"]').should('have.text', '1/1');
+    cy.get(selectors.FLOWS_LIST_ROUTE_COUNT).should('have.text', '1/1');
   });
 
   it('User deletes step from first route using code editor', () => {
@@ -58,7 +60,7 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.showAllRoutes();
     /** We check how many nodes are remaining */
     cy.checkNodeExist('log', 1);
-    cy.get('[data-testid="flows-list-route-count"]').should('have.text', '2/2');
+    cy.get(selectors.FLOWS_LIST_ROUTE_COUNT).should('have.text', '2/2');
   });
 
   it('User adds step to the first route using code editor', () => {

packages/ui-tests/cypress/e2e/componentCatalog.cy.ts

@@ -1,37 +1,39 @@
+import { selectors } from '@kaoto/kaoto/testing';
+
 describe('Catalog related tests', () => {
   beforeEach(() => {
     cy.openHomePage();
   });
 
   it('Catalog search', () => {
     cy.openCatalog();
-    cy.get('[data-testid="processor-catalog-tab"]').click();
-    cy.get('[data-testid="kamelet-catalog-tab"]').click();
-    cy.get('.pf-v5-c-text-input-group__text-input').click();
-    cy.get('.pf-v5-c-text-input-group__text-input').type('timer');
+    cy.get(selectors.PROCESSOR_CATALOG_TAB).click();
+    cy.get(selectors.KAMELET_CATALOG_TAB).click();
+    cy.get(selectors.INPUT_GROUP_TEXT_INPUT).click();
+    cy.get(selectors.INPUT_GROUP_TEXT_INPUT).type('timer');
     cy.get('div[id="timer"]').should('be.visible');
     cy.get('button[aria-label="Reset"]').click();
-    cy.get('.pf-v5-c-text-input-group__text-input').should('have.value', '');
+    cy.get(selectors.INPUT_GROUP_TEXT_INPUT).should('have.value', '');
 
-    cy.get('[data-testid="component-catalog-tab"]').click();
-    cy.get('[data-testid="processor-catalog-tab"]').click();
-    cy.get('.pf-v5-c-text-input-group__text-input').type('choice');
+    cy.get(selectors.COMPONENT_CATALOG_TAB).click();
+    cy.get(selectors.PROCESSOR_CATALOG_TAB).click();
+    cy.get(selectors.INPUT_GROUP_TEXT_INPUT).type('choice');
     cy.get('div[id="choice"]').should('be.visible');
     cy.get('button[aria-label="Reset"]').click();
-    cy.get('.pf-v5-c-text-input-group__text-input').should('have.value', '');
+    cy.get(selectors.INPUT_GROUP_TEXT_INPUT).should('have.value', '');
 
-    cy.get('[data-testid="processor-catalog-tab"]').click();
-    cy.get('[data-testid="kamelet-catalog-tab"]').click();
-    cy.get('.pf-v5-c-text-input-group__text-input').type('aws secret');
+    cy.get(selectors.PROCESSOR_CATALOG_TAB).click();
+    cy.get(selectors.KAMELET_CATALOG_TAB).click();
+    cy.get(selectors.INPUT_GROUP_TEXT_INPUT).type('aws secret');
     cy.get('div[id="aws-secrets-manager-sink"]').should('be.visible');
     cy.get('button[aria-label="Reset"]').click();
-    cy.get('.pf-v5-c-text-input-group__text-input').should('have.value', '');
+    cy.get(selectors.INPUT_GROUP_TEXT_INPUT).should('have.value', '');
   });
 
   it('Catalog filtering using tags', () => {
     cy.openCatalog();
-    cy.get('[data-testid="processor-catalog-tab"]').click();
-    cy.get('[data-testid="kamelet-catalog-tab"]').click();
+    cy.get(selectors.PROCESSOR_CATALOG_TAB).click();
+    cy.get(selectors.KAMELET_CATALOG_TAB).click();
     cy.get('[data-testid="tag-cloud"]').first().click();
     cy.get('[data-testid="tag-database"]').first().click();
     cy.get('[data-testid="tag-serverless"]').first().click();
@@ -46,16 +48,16 @@ describe('Catalog related tests', () => {
 
   it('Catalog list view switch check', () => {
     cy.openCatalog();
-    cy.get('#toggle-layout-button-List').click();
-    cy.get('[data-testid="component-catalog-tab"]').click();
-    cy.get('[data-testid="processor-catalog-tab"]').click();
-    cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'false');
+    cy.get(selectors.TOGGLE_LAYOUT_BUTTON_LIST).click();
+    cy.get(selectors.COMPONENT_CATALOG_TAB).click();
+    cy.get(selectors.PROCESSOR_CATALOG_TAB).click();
+    cy.get(selectors.TOGGLE_LAYOUT_BUTTON_GALLERY).should('have.attr', 'aria-pressed', 'false');
     cy.openSourceCode();
     cy.openCatalog();
-    cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'false');
-    cy.get('#toggle-layout-button-Gallery').click();
-    cy.get('[data-testid="processor-catalog-tab"]').click({ force: true });
-    cy.get('[data-testid="kamelet-catalog-tab"]').click({ force: true });
-    cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'true');
+    cy.get(selectors.TOGGLE_LAYOUT_BUTTON_GALLERY).should('have.attr', 'aria-pressed', 'false');
+    cy.get(selectors.TOGGLE_LAYOUT_BUTTON_GALLERY).click();
+    cy.get(selectors.PROCESSOR_CATALOG_TAB).click({ force: true });
+    cy.get(selectors.KAMELET_CATALOG_TAB).click({ force: true });
+    cy.get(selectors.TOGGLE_LAYOUT_BUTTON_GALLERY).should('have.attr', 'aria-pressed', 'true');
   });
 });

packages/ui-tests/cypress/e2e/designer/basicNodeActions/hoverToolbarActions.cy.ts

@@ -1,3 +1,5 @@
+import { selectors } from '@kaoto/kaoto/testing';
+
 describe('Test toolbar on hover actions', () => {
   beforeEach(() => {
     cy.openHomePage();
@@ -9,7 +11,7 @@ describe('Test toolbar on hover actions', () => {
 
     cy.openStepConfigurationTab('timer');
 
-    cy.get('[data-testid="step-toolbar-button-replace"]').click();
+    cy.get(selectors.STEP_TOOLBAR_BUTTON_REPLACE).click();
     cy.chooseFromCatalog('component', 'quartz');
 
     cy.checkNodeExist('quartz', 1);
@@ -21,7 +23,7 @@ describe('Test toolbar on hover actions', () => {
 
     cy.openStepConfigurationTab('setHeader');
 
-    cy.get('[data-testid="step-toolbar-button-delete"]').click();
+    cy.get(selectors.STEP_TOOLBAR_BUTTON_DELETE).click();
 
     cy.checkNodeExist('setHeader', 0);
   });
@@ -31,14 +33,14 @@ describe('Test toolbar on hover actions', () => {
     cy.openDesignPage();
 
     cy.openStepConfigurationTab('setHeader');
-    cy.get('[data-testid="step-toolbar-button-disable"]').click();
+    cy.get(selectors.STEP_TOOLBAR_BUTTON_DISABLE).click();
 
     cy.openStepConfigurationTab('setHeader');
     cy.selectFormTab('All');
     cy.checkConfigCheckboxObject('disabled', true);
 
     cy.openStepConfigurationTab('setHeader');
-    cy.get('[data-testid="step-toolbar-button-disable"]').click();
+    cy.get(selectors.STEP_TOOLBAR_BUTTON_DISABLE).click();
 
     cy.openStepConfigurationTab('setHeader');
     cy.selectFormTab('All');
@@ -51,13 +53,13 @@ describe('Test toolbar on hover actions', () => {
 
     cy.openRootConfigurationTab('camel-route');
 
-    cy.get('[data-testid="step-toolbar-button-delete-group"]').click();
-    cy.get('[data-testid="action-confirmation-modal-btn-confirm"]').click();
+    cy.get(selectors.STEP_TOOLBAR_BUTTON_DELETE_GROUP).click();
+    cy.get(selectors.ACTION_CONFIRMATION_MODAL_BTN_CONFIRM).click();
 
-    cy.get('[data-testid^="rf__node-node_0"]').should('have.length', 0);
+    cy.get(selectors.RF_NODE_NODE).should('have.length', 0);
 
-    cy.get('[data-testid="flows-list-route-count"]').should('have.text', '0/0');
-    cy.get('[data-testid="visualization-empty-state"]').should('be.visible');
+    cy.get(selectors.FLOWS_LIST_ROUTE_COUNT).should('have.text', '0/0');
+    cy.get(selectors.VISUALIZATION_EMPTY_STATE).should('be.visible');
   });
 
   it('Add branch using hover toolbar', () => {
@@ -66,7 +68,7 @@ describe('Test toolbar on hover actions', () => {
 
     cy.openRootConfigurationTab('choice');
 
-    cy.get('[data-testid="step-toolbar-button-add-special"]').click();
+    cy.get(selectors.STEP_TOOLBAR_BUTTON_ADD_SPECIAL).click();
 
     cy.chooseFromCatalog('processor', 'when');
     cy.checkNodeExist('when', 4);
@@ -79,12 +81,12 @@ describe('Test toolbar on hover actions', () => {
 
     cy.openRootConfigurationTab('choice');
 
-    cy.get(`[data-testid="step-toolbar-button-collapse"]`).click({ force: true });
+    cy.get(selectors.STEP_TOOLBAR_BUTTON_COLLAPSE).click({ force: true });
     cy.checkNodeExist('when', 0);
     cy.checkNodeExist('otherwise', 0);
     cy.checkNodeExist('log', 0);
 
-    cy.get(`[data-testid="step-toolbar-button-collapse"]`).click({ force: true });
+    cy.get(selectors.STEP_TOOLBAR_BUTTON_COLLAPSE).click({ force: true });
     cy.checkNodeExist('when', 3);
     cy.checkNodeExist('otherwise', 1);
     cy.checkNodeExist('log', 1);

packages/ui-tests/cypress/e2e/designer/basicNodeActions/stepRemoval.cy.ts

@@ -1,3 +1,5 @@
+import { selectors } from '@kaoto/kaoto/testing';
+
 describe('Tests for Design page', () => {
   beforeEach(() => {
     cy.openHomePage();
@@ -43,7 +45,7 @@ describe('Tests for Design page', () => {
 
     // CHECK that delete menu does not exist for the from node
     cy.get(`[data-nodelabel="timer"]`).parent().eq(0).rightclick({ force: true });
-    cy.get(`[data-testid="context-menu-item-delete"]`).should('not.exist');
+    cy.get(selectors.CONTEXT_MENU_ITEM_DELETE).should('not.exist');
 
     cy.checkNodeExist('timer', 1);
 
@@ -57,9 +59,9 @@ describe('Tests for Design page', () => {
     cy.openDesignPage();
 
     cy.openStepConfigurationTab('log');
-    cy.get('.pf-topology-resizable-side-bar').should('be.visible');
+    cy.get(selectors.RESIZABLE_SIDE_BAR).should('be.visible');
     cy.removeNodeByName('log');
-    cy.get('.pf-topology-resizable-side-bar').should('not.exist');
+    cy.get(selectors.RESIZABLE_SIDE_BAR).should('not.exist');
 
     // Blocked by https://github.com/KaotoIO/kaoto/issues/527
     // cy.openStepConfigurationTab('timer');

packages/ui-tests/cypress/e2e/designer/catalogs/userSpecifiedCatalog.cy.ts

@@ -1,18 +1,20 @@
+import { selectors } from '@kaoto/kaoto/testing';
+
 describe('Tests for user specified Quarkus catalog type', () => {
   // Specify custom catalog URL
   before(() => {
     cy.openHomePage();
     cy.openSettings();
     cy.interactWithConfigInputObject('catalogUrl', Cypress.config().baseUrl + '/camel-catalog/index.json');
-    cy.get('[data-testid="settings-form-save-btn"]').click();
+    cy.get(selectors.SETTINGS_FORM_SAVE_BTN).click();
     cy.waitSchemasLoading();
   });
 
   // Reset catalog URL
   after(() => {
     cy.openSettings();
     cy.get('input[name="catalogUrl"]').clear();
-    cy.get('[data-testid="settings-form-save-btn"]').click();
+    cy.get(selectors.SETTINGS_FORM_SAVE_BTN).click();
     cy.waitSchemasLoading();
   });