improve cypress tests

packages/app/test/cypress/integration/20-basic-features/20-basic-features--access-to-page.spec.ts

@@ -20,23 +20,23 @@ context('Access to page', () => {
   });
 
   // TODO: https://redmine.weseek.co.jp/issues/109939
-  // it('/Sandbox with anchor hash is successfully loaded', () => {
-  //   cy.visit('/Sandbox#Headers');
-  //   cy.waitUntilSkeletonDisappear();
+  it('/Sandbox with anchor hash is successfully loaded', () => {
+    cy.visit('/Sandbox#Headers');
+    cy.waitUntilSkeletonDisappear();
 
-  //   // for check download toc data
-  //   cy.get('.toc-link').should('be.visible');
+    // for check download toc data
+    cy.get('.toc-link').should('be.visible');
 
-  //   // hide fab // disable fab for sticky-events warning
-  //   // cy.getByTestid('grw-fab-container').invoke('attr', 'style', 'display: none');
+    // hide fab // disable fab for sticky-events warning
+    // cy.getByTestid('grw-fab-container').invoke('attr', 'style', 'display: none');
 
-  //   // remove animation for screenshot
-  //   // remove 'blink' class because ::after element cannot be operated
-  //   // https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/21709814#21709814
-  //   cy.get('#mdcont-headers').invoke('removeClass', 'blink');
+    // remove animation for screenshot
+    // remove 'blink' class because ::after element cannot be operated
+    // https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/21709814#21709814
+    cy.get('#mdcont-headers').invoke('removeClass', 'blink');
 
-  //   cy.screenshot(`${ssPrefix}-sandbox-headers`);
-  // });
+    cy.screenshot(`${ssPrefix}-sandbox-headers`);
+  });
 
   it('/Sandbox/Math is successfully loaded', () => {
     cy.visit('/Sandbox/Math');
@@ -45,26 +45,21 @@ context('Access to page', () => {
     // for check download toc data
     cy.get('.toc-link').should('be.visible');
 
-    cy.collapseSidebar(true);
+    cy.get('.math').should('be.visible');
+
     cy.screenshot(`${ssPrefix}-sandbox-math`);
   });
 
   it('/Sandbox with edit is successfully loaded', () => {
-    cy.visit('/Sandbox');
+    cy.visit('/Sandbox#edit');
     cy.waitUntilSkeletonDisappear();
 
-    cy.get('#grw-subnav-container').should('be.visible').within(() => {
-
-      // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(2000);
-      cy.getByTestid('editor-button').should('be.visible').click();
-    })
-
     cy.getByTestid('navbar-editor').should('be.visible');
     cy.get('.grw-editor-navbar-bottom').should('be.visible');
     cy.getByTestid('save-page-btn').should('be.visible');
-    cy.get('.grw-grant-selector').should('be.visible')
+    cy.get('.grw-grant-selector').should('be.visible');
 
+    cy.collapseSidebar(true);
     cy.screenshot(`${ssPrefix}-Sandbox-edit-page`);
   })
 

packages/app/test/cypress/integration/20-basic-features/20-basic-features--use-tools.spec.ts

@@ -210,16 +210,17 @@ context('Page Accessories Modal', () => {
       cy.login(user.username, user.password);
     });
 
-    cy.visit('/Sandbox/Bootstrap4');
+    cy.visit('/');
 
-    cy.getByTestid('grw-contextual-sub-nav').as('subnav').should('be.visible').within(() => {
-      cy.getByTestid('open-page-item-control-btn').as('pageItemControlBtn').should('be.visible');
-    });
     cy.waitUntil(() => {
       // do
-      cy.get('@pageItemControlBtn').click();
+      cy.getByTestid('grw-contextual-sub-nav').should('be.visible').within(() => {
+        cy.getByTestid('open-page-item-control-btn').find('button').first().as('btn').click();
+      });
       // wait until
-      return cy.get('.dropdown-menu.show').then($elem => $elem.is(':visible'));
+      return cy.get('body').within(() => {
+        return Cypress.$('.dropdown-menu.show').is(':visible');
+      });
     });
 
   });

packages/app/test/cypress/integration/21-basic-features-for-guest/21-basic-features-for-guest--access-to-page.spec.ts

@@ -3,45 +3,47 @@ context('Access to page by guest', () => {
 
   it('/Sandbox is successfully loaded', () => {
     cy.visit('/Sandbox');
-    cy.getByTestid('grw-pagetree-item-container').should('be.visible');
+    cy.waitUntilSkeletonDisappear();
+
     cy.collapseSidebar(true, true);
     cy.screenshot(`${ssPrefix}-sandbox`);
   });
 
+  // TODO: https://redmine.weseek.co.jp/issues/109939
   it('/Sandbox with anchor hash is successfully loaded', () => {
     cy.visit('/Sandbox#Headers');
-    cy.getByTestid('grw-pagetree-item-container').should('be.visible');
-
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    // cy.wait(500);
+    cy.waitUntilSkeletonDisappear();
 
     // hide fab // disable fab for sticky-events warning
     // cy.getByTestid('grw-fab-container').invoke('attr', 'style', 'display: none');
 
-    cy.collapseSidebar(true);
+    // remove animation for screenshot
+    // remove 'blink' class because ::after element cannot be operated
+    // https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/21709814#21709814
+    cy.get('#mdcont-headers').invoke('removeClass', 'blink');
+
     cy.screenshot(`${ssPrefix}-sandbox-headers`);
   });
 
   it('/Sandbox/Math is successfully loaded', () => {
     cy.visit('/Sandbox/Math');
-    cy.getByTestid('revision-toc-content').should('be.visible');
+    cy.waitUntilSkeletonDisappear();
+
+    // for check download toc data
+    cy.get('.toc-link').should('be.visible');
 
     cy.get('.math').should('be.visible');
 
     cy.collapseSidebar(true);
-    cy.screenshot(`${ssPrefix}-sandbox-math`, {
-      blackout: ['.revision-toc', '[data-hide-in-vrt=true]']
-    });
+    cy.screenshot(`${ssPrefix}-sandbox-math`);
   });
 
   it('/Sandbox with edit is successfully loaded', () => {
     cy.visit('/Sandbox#edit');
-
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(1000);
+    cy.waitUntilSkeletonDisappear();
 
     cy.collapseSidebar(true);
-    cy.screenshot(`${ssPrefix}-sandbox-edit-page`);
+    cy.screenshot(`${ssPrefix}-sandbox-with-edit-hash`);
   })
 
 });

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

@@ -71,6 +71,11 @@ Cypress.Commands.add('waitUntilSpinnerDisappear', () => {
 
 Cypress.Commands.add('collapseSidebar', (isCollapsed: boolean, waitUntilSaving = false) => {
   cy.getByTestid('grw-sidebar-wrapper', { timeout: 5000 }).within(() => {
+    // skip if .grw-sidebar-dock does not exist
+    if (isHidden(Cypress.$('.grw-sidebar-dock'))) {
+      return;
+    }
+
     // process only when Dock Mode
     cy.get('.grw-sidebar-dock').within(() => {
       const isSidebarContextualNavigationHidden = isHiddenByTestId('grw-contextual-navigation-sub');