Merge pull request #9602 from asirvadAbrahamVarghese/add-select-tab-command

Add select tab command

Author: jrafanie

cypress/README.md

@@ -52,6 +52,10 @@ ManageIQ implements the following cypress extensions:
 * `cy.menu('primaryMenu', 'secondaryMenu', 'tertiaryMenu')` - navigates the side bar menu items. `primaryMenu`: String for the outer menu item on the side bar. `secondaryMenu`: String for the secondary menu when a side bar menu item is clicked. `tertiaryMenu`: String (optional) for the tertiary menu when a side bar secondary item is clicked. (e.g. `cy.menu('Overview', 'Dashboard')` will navigate to the Overview > Dashboard page while `cy.menu('Overview', 'Chargeback', 'Rates')` will navigate to the Overview > Chargeback > Rates page).
 * `cy.menuItems()` - returns an Array of `{ title: String, items: Array of { title: String, href: String, items: Array of { title: String, href: String } }}` for the menu items on the side bar. `title`: String for the menu item title. `href`: String for the url to navigate to, included when the menu item has no children. `items`: Array of the same object with `title` and `href`/`items`, this is included when the menu item has children menu items.
 
+##### tabs
+
+* `cy.tabs({ tabLabel })` - finds a tab element within a tablist that contains the specified label text and automatically clicks it to navigate to the tab. It requires a `tabLabel` parameter and will throw an error if none is provided. `tabLabel` is the text content of the tab to select. Returns a Cypress chainable element representing the selected tab. e.g. `cy.tabs({ tabLabel: 'Collect Logs' });`,  `cy.tabs({ tabLabel: 'Settings' }).then(() => { cy.get('input#name').should('be.visible'); });`
+
 ##### toolbar
 
 * `cy.toolbarItems(toolbarButton)` - returns an array of objects {text: String, disabled: Boolean} for the toolbar dropdown buttons for when a toolbar button is clicked. `toolbarButton` is the string for the text of the toolbar button that you want to click on.

cypress/e2e/ui/Settings/Application-Settings/edit_collect_logs.cy.js

@@ -39,12 +39,7 @@ function goToCollectLogsTab() {
   cy.interceptApi({
     alias: 'getCollectLogsTabInfo',
     urlPattern: '/ops/change_tab?tab_id=diagnostics_collect_logs',
-    triggerFn: () =>
-      cy
-        .get(
-          '#tab_all_tabs_div #ops_tabs .nav-tabs li#diagnostics_collect_logs_tab'
-        )
-        .click(),
+    triggerFn: () => cy.tabs({ tabLabel: 'Collect Logs' }),
   });
 }
 

cypress/support/commands/tabs.js

@@ -0,0 +1,30 @@
+/**
+ * Selects and clicks a tab element by its label text.
+ *
+ * This command finds a tab element within a tablist that contains the specified label text
+ * and automatically clicks it to navigate to the tab. It requires a tabLabel parameter and 
+ * will throw an error if none is provided.
+ *
+ * @param {Object} options - The options object
+ * @param {string} options.tabLabel - The text content of the tab to select
+ * @returns {Cypress.Chainable} - A Cypress chainable element representing the selected tab
+ * @example
+ * // Select and click the "Details" tab
+ * cy.tabs({ tabLabel: 'Details' });
+ *
+ * // Select, click, and verify the "Settings" tab content appears
+ * cy.tabs({ tabLabel: 'Settings' })
+ *   .then(() => {
+ *     cy.get('.settings-panel').should('be.visible');
+ *   });
+ *
+ * // Select a tab and verify it has the active class after clicking
+ * cy.tabs({ tabLabel: 'Properties' })
+ *   .should('have.class', 'active');
+ */
+Cypress.Commands.add('tabs', ({ tabLabel = '' }) => {
+  if (!tabLabel) {
+    cy.logAndThrowError(`tabLabel is required`);
+  }
+  return cy.contains(`ul[role="tablist"] [role="tab"]`, tabLabel).click();
+});

cypress/support/e2e.js

@@ -48,6 +48,7 @@ import './commands/gtl.js';
 import './commands/login.js';
 import './commands/menu.js';
 import './commands/stub_notifications.js';
+import './commands/tabs.js';
 import './commands/throttle_response.js';
 import './commands/toolbar.js';
 import './commands/select.js';