[Enhancement] Random failure on embed.spec.js due to click too early

[peterzhuamazon]

Coming from https://github.com/opensearch-project/opensearch-build/issues/4745

Running:  core-opensearch-dashboards/opensearch-dashboards/apps/vis_type_table            (3 of 5)
            /embed.spec.js                                                                          

  table visualization in embedded mode
    ✓ Should open table vis in embedded mode (31196ms)
    ✓ Should allow to filter in embedded mode (10004ms)
    ✓ Should filter for value in embedded mode (15156ms)
    1) Should filter out value in embedded mode

  3 passing (2m)
  1 failing

  1) table visualization in embedded mode
       Should filter out value in embedded mode:
     CypressError: Timed out retrying after 60050ms: `cy.click()` failed because this element is detached from the DOM.

`<button class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small" type="button" aria-label="Filter out value: 0" data-test-subj="filterOutValue">...</button>`

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

  > `cy.find()`

This DOM element likely became detached somewhere between the previous and current command.

Common situations why this happens:
  - Your JS framework re-rendered asynchronously
  - Your app code reacted to an event firing and removed the element

You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.

https://on.cypress.io/element-has-detached-from-dom
      at $Cy.ensureAttached (http://localhost:5601/__cypress/runner/cypress_runner.js:163936:76)
      at runAllChecks (http://localhost:5601/__cypress/runner/cypress_runner.js:150536:12)
      at retryActionability (http://localhost:5601/__cypress/runner/cypress_runner.js:150616:16)
      at tryCatcher (http://localhost:5601/__cypress/runner/cypress_runner.js:13022:23)
      at Function.Promise.attempt.Promise.try (http://localhost:5601/__cypress/runner/cypress_runner.js:10296:29)
      at whenStable (http://localhost:5601/__cypress/runner/cypress_runner.js:168808:63)
      at http://localhost:5601/__cypress/runner/cypress_runner.js:168305:14
      at tryCatcher (http://localhost:5601/__cypress/runner/cypress_runner.js:13022:23)
      at Promise._settlePromiseFromHandler (http://localhost:5601/__cypress/runner/cypress_runner.js:10957:31)
      at Promise._settlePromise (http://localhost:5601/__cypress/runner/cypress_runner.js:11014:18)
      at Promise._settlePromise0 (http://localhost:5601/__cypress/runner/cypress_runner.js:11059:10)
      at Promise._settlePromises (http://localhost:5601/__cypress/runner/cypress_runner.js:11139:18)
      at Promise._fulfill (http://localhost:5601/__cypress/runner/cypress_runner.js:11083:18)
      at http://localhost:5601/__cypress/runner/cypress_runner.js:12697:46
  From Your Spec Code:
      at Context.eval (http://localhost:5601/__cypress/tests?p=cypress/support/index.js:3171:3)

After some debugging we realize if adding 2000ms wait before the click, test would pass consistently suggesting the element needs time to load in https://github.com/opensearch-project/opensearch-dashboards-functional-test/blob/d486264c185825729f60a1e135b01a9c12c29eed/cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/vis_type_table/embed.spec.js

    cy.tbClickTableCellAction(2, 0, 0, 'expand', 0, true);
->cy.wait(2000);
    cy.tbClickFilterFromExpand('filter for');
    cy.reload();
    cy.tbGetTableDataFromVisualization().then((data) => {
@@ -157,6 +158,7 @@ describe('table visualization in embedded mode', () => {
        expect(data).to.deep.eq(expectedData);
      });
      cy.tbClickTableCellAction(2, 0, 0, 'expand', 0, true);
->cy.wait(2000);
      cy.tbClickFilterFromExpand('filter out');
      cy.reload();
      cy.tbGetTableDataFromVisualization().then((data) => {

We need some proper way to fix this permanently as well as other similar cases.

Thanks.

[peterzhuamazon]

Before certain stuck we can clearly see there uncaught exceptions:

[ashwin-pc]

Instead of waits, I think we should try changing these to should('be.visible') in the cy.tbClickFilterFromExpand helper before executing the clicks.

[ashwin-pc]

Also this applies to all the tests in this file that come into the Dom after the page has loaded

[peterzhuamazon]

Before certain stuck we can clearly see there uncaught exceptions:

Apparently this PR is missed in backports, thus showing all these errors here:

• https://github.com/opensearch-project/opensearch-dashboards-functional-test/pull/969

cc: @ashwin-pc @abbyhu2000 Thanks!

[dblock]

[Catch All Triage - 1, 2]