Chore: Fix flaky frontend e2e tests with the explore page (#90184)

* Chore: Fix flaky frontend e2e tests with the explore page

* Use selector

* Add checks to scenes tests

* simplify code

e2e/scenes/various-suite/frontend-sandbox-datasource.spec.ts

@@ -87,6 +87,9 @@ describe.skip('Datasource sandbox', () => {
         e2e.components.DataSourcePicker.container().should('be.visible').click();
         cy.contains(DATASOURCE_TYPED_NAME).scrollIntoView().should('be.visible').click();
 
+        // make sure the datasource was correctly selected and rendered
+        e2e.components.Breadcrumbs.breadcrumb(DATASOURCE_TYPED_NAME).should('be.visible');
+
         cy.wait(300); // wait to prevent false positives because cypress checks too fast
         cy.get(`div[data-plugin-sandbox="${DATASOURCE_ID}"]`).should('not.exist');
       });
@@ -95,6 +98,8 @@ describe.skip('Datasource sandbox', () => {
         e2e.pages.Explore.visit();
         e2e.components.DataSourcePicker.container().should('be.visible').click();
         cy.contains(DATASOURCE_TYPED_NAME).scrollIntoView().should('be.visible').click();
+        // make sure the datasource was correctly selected and rendered
+        e2e.components.Breadcrumbs.breadcrumb(DATASOURCE_TYPED_NAME).should('be.visible');
 
         const valueToType = 'test' + random(100);
 
@@ -115,6 +120,8 @@ describe.skip('Datasource sandbox', () => {
         e2e.pages.Explore.visit();
         e2e.components.DataSourcePicker.container().should('be.visible').click();
         cy.contains(DATASOURCE_TYPED_NAME).scrollIntoView().should('be.visible').click();
+        // make sure the datasource was correctly selected and rendered
+        e2e.components.Breadcrumbs.breadcrumb(DATASOURCE_TYPED_NAME).should('be.visible');
 
         cy.get(`div[data-plugin-sandbox="${DATASOURCE_ID}"]`).should('exist');
       });
@@ -123,6 +130,8 @@ describe.skip('Datasource sandbox', () => {
         e2e.pages.Explore.visit();
         e2e.components.DataSourcePicker.container().should('be.visible').click();
         cy.contains(DATASOURCE_TYPED_NAME).scrollIntoView().should('be.visible').click();
+        // make sure the datasource was correctly selected and rendered
+        e2e.components.Breadcrumbs.breadcrumb(DATASOURCE_TYPED_NAME).should('be.visible');
 
         const valueToType = 'test' + random(100);
 

e2e/various-suite/frontend-sandbox-datasource.spec.ts

@@ -85,6 +85,8 @@ describe('Datasource sandbox', () => {
         e2e.pages.Explore.visit();
         e2e.components.DataSourcePicker.container().should('be.visible').click();
         cy.contains(DATASOURCE_TYPED_NAME).scrollIntoView().should('be.visible').click();
+        // make sure the datasource was correctly selected and rendered
+        e2e.components.Breadcrumbs.breadcrumb(DATASOURCE_TYPED_NAME).should('be.visible');
 
         cy.wait(300); // wait to prevent false positives because cypress checks too fast
         cy.get(`div[data-plugin-sandbox="${DATASOURCE_ID}"]`).should('not.exist');
@@ -95,6 +97,9 @@ describe('Datasource sandbox', () => {
         e2e.components.DataSourcePicker.container().should('be.visible').click();
         cy.contains(DATASOURCE_TYPED_NAME).scrollIntoView().should('be.visible').click();
 
+        // make sure the datasource was correctly selected and rendered
+        e2e.components.Breadcrumbs.breadcrumb(DATASOURCE_TYPED_NAME).should('be.visible');
+
         const valueToType = 'test' + random(100);
 
         cy.get('[data-testid="sandbox-query-editor-query-input"]').should('not.be.disabled');
@@ -114,6 +119,8 @@ describe('Datasource sandbox', () => {
         e2e.pages.Explore.visit();
         e2e.components.DataSourcePicker.container().should('be.visible').click();
         cy.contains(DATASOURCE_TYPED_NAME).scrollIntoView().should('be.visible').click();
+        // make sure the datasource was correctly selected and rendered
+        e2e.components.Breadcrumbs.breadcrumb(DATASOURCE_TYPED_NAME).should('be.visible');
 
         cy.get(`div[data-plugin-sandbox="${DATASOURCE_ID}"]`).should('exist');
       });
@@ -123,6 +130,9 @@ describe('Datasource sandbox', () => {
         e2e.components.DataSourcePicker.container().should('be.visible').click();
         cy.contains(DATASOURCE_TYPED_NAME).scrollIntoView().should('be.visible').click();
 
+        // make sure the datasource was correctly selected and rendered
+        e2e.components.Breadcrumbs.breadcrumb(DATASOURCE_TYPED_NAME).should('be.visible');
+
         const valueToType = 'test' + random(100);
 
         cy.get('[data-testid="sandbox-query-editor-query-input"]').should('not.be.disabled');