diff --git a/cypress/utils/commands.js b/cypress/utils/commands.js
index ce28849bc..cab746dd3 100644
--- a/cypress/utils/commands.js
+++ b/cypress/utils/commands.js
@@ -202,6 +202,25 @@ Cypress.Commands.add('getElementByTestId', (testId, options = {}) => {
return cy.get(`[data-test-subj="${testId}"]`, options);
});
+Cypress.Commands.add('getElementsByTestIds', (testIds, options = {}) => {
+ const selectors = [testIds]
+ .flat(Infinity)
+ .map((testId) => `[data-test-subj="${testId}"]`);
+ return cy.get(selectors.join(','), options);
+});
+
+Cypress.Commands.add(
+ 'whenTestIdNotFound',
+ (testIds, callbackFn, options = {}) => {
+ const selectors = [testIds]
+ .flat(Infinity)
+ .map((testId) => `[data-test-subj="${testId}"]`);
+ cy.get('body', options).then(($body) => {
+ if ($body.find(selectors.join(',')).length === 0) callbackFn();
+ });
+ }
+);
+
Cypress.Commands.add('createIndex', (index, policyID = null, settings = {}) => {
cy.request('PUT', `${Cypress.env('openSearchUrl')}/${index}`, settings);
if (policyID != null) {
diff --git a/cypress/utils/dashboards/commands.js b/cypress/utils/dashboards/commands.js
index e7a4e39b1..fc5416f16 100644
--- a/cypress/utils/dashboards/commands.js
+++ b/cypress/utils/dashboards/commands.js
@@ -46,13 +46,29 @@ Cypress.Commands.add('setTopNavDate', (start, end, submit = true) => {
message: `Start: ${start} :: End: ${end}`,
});
- // Click date picker
- cy.getElementByTestId('superDatePickerShowDatesButton', opts).click(opts);
-
- // Click start date
- cy.getElementByTestId('superDatePickerstartDatePopoverButton', opts).click(
+ /* Find any one of the two buttons that change/open the date picker:
+ * * if `superDatePickerShowDatesButton` is found, it will switch the mode to dates
+ * * in some versions of OUI, the switch will open the date selection dialog as well
+ * * if `superDatePickerstartDatePopoverButton` is found, it will open the date selection dialog
+ */
+ cy.getElementsByTestIds(
+ ['superDatePickerstartDatePopoverButton', 'superDatePickerShowDatesButton'],
opts
- );
+ )
+ .should('be.visible')
+ .invoke('attr', 'data-test-subj')
+ .then((testId) => {
+ cy.getElementByTestId(testId, opts).should('be.visible').click(opts);
+ });
+
+ /* While we surely are in the date selection mode, we don't know if the date selection dialog
+ * is open or not. Looking for a tab and if it is missing, click on the dialog opener.
+ */
+ cy.whenTestIdNotFound('superDatePickerAbsoluteTab', () => {
+ cy.getElementByTestId('superDatePickerstartDatePopoverButton', opts)
+ .should('be.visible')
+ .click(opts);
+ });
// Click absolute tab
cy.getElementByTestId('superDatePickerAbsoluteTab', opts).click(opts);
diff --git a/cypress/utils/index.d.ts b/cypress/utils/index.d.ts
index 4f436c3e0..d5daf9dfd 100644
--- a/cypress/utils/index.d.ts
+++ b/cypress/utils/index.d.ts
@@ -2,7 +2,25 @@
///
declare namespace Cypress {
- interface Chainable {
+ interface Chainable { /**
+ * Call a function when an element with a test id cannot be found
+ * @example
+ * cy.whenTestIdNotFound(['query', 'puery'], () => {...})
+ */
+ whenTestIdNotFound(
+ testIds: string | string[],
+ callbackFn: void,
+ options?: Partial
+ ): Chainable;
+ /**
+ * Get elements by their test ids
+ * @example
+ * cy.getElementsByTestIds(['query', 'puery'])
+ */
+ getElementsByTestIds(
+ testIds: string | string[],
+ options?: Partial
+ ): Chainable;
/**
* Get an element by its test id
* @example