[chronograf] Flaky Cypress (E2E) Test - InfluxQL

[vlastahajek]

Chronograf Cypress tests encounter random failures of various InfluxQL subtests during commits.

Some examples
InfluxQL ► create and delete a database with the use of meta query templates

AssertionError: Timed out retrying after 4000ms: Expected to find content: 'db_name.autogen' within the selector: '.query-builder--list-item' but never did.

InfluxQL ► Use InfluxQL query builder to make a new query

CypressError: Timed out retrying after 4050ms: 'cy.click()' failed because this element is detached from the DOM.
AssertionError: Timed out retrying after 4000ms: Not enough elements found. Found '1', expected '2'.
AssertionError: Timed out retrying after 4000ms: Expected <div.query-maker--tab> not to exist in the DOM, but it was continuously found.
AssertionError: Expected to find element: `.query-builder--list-item`, but never found it. Queried from element: <div.query-builder--list-empty>

Short investigation found such problems are often caused by React state updates.

An offered solution could be to use Cypress alias feature:

cy.get('some locator').first().find('another locator').eq(1).as('element');
cy.get('@element').should(***some assertion to be retried until met***);

Source: https://stackoverflow.com/questions/67391770/why-is-cypress-saying-my-element-is-detached-after-just-running-a-get-command

[vlastahajek]

Another temporarily failed run: https://github.com/influxdata/chronograf/actions/runs/12156728600