chore: Cypress chart selectors refactor (#11312)

* cypress selectors refactor in chart list tests

* fixed wrong selector

superset-frontend/cypress-base/cypress/integration/chart_list/card_view.test.ts

@@ -27,40 +27,42 @@ describe('chart card view', () => {
   });
 
   it('should load cards', () => {
-    cy.get('.chart-list-view');
-    cy.get('.ant-card').should('be.visible');
-    cy.get('.ant-card').should('have.length', 25);
+    cy.get('[data-test="chart-list-view"]');
+    cy.get('[data-test="styled-card"]').should('be.visible');
+    cy.get('[data-test="styled-card"]').should('have.length', 25);
   });
 
   it('should allow to favorite/unfavorite chart card', () => {
-    cy.get('.ant-card .card-actions')
+    cy.get("[data-test='card-actions']")
       .first()
       .find("[data-test='favorite-selected']")
       .should('not.exist');
-    cy.get(".ant-card .card-actions [data-test='favorite-unselected']")
+    cy.get("[data-test='card-actions']")
+      .find("[data-test='favorite-unselected']")
       .first()
       .click();
-    cy.get('.ant-card .card-actions')
+    cy.get("[data-test='card-actions']")
       .first()
       .find("[data-test='favorite-selected']")
-      .should('exist');
-    cy.get('.ant-card .card-actions')
+      .should('be.visible');
+    cy.get("[data-test='card-actions']")
       .first()
       .find("[data-test='favorite-unselected']")
       .should('not.exist');
 
-    cy.get('.ant-card .card-actions')
+    cy.get("[data-test='card-actions']")
       .first()
       .find("[data-test='favorite-unselected']")
       .should('not.exist');
-    cy.get(".ant-card .card-actions [data-test='favorite-selected']")
+    cy.get("[data-test='card-actions']")
       .first()
+      .find("[data-test='favorite-selected']")
       .click();
-    cy.get('.ant-card .card-actions')
+    cy.get("[data-test='card-actions']")
       .first()
       .find("[data-test='favorite-unselected']")
-      .should('exist');
-    cy.get('.ant-card .card-actions')
+      .should('be.visible');
+    cy.get("[data-test='card-actions']")
       .first()
       .find("[data-test='favorite-selected']")
       .should('not.exist');
@@ -71,37 +73,45 @@ describe('chart card view', () => {
     cy.get('.Select__control').last().should('be.visible');
     cy.get('.Select__control').last().click();
     cy.get('.Select__menu').contains('Alphabetical').click();
-    cy.get('.chart-list-view').should('be.visible');
-    cy.get('.ant-card').first().contains('% Rural');
+    cy.get('[data-test="chart-list-view"]').should('be.visible');
+    cy.get('[data-test="styled-card"]').first().contains('% Rural');
 
     // sort Recently Modified
     cy.get('.Select__control').last().should('be.visible');
     cy.get('.Select__control').last().click();
     cy.get('.Select__menu').contains('Recently Modified').click();
-    cy.get('.chart-list-view').should('be.visible');
-    cy.get('.ant-card').first().contains('Unicode Cloud');
-    cy.get('.ant-card').last().contains('Life Expectancy VS Rural %');
+    cy.get('[data-test="chart-list-view"]').should('be.visible');
+    cy.get('[data-test="styled-card"]').first().contains('Unicode Cloud');
+    cy.get('[data-test="styled-card"]')
+      .last()
+      .contains('Life Expectancy VS Rural %');
   });
 
   it('should delete correctly', () => {
     // show delete modal
-    cy.get('.ant-dropdown-trigger').last().trigger('mouseover');
-    cy.get('.ant-dropdown-menu-item').contains('Delete').should('exist');
-    cy.get('.ant-dropdown-menu-item').contains('Delete').click();
-    cy.get('.modal-dialog').should('be.visible');
-    cy.get('.modal-dialog .btn-danger').should('have.attr', 'disabled');
-    cy.get(".modal-dialog input[id='delete']").type('DELETE');
-    cy.get('.modal-dialog .btn-danger').should('not.have.attr', 'disabled');
-    cy.get('.modal-dialog .btn-default').contains('Cancel').click();
+    cy.get('[data-test="more-horiz"]').last().trigger('mouseover');
+    cy.get('[data-test="chart-list-delete-option"]').should('be.visible');
+    cy.get('[data-test="chart-list-delete-option"]').contains('Delete').click();
+    cy.get('[data-test="Please Confirm-modal-header"]').should('be.visible');
+    cy.get('[data-test="modal-delete-button"]').should('have.attr', 'disabled');
+    cy.get('[data-test="Please Confirm-modal-header"]').should('be.visible');
+    cy.get("[data-test='delete-modal-input']").type('DELETE');
+    cy.get('[data-test="modal-delete-button"]').should(
+      'not.have.attr',
+      'disabled',
+    );
+    cy.get('[data-test="modal-cancel-button"]').click();
   });
 
   it('should edit correctly', () => {
     // show edit modal
-    cy.get('.ant-dropdown-trigger').last().trigger('mouseover');
-    cy.get('.ant-dropdown-menu-item').contains('Edit').should('exist');
-    cy.get('.ant-dropdown-menu-item').contains('Edit').click();
-    cy.get('.modal-dialog').should('be.visible');
-    cy.get('.modal-dialog input[name="name"]').should('not.have.value');
-    cy.get('.modal-dialog .btn-default').contains('Cancel').click();
+    cy.get('[data-test="more-horiz"]').last().trigger('mouseover');
+    cy.get('[data-test="chart-list-edit-option"]').should('be.visible');
+    cy.get('[data-test="chart-list-edit-option"]').click();
+    cy.get('[data-test="properties-edit-modal"]').should('be.visible');
+    cy.get('[data-test="properties-name-input"]').should('not.have.value');
+    cy.get('[data-test="properties-modal-cancel-button"]')
+      .contains('Cancel')
+      .click();
   });
 });

superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts

@@ -30,10 +30,10 @@ describe('chart card view filters', () => {
     // filter by owners
     cy.get('.Select__control').first().click();
     cy.get('.Select__menu').contains('alpha user').click();
-    cy.get('.ant-card').should('not.exist');
+    cy.get('[data-test="styled-card"]').should('not.exist');
     cy.get('.Select__control').first().click();
     cy.get('.Select__menu').contains('gamma user').click();
-    cy.get('.ant-card').should('not.exist');
+    cy.get('[data-test="styled-card"]').should('not.exist');
   });
 
   it('should filter by created by correctly', () => {
@@ -43,30 +43,36 @@ describe('chart card view filters', () => {
     cy.get('.ant-card').should('not.exist');
     cy.get('.Select__control').eq(1).click();
     cy.get('.Select__menu').contains('gamma user').click();
-    cy.get('.ant-card').should('not.exist');
+    cy.get('[data-test="styled-card"]').should('not.exist');
   });
 
   it('should filter by viz type correctly', () => {
     // filter by viz type
     cy.get('.Select__control').eq(2).click();
     cy.get('.Select__menu').contains('area').click({ timeout: 5000 });
-    cy.get('.ant-card').its('length').should('be.gt', 0);
-    cy.get('.ant-card').contains("World's Pop Growth").should('exist');
+    cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0);
+    cy.get('[data-test="styled-card"]')
+      .contains("World's Pop Growth")
+      .should('be.visible');
     cy.get('.Select__control').eq(2).click();
     cy.get('.Select__control').eq(2).type('world_map{enter}');
-    cy.get('.ant-card').should('have.length', 1);
-    cy.get('.ant-card').contains('% Rural').should('exist');
+    cy.get('[data-test="styled-card"]').should('have.length', 1);
+    cy.get('[data-test="styled-card"]')
+      .contains('% Rural')
+      .should('be.visible');
   });
 
   it('should filter by datasource correctly', () => {
     // filter by datasource
     cy.get('.Select__control').eq(3).click();
     cy.get('.Select__menu').contains('unicode_test').click();
-    cy.get('.ant-card').should('have.length', 1);
-    cy.get('.ant-card').contains('Unicode Cloud').should('exist');
-    cy.get('.Select__control').eq(3).click();
-    cy.get('.Select__control').eq(3).type('energy_usage{enter}{enter}');
-    cy.get('.ant-card').its('length').should('be.gt', 0);
+    cy.get('[data-test="styled-card"]').should('have.length', 1);
+    cy.get('[data-test="styled-card"]')
+      .contains('Unicode Cloud')
+      .should('be.visible');
+    cy.get('.Select__control').eq(2).click();
+    cy.get('.Select__control').eq(2).type('energy_usage{enter}{enter}');
+    cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0);
   });
 });
 
