remove pf dependent selectors from dev-console

frontend/packages/dev-console/integration-tests/features/addFlow/add-page.feature

@@ -46,10 +46,15 @@ Feature: Add page on Developer Console
 
 
         @smoke
-        Scenario: Hide/Show Getting Started Resources from View: A-11-TC06
-            Given user has hidden Getting Started Resources from View
-             When user selects Hide from view option from kebab menu
+        Scenario: Hide Getting Started Resources from View: A-11-TC06
+            Given user has Getting Started Resources shown in Add page
+             When user clicks on Show getting started resources link
              Then user will not see Getting started resources card
+
+
+        @smoke
+        Scenario: Show Getting Started Resources from View: A-11-TC07
+            Given user has hidden Getting Started Resources from View
              When user clicks on Show getting started resources link
              Then user will see Getting started resources card
 

frontend/packages/dev-console/integration-tests/features/addFlow/create-from-catalog.feature

@@ -11,10 +11,11 @@ Feature: Create Application from Catalog file
         @regression
         Scenario: Create the workload using Builder Image: A-01-TC01
             Given user is at Developer Catalog page
-             When user selects "Builder Images" option from Type section
+             When user selects "Builder Image" option from Type section
               And user searches and selects Builder Image card "Node.js" from catalog page
               And user clicks Create Application button on side bar
               And user enters Git Repo url in s2i builder image page as "https://github.com/sclorg/nodejs-ex.git"
+              And user selects resource type as "Deployment"
               And user enters Application name as "builder-app"
               And user enters workload name as "builder"
               And user clicks create button

frontend/packages/dev-console/integration-tests/features/monitoring/dashboard-display.feature

@@ -97,8 +97,6 @@ Feature: Observe Page
               And user will see "Rate of Packets" charts
               And user will see "Rate of Packets Dropped" charts
               And user will see "Storage IO - Distribution(Pod - Read & Writes)" charts
-              And user will see "Storage IO - Distribution(Containers)" charts
-              And user will see "Storage IO - Distribution" charts
 
 
         # https://bugzilla.redhat.com/show_bug.cgi?id=2026865

frontend/packages/dev-console/integration-tests/support/commands/app.ts

