use waitUntil

packages/app/test/cypress/integration/60-home/60-home--home.spec.ts

@@ -10,11 +10,15 @@ context('Access Home', () => {
 
   it('Visit home', () => {
     cy.visit('/dummy');
-    cy.waitUntilSkeletonDisappear();
-    cy.get('.grw-personal-dropdown').as('dropdown').should('be.visible').click()
-    cy.get('@dropdown').within(()=>{
-      cy.getByTestid('personal-dropdown-menu').should('have.css', 'display', 'block');
+
+    // open PersonalDropdown
+    cy.waitUntil(() => {
+      // do
+      cy.get('.grw-personal-dropdown').should('be.visible').click();
+      // wait until
+      return cy.getByTestid('grw-personal-dropdown-menu-user-home').then($elem => $elem.is(':visible'));
     });
+    // click the Home button
     cy.getByTestid('grw-personal-dropdown-menu-user-home').should('be.visible').click();
 
     cy.waitUntilSkeletonDisappear();

packages/app/test/cypress/support/commands.ts

@@ -24,6 +24,8 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
+import 'cypress-wait-until';
+
 
 Cypress.Commands.add('getByTestid', (selector, options?) => {
   return cy.get(`[data-testid=${selector}]`, options);
@@ -54,12 +56,14 @@ Cypress.Commands.add('waitUntilSpinnerDisappear', () => {
   cy.get('.fa-spinner').should('not.exist');
 });
 
-Cypress.Commands.add('collapseSidebar', (isCollapsed) => {
-  cy.getByTestid('grw-contextual-navigation-sub').then(($contents) => {
-    const isCurrentCollapsed = $contents.hasClass('d-none');
-    // toggle when the current state and isCoolapsed is not match
-    if (isCurrentCollapsed !== isCollapsed) {
-      cy.getByTestid("grw-navigation-resize-button").click({force: true});
-    }
+Cypress.Commands.add('collapseSidebar', (isCollapsed: boolean) => {
+  cy.waitUntil(() => {
+    // do
+    cy.getByTestid("grw-navigation-resize-button").click({force: true});
+    // wait until
+    return cy.getByTestid('grw-contextual-navigation-sub').then(($elem) => {
+      const isVisible = $elem.is(':visible');
+      return isVisible !== isCollapsed;
+    });
   });
 });