@@ -82,42 +88,44 @@ describe('chart list view filters', () => {
     // filter by owners
     cy.get('.Select__control').first().click();
     cy.get('.Select__menu').contains('alpha user').click();
-    cy.get('.table-row').should('not.exist');
+    cy.get('[data-test="table-row"]').should('not.exist');
     cy.get('.Select__control').first().click();
     cy.get('.Select__menu').contains('gamma user').click();
-    cy.get('.table-row').should('not.exist');
+    cy.get('[data-test="table-row"]').should('not.exist');
   });
 
   it('should filter by created by correctly', () => {
     // filter by created by
     cy.get('.Select__control').eq(1).click();
     cy.get('.Select__menu').contains('alpha user').click();
-    cy.get('.table-row').should('not.exist');
+    cy.get('[data-test="table-row"]').should('not.exist');
     cy.get('.Select__control').eq(1).click();
     cy.get('.Select__menu').contains('gamma user').click();
-    cy.get('.table-row').should('not.exist');
+    cy.get('[data-test="table-row"]').should('not.exist');
   });
 
   it('should filter by viz type correctly', () => {
     // filter by viz type
     cy.get('.Select__control').eq(2).click();
     cy.get('.Select__menu').contains('area').click({ timeout: 5000 });
-    cy.get('.table-row').its('length').should('be.gt', 0);
-    cy.get('.table-row').contains("World's Pop Growth").should('exist');
+    cy.get('[data-test="table-row"]').its('length').should('be.gt', 0);
+    cy.get('[data-test="table-row"]')
+      .contains("World's Pop Growth")
+      .should('exist');
     cy.get('.Select__control').eq(2).click();
     cy.get('.Select__control').eq(2).type('world_map{enter}');
-    cy.get('.table-row').should('have.length', 1);
-    cy.get('.table-row').contains('% Rural').should('exist');
+    cy.get('[data-test="table-row"]').should('have.length', 1);
+    cy.get('[data-test="table-row"]').contains('% Rural').should('exist');
   });
 
   it('should filter by datasource correctly', () => {
     // filter by datasource
     cy.get('.Select__control').eq(3).click();
     cy.get('.Select__menu').contains('unicode_test').click();
-    cy.get('.table-row').should('have.length', 1);
-    cy.get('.table-row').contains('Unicode Cloud').should('exist');
+    cy.get('[data-test="table-row"]').should('have.length', 1);
+    cy.get('[data-test="table-row"]').contains('Unicode Cloud').should('exist');
     cy.get('.Select__control').eq(3).click();
     cy.get('.Select__control').eq(3).type('energy_usage{enter}{enter}');
-    cy.get('.table-row').its('length').should('be.gt', 0);
+    cy.get('[data-test="table-row"]').its('length').should('be.gt', 0);
   });
 });

superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts

@@ -27,24 +27,25 @@ describe('chart list view', () => {
   });
 
   it('should load rows', () => {
-    cy.get('.chart-list-view');
-    cy.get('table[role="table"]').should('be.visible');
-
+    cy.get('[data-test="listview-table"]').should('be.visible');
     // check chart list view header
-    cy.get('th[role="columnheader"]:nth-child(2)').contains('Chart');
-    cy.get('th[role="columnheader"]:nth-child(3)').contains(
-      'Visualization Type',
-    );
-    cy.get('th[role="columnheader"]:nth-child(4)').contains('Dataset');
-    cy.get('th[role="columnheader"]:nth-child(5)').contains('Modified By');
-    cy.get('th[role="columnheader"]:nth-child(6)').contains('Last Modified');
-    cy.get('th[role="columnheader"]:nth-child(7)').contains('Created By');
-    cy.get('th[role="columnheader"]:nth-child(8)').contains('Actions');
-    cy.get('.table-row').should('have.length', 25);
+    cy.get('[data-test="sort-header"]').eq(1).contains('Chart');
+    cy.get('[data-test="sort-header"]').eq(2).contains('Visualization Type');
+    cy.get('[data-test="sort-header"]').eq(3).contains('Dataset');
+    cy.get('[data-test="sort-header"]').eq(4).contains('Modified By');
+    cy.get('[data-test="sort-header"]').eq(5).contains('Last Modified');
+    cy.get('[data-test="sort-header"]').eq(6).contains('Created By');
+    cy.get('[data-test="sort-header"]').eq(7).contains('Actions');
+    cy.get('[data-test="table-row"]').should('have.length', 25);
   });
 
   it('should sort correctly', () => {
-    cy.get('th[role="columnheader"]:nth-child(2)').click();
-    cy.get('.table-row td:nth-child(2):eq(0)').contains('% Rural');
+    cy.get('[data-test="sort-header"]').eq(2).click();
+    cy.get('[data-test="sort-header"]').eq(2).click();
+    cy.get('[data-test="table-row"]')
+      .first()
+      .find('[data-test="table-row-cell"]')
+      .find('[data-test="cell-text"]')
+      .contains('% Rural');
   });
 });

superset-frontend/src/components/dataViewCommon/TableCollection.tsx

@@ -291,7 +291,7 @@ export default function TableCollection({
                   const columnCellProps = cell.column.cellProps || {};
                   return (
                     <td
-                      data-test="table-cell"
+                      data-test="table-row-cell"
                       className={cx('table-cell', {
                         'table-cell-loader': loading,
                         [cell.column.size || '']: cell.column.size,