@@ -54,7 +54,7 @@ Cypress.Commands.add(
 
 Cypress.Commands.add('verifyDropdownselected', (selector: string) => {
   cy.get(selector).should('be.visible');
-  cy.get(selector).click().get('.pf-v5-c-dropdown__menu').should('be.visible');
+  cy.get(selector).click().get('[role="menu"]').should('be.visible');
 });
 
 Cypress.Commands.add('mouseHover', (selector: string) => {
@@ -79,7 +79,7 @@ Cypress.Commands.add('selectActionsMenuOption', (actionsMenuOption: string) => {
 Cypress.Commands.add('dropdownSwitchTo', (dropdownMenuOption: string) => {
   cy.byLegacyTestID('dropdown-button')
     .click()
-    .get('.pf-v5-c-dropdown__menu')
+    .find('data-test-id="dropdown-menu"')
     .contains(dropdownMenuOption)
     .click();
 });
@@ -88,7 +88,7 @@ Cypress.Commands.add('isDropdownVisible', () => {
   cy.byLegacyTestID('dropdown-button')
     .should('be.visible')
     .click()
-    .get('.pf-v5-c-dropdown__menu')
+    .find('data-test-id="dropdown-menu"')
     .should('be.visible');
 });
 

frontend/packages/dev-console/integration-tests/support/pageObjects/add-flow-po.ts

@@ -5,7 +5,7 @@ export const addPagePO = {
   detailsOnOffSwitch: '[data-test="details-switch"]',
   cardDetails: 'p.odc-add-card-item__description',
   restoreGettingStarted: '[data-test="restore-getting-started"]',
-  kebabMenuGettingStarted: '[data-test="actions"]',
+  toogleGettingStarted: '[id*="expandable-section-toggle"]',
   hideGettingStarted: '[data-test="hide"]',
   closeButton: '[aria-label="label-close-button"]',
   buildWithGuidedDocumentation: '[data-test="card quick-start"]',
@@ -101,32 +101,31 @@ export const gitPO = {
     devFileStrategy: '[data-test=import-strategy-Devfile]',
     editImportStrategyBtn: '[data-test=import-strategy-button]',
     devFilePathInput: '[data-test=git-form-devfile-path-input]',
-    devFileHelperText: '.pf-v5-c-form__helper-text',
+    devFileHelperText: '#form-input-devfile-devfilePath-field-helper',
   },
   resourceCreationAlert: '[data-test="Resource added alert"]',
 };
 
 export const catalogPO = {
   search: 'input[placeholder="Filter by keyword..."]',
-  filterKeyword: 'input.pf-v5-c-search-input__text-input',
+  filterKeyword: 'input[aria-label="Filter by keyword..."]',
   templateTitle: '.catalog-tile-pf-title',
-  card: '.pf-v5-c-card',
-  cardBadge: 'span.pf-v5-c-badge',
+  card: '[class$="catalog-tile"]',
+  cardBadge: '.catalog-tile-pf-badge-container',
   groupBy: '[data-test-id="dropdown-button"]',
   aToz: '[data-test-dropdown-menu="desc"]',
   zToA: '[data-test-dropdown-menu="asc"]',
-  cardType: 'span.pf-v5-c-badge',
+  cardType: '.catalog-tile-pf-badge-container',
   create: 'button[type="submit"]',
   cancel: '[data-test-id="reset-button"]',
   cardList: '[role="grid"]',
-  cardHeader: '.pf-v5-c-badge.pf-m-read',
-  groupByMenu: 'pf-v5-c-dropdown__menu',
+  cardHeader: '.catalog-tile-pf-badge span',
   catalogBatch: '.odc-catalog-badges',
   batchLabel: '.odc-catalog-badges__label',
   bindingFilterBindable: '[data-test="bindable-bindable"]',
   filterInfoTip: '.co-field-level-help__icon',
-  filterInfoTipContent: '.pf-v5-c-popover__content',
-  filterCheckBox: '[class="pf-v5-c-check__input"]',
+  filterInfoTipContent: '[id*=popover]',
+  filterCheckBox: '[type="checkbox"]',
   chartRepositoryGroup: '[data-test-group-name="chartRepositoryTitle"]',
   catalogTypeLink: 'li.vertical-tabs-pf-tab.shown.text-capitalize.co-catalog-tab__empty',
   catalogTypes: {
@@ -159,7 +158,7 @@ export const catalogPO = {
   },
   sidePane: {
     dialog: '[role="dialog"]',
-    instantiateTemplate: '[role="dialog"] .pf-m-primary',
+    instantiateTemplate: '[role="dialog"] [role="button"]',
     create: 'a[title="Create"]',
     installHelmChart: 'a[title="Install Helm Chart"]',
     createApplication: '[role="dialog"] a[role="button"]',
@@ -289,7 +288,6 @@ export const eventSourcePO = {
     name: '[data-test-id="application-form-app-name"]',
     appName: '[data-test-id="application-form-app-input"]',
     notifierHeader: 'div[aria-label="Default Alert"] h4',
-    notifierMessage: 'div[aria-label="Default Alert"] div.pf-v5-c-alert__description',
   },
   pingSource: {
     data: '[id$="PingSource-data-field"]',

frontend/packages/dev-console/integration-tests/support/pageObjects/global-po.ts

@@ -48,7 +48,6 @@ export const formPO = {
   successAlert: '[aria-label="Success Alert"]',
   confirm: '[data-test="confirm-action"]',
 };
-export const alert = '.pf-v5-c-alert';
 export const pagePO = {
   create: '[data-test="item-create"]',
   breadcrumb: '[aria-label="Breadcrumb"]',

frontend/packages/dev-console/integration-tests/support/pageObjects/helm-po.ts

@@ -14,9 +14,7 @@ export const helmPO = {
     pendingUpgrade: '[data-test-row-filter="pending-upgrade"]',
     pendingRollback: '[data-test-row-filter="pending-rollback"]',
   },
-  filterDropdownDialog: '.pf-v5-c-dropdown__group.co-filter-dropdown-group',
   filterToolBar: '#filter-toolbar',
-  clearAllFilter: '.pf-v5-c-button.pf-m-link.pf-m-inline',
   deployedCheckbox: '[id*="deployed"]',
   failedCheckbox: '[id*="failed"]',
   otherCheckbox: '[id*="other"]',

frontend/packages/dev-console/integration-tests/support/pageObjects/monitoring-po.ts

@@ -1,6 +1,6 @@
 export const monitoringPO = {
   tabs: {
-    dashboard: '[data-test-id="horizontal-link-Dashboard"]',
+    dashboard: '[data-test-id="horizontal-link-Dashboards"]',
     metrics: '[data-test-id="horizontal-link-Metrics"]',
     alerts: '[data-test-id="horizontal-link-Alerts"]',
     events: '[data-test-id="horizontal-link-Events"]',
@@ -29,7 +29,7 @@ export const monitoringPO = {
   metricsTab: {
     selectQuery: '.odc-metrics-query-input button[type="button"]',
     queryExpression: 'textarea[placeholder="Expression (press Shift+Enter for newlines)"]',
-    cpuGraph: 'div.pf-v5-c-chart.query-browser__graph-container',
+    cpuGraph: '.graph-wrapper--query-browser',
     podsList: 'table[aria-label="query results table"]',
     showPromQL: '',
     hidePromQL: '',

frontend/packages/dev-console/integration-tests/support/pageObjects/operators-po.ts

@@ -1,11 +1,11 @@
 export const operatorsPO = {
-  search: '[data-test="search-operatorhub"] input.pf-v5-c-text-input-group__text-input',
+  search: '[data-test="search-operatorhub"] input[aria-label="Filter by keyword..."]',
   nav: {
     operators: '[data-quickstart-id="qs-nav-operators"]',
     operatorHub: 'a[data-test="nav"][href="/operatorhub"]',
     installedOperators:
       'a[data-test="nav"][href$="/operators.coreos.com~v1alpha1~ClusterServiceVersion"]',
-    link: 'li.pf-v5-c-nav__item.pf-m-expandable',
+    link: '[data-test="nav"]',
     menuItems: '#page-sidebar ul li',
     serverless: '[data-quickstart-id="qs-nav-serverless"]',
     eventing: `a[href^="/eventing/"]`,

frontend/packages/dev-console/integration-tests/support/pageObjects/quickStarts-po.ts

@@ -1,10 +1,10 @@
 export const quickStartsPO = {
   quickStartTitle: '[data-test="page-title"]',
-  filterKeyword: 'input.pf-v5-c-search-input__text-input',
-  statusFilter: 'button.pf-v5-c-select__toggle',
+  filterKeyword: '[aria-label="Search input"]',
+  statusFilter: 'button[class*="menu-toggle"]',
   statusDropdown: '[aria-label="Select filter"]',
   statusComplete: '[data-key="Complete"]',
-  emptyState: 'div.pf-v5-c-empty-state__content',
+  emptyState: '[class*="empty-state__content"]',
   clearFilter: '[data-test="clear-filter button"]',
   cardStatus: '[data-test~="tile"] [data-test~="status"]',
   duration: '[data-test="duration"]',

frontend/packages/dev-console/integration-tests/support/pageObjects/search-po.ts

@@ -1,3 +1 @@
-export const searchPo = {
-  resourcesDropdawn: 'button.pf-v5-c-dropdown__toggle div div',
-};
+export const searchPo = {};

frontend/packages/dev-console/integration-tests/support/pageObjects/userPreference-po.ts

@@ -1,6 +1,5 @@
 export const userPreferencePO = {
   userMenu: '[data-test="user-dropdown"]',
-  userPreference: 'button.pf-v5-c-select__toggle',
   namespaceTypeahead: '[id="console.preferredNamespace-select-typeahead"]',
   languageTab: '[data-test="tab language"]',
   creteProjectButton: '[data-test="footer create-namespace-button"]',

frontend/packages/dev-console/integration-tests/support/pages/add-flow/catalog-page.ts

@@ -188,14 +188,9 @@ export const catalogPage = {
     });
   },
   verifyFilterByKeywordField: () => {
-    cy.get('.pf-v5-c-search-input__text-input').should('be.visible');
+    cy.get('[data-test="search-catalog"] input').should('be.visible');
   },
   verifySortDropdown: () => {
-    cy.get(catalogPO.groupBy).then((body) => {
-      if (body.find(catalogPO.groupByMenu).length <= 0) {
-        cy.get(catalogPO.groupBy).click();
-      }
-    });
     cy.get(catalogPO.aToz).should('be.visible');
     cy.get(catalogPO.zToA).should('be.visible');
   },

frontend/packages/dev-console/integration-tests/support/pages/app.ts

@@ -34,7 +34,7 @@ export const app = {
         cy.get('.co-m-loader', { timeout }).should('not.exist');
       }
     });
-    cy.get('.pf-v5-c-spinner', { timeout }).should('not.exist');
+    cy.get('[class*="spinner"]', { timeout }).should('not.exist');
     cy.get('.skeleton-catalog--grid', { timeout }).should('not.exist');
     cy.get('.loading-skeleton--table', { timeout }).should('not.exist');
     cy.byTestID('skeleton-detail-view', { timeout }).should('not.exist');
@@ -297,7 +297,7 @@ export const projectNameSpace = {
       }
     });
     cy.byTestID('dropdown-text-filter').type(projectName);
-    cy.get('[data-test-id="namespace-bar-dropdown"] span.pf-v5-c-menu-toggle__text')
+    cy.get('[data-test-id="namespace-bar-dropdown"] button > span')
       .first()
       .as('projectNameSpaceDropdown');
     app.waitForDocumentLoad();

frontend/packages/dev-console/integration-tests/support/pages/functions/installOperatorOnCluster.ts

@@ -45,7 +45,7 @@ export const installOperator = (operatorName: operators) => {
         cy.get('body').then((body) => {
           if (body.find(`[data-test="success-icon"]`).length > 0) {
             cy.byTestID('success-icon').should('be.visible');
-          } else if (body.find(`.pf-v5-c-alert`).length > 0) {
+          } else if (body.find('[class*="alert"]').length > 0) {
             cy.log('Installation flow interrupted, check the Installed Operators page for status');
             operatorsPage.navigateToInstallOperatorsPage();
             operatorsPage.searchOperatorInInstallPage(operatorName);

frontend/packages/dev-console/integration-tests/support/pages/monitoring/monitoring-page.ts

@@ -16,7 +16,7 @@ export const monitoringPage = {
     },
     selectDashboard: (dashboardName: string) => {
       cy.get(monitoringPO.dashboardTab.dashboardDropdown).click();
-      cy.get('input.pf-m-search').type(dashboardName);
+      cy.get('input[type="search"]').type(dashboardName);
       cy.get('button.monitoring-dashboards__dashboard_dropdown_item').first().click();
     },
     verifySection: () => cy.get(monitoringPO.dashboardTab.dashboard).should('exist'),

frontend/packages/dev-console/integration-tests/support/pages/quickStartsPage.ts

@@ -5,7 +5,6 @@ import {
   quickStartSidebarPO,
   quickStartsPO,
 } from '../pageObjects';
-import { catalogPage } from './add-flow/catalog-page';
 import { app, navigateTo } from './app';
 
 function clickVisibleButton(el: string) {
@@ -33,7 +32,8 @@ export const quickStartsPage = {
     app.waitForDocumentLoad();
     cy.get(addPagePO.viewAllQuickStarts).click();
     cy.get(quickStartsPO.quickStartTitle).scrollIntoView().should('be.visible');
-    catalogPage.isCardsDisplayed();
+    app.waitForLoad();
+    cy.get('.pfext-quick-start-catalog__gallery').should('be.visible');
   },
   filterByKeyword: (filterName: string) => {
     cy.get(quickStartsPO.filterKeyword).scrollIntoView().click();

frontend/packages/dev-console/integration-tests/support/step-definitions/addFlow/page-details.ts

@@ -106,7 +106,7 @@ Then('user will see {string} option', (addPageOption: string) => {
 Given('add page Details toggle shows {string}', (label: string) => {
   // Just waiting until the switch with all options is shown.
   // This doesn't ensure that the right label is shown because its hidden via CSS!
-  cy.get(addPagePO.detailsOnOffSwitch).find('.pf-v5-c-switch__label').should('contain', label);
+  cy.get(addPagePO.detailsOnOffSwitch).find('span').should('contain', label);
   // Check the checkbox checked value and change it if needed.
   cy.get(addPagePO.detailsOnOffSwitch).then((s) => {
     const toggleIsChecked = s.find('input:checked').length > 0;
@@ -125,7 +125,7 @@ When('user clicks Details toggle', () => {
 Then('user will see Detail toggle label {string}', (label: string) => {
   cy.get(addPagePO.detailsOnOffSwitch)
     // find both switch labels (one for checked=on and one for unchecked=off)
-    .find('.pf-v5-c-switch__label')
+    .find('span')
     // they are hidden via a CSS rule like
     // .pf-v5-c-switch__input:not(:checked)~.pf-m-on { display: none; }
     // .pf-v5-c-switch__input:checked~.pf-m-off { display: none; }
@@ -142,30 +142,31 @@ Then('user will see description of each option on each card', () => {
 });
 
 Given('user has hidden Getting Started Resources from View', () => {
-  if (cy.get(addPagePO.gettingStarted)) {
-    cy.log('Getting started resources is present');
-  } else {
-    cy.get(addPagePO.restoreGettingStarted).click();
-  }
+  cy.get('.ocs-getting-started-expandable-section').then(($el) => {
+    if ($el.hasClass('pf-m-expanded')) {
+      cy.get(addPagePO.toogleGettingStarted).click();
+    } else {
+      cy.log('Getting Started card is hidden');
+    }
+  });
 });
 
-When('user selects Hide from view option from kebab menu', () => {
-  if (cy.get(addPagePO.gettingStarted)) {
-    cy.get(addPagePO.kebabMenuGettingStarted).click();
-    cy.get(addPagePO.hideGettingStarted).click();
-  } else {
-    cy.get(addPagePO.restoreGettingStarted).click();
-    cy.get(addPagePO.kebabMenuGettingStarted).click();
-    cy.get(addPagePO.hideGettingStarted).click();
-  }
+Given('user has Getting Started Resources shown in Add page', () => {
+  cy.get('.ocs-getting-started-expandable-section').then(($el) => {
+    if ($el.hasClass('pf-m-expanded')) {
+      cy.log('Getting Started card can be seen');
+    } else {
+      cy.get(addPagePO.toogleGettingStarted).click();
+    }
+  });
 });
 
 Then('user will not see Getting started resources card', () => {
-  cy.get(addPagePO.gettingStarted).should('not.exist');
+  cy.get(addPagePO.gettingStarted).parent().should('have.attr', 'hidden');
 });
 
 When('user clicks on Show getting started resources link', () => {
-  cy.get(addPagePO.restoreGettingStarted).click();
+  cy.get(addPagePO.toogleGettingStarted).click();
 });
 
 Then('user will see Getting started resources card', () => {

frontend/packages/dev-console/integration-tests/support/step-definitions/common/masthead.ts

@@ -5,7 +5,5 @@ When('user clicks on Application button in Masthead', () => {
 });
 
 Then('{string} entry is present in Application menu in Masthead', (entry: string) => {
-  cy.byTestID('application-launcher-item')
-    .find('.pf-v5-c-app-launcher__menu-item-text')
-    .should('have.text', entry);
+  cy.byTestID('application-launcher-item').should('have.text', entry);
 });

frontend/packages/dev-console/integration-tests/support/step-definitions/crw/crw-basic.ts

@@ -37,6 +37,6 @@ Then('user is redirected to Codeready Workspaces Dashboard', () => {
   );
 
   cy.url().should('equal', `${crwUrl}/dashboard/#/create-workspace?tab=quick-add`);
-  cy.get('.pf-v5-c-spinner__tail-ball').should('not.exist');
-  cy.get('.pf-v5-c-title').should('have.text', 'Create Workspace');
+  cy.get('[class*="spinner"]').should('not.exist');
+  cy.get('h1[class*="title"]').should('have.text', 'Create Workspace');
 });

frontend/packages/dev-console/integration-tests/support/step-definitions/health-checks/add-health-checks-topology-sidebar.ts

@@ -8,7 +8,7 @@ import { navigateTo, perspective, topologyHelper, topologySidePane } from '../..
 
 Given('user selects type as {string}', (type: string) => {
   cy.byLegacyTestID('dropdown-button').should('be.visible').click();
-  cy.get('.pf-v5-c-dropdown__menu').find('li').contains(type).should('be.visible').click();
+  cy.byLegacyTestID('dropdown-menu').contains(type).should('be.visible').click();
   cy.get('body').then(($el) => {
     if ($el.find('[data-test-id="dropdown-button"]').text().includes('Container command')) {
       cy.get('[placeholder="argument"]').should('be.visible').type('example');