fix(cypress): enhance logging in media library tests and utility functions for better traceability

Author: martinjagodic

cypress/e2e/common/media_library.js

@@ -102,14 +102,22 @@ function assertGridEntryImage(entry) {
 
 export default function({ entries, getUser }) {
   beforeEach(() => {
-    login(getUser && getUser());
+    console.log('[media_library.beforeEach] START');
+    const user = getUser && getUser();
+    console.log('[media_library.beforeEach] user=', user ? JSON.stringify(user) : 'none');
+    login(user);
+    console.log('[media_library.beforeEach] login() returned');
   });
 
   it('can upload image from global media library', () => {
+    console.log('[TEST] can upload image from global media library - START');
     goToMediaLibrary();
+    console.log('[TEST] goToMediaLibrary() completed');
     uploadMediaFile();
+    console.log('[TEST] uploadMediaFile() completed');
     matchImageSnapshot();
     closeMediaLibrary();
+    console.log('[TEST] can upload image from global media library - END');
   });
 
   it('can delete image from global media library', () => {

cypress/e2e/common/spec_utils.js

@@ -1,41 +1,60 @@
 export function before(taskResult, options, backend) {
+  console.log(`[spec_utils.before] START backend=${backend}`);
   Cypress.config('taskTimeout', 5 * 60 * 1000); // 5 minutes
   cy.task('setupBackend', { backend, options }).then(data => {
+    console.log('[spec_utils.before] setupBackend completed, data=', data);
     taskResult.data = data;
     Cypress.config('defaultCommandTimeout', data.mockResponses ? 5 * 1000 : 1 * 60 * 1000);
+    console.log(`[spec_utils.before] COMPLETE mockResponses=${data.mockResponses} timeout=${data.mockResponses ? 5000 : 60000}ms`);
   });
 }
 
 export function after(taskResult, backend) {
+  console.log(`[spec_utils.after] START backend=${backend}`);
   cy.task('teardownBackend', {
     backend,
     ...taskResult.data,
+  }).then(() => {
+    console.log('[spec_utils.after] COMPLETE');
   });
 }
 
 export function beforeEach(taskResult, backend) {
   const spec = Cypress.mocha.getRunner().suite.ctx.currentTest.parent.title;
   const testName = Cypress.mocha.getRunner().suite.ctx.currentTest.title;
 
+  console.log(`[spec_utils.beforeEach] START backend=${backend} spec="${spec}" test="${testName}"`);
+  console.log(`[spec_utils.beforeEach] mockResponses=${taskResult.data.mockResponses}`);
+  console.log(`[spec_utils.beforeEach] user=`, JSON.stringify(taskResult.data.user || {}));
+
   cy.task('setupBackendTest', {
     backend,
     ...taskResult.data,
     spec,
     testName,
+  }).then(() => {
+    console.log('[spec_utils.beforeEach] setupBackendTest completed');
   });
 
   if (taskResult.data.mockResponses) {
     const fixture = `${spec}__${testName}.json`;
-    console.log('loading fixture:', fixture);
-    cy.stubFetch({ fixture });
+    console.log(`[spec_utils.beforeEach] Loading fixture: ${fixture}`);
+    cy.stubFetch({ fixture }).then(() => {
+      console.log('[spec_utils.beforeEach] stubFetch completed');
+    });
+  } else {
+    console.log('[spec_utils.beforeEach] WARNING: mockResponses is false/undefined - no fixture loaded');
   }
 
   // cy.clock(0, ['Date']) was hanging git-gateway tests after page load
   // Hypothesis: freezing time to 0 breaks app initialization during cy.visit()
   // Temporary fix: skip cy.clock for git-gateway, use default clock for others
   if (backend !== 'git-gateway') {
+    console.log('[spec_utils.beforeEach] Setting clock to epoch 0');
     return cy.clock(0, ['Date']);
   }
+
+  console.log('[spec_utils.beforeEach] COMPLETE - skipped clock for git-gateway');
 }
 
 export function afterEach(taskResult, backend) {

cypress/e2e/media_library_spec_git-gateway_gitlab_backend_large_media.js

@@ -6,23 +6,33 @@ const backend = 'git-gateway';
 const provider = 'gitlab';
 
 describe('Git Gateway (GitLab) Backend Media Library - Large Media', () => {
-  let taskResult = { data: {} };
+  const taskResult = { data: {} };
 
   before(() => {
+    console.log('[SPEC before] START');
     specUtils.before(taskResult, { publish_mode: 'editorial_workflow', provider }, backend);
+    console.log('[SPEC before] COMPLETE, taskResult.data=', taskResult.data);
   });
 
   after(() => {
+    console.log('[SPEC after] START');
     specUtils.after(taskResult, backend);
+    console.log('[SPEC after] COMPLETE');
   });
 
   beforeEach(() => {
+    console.log('[SPEC beforeEach] START, taskResult.data=', taskResult.data);
     specUtils.beforeEach(taskResult, backend);
+    console.log('[SPEC beforeEach] COMPLETE');
   });
 
   afterEach(() => {
+    console.log('[SPEC afterEach] START');
     specUtils.afterEach(taskResult, backend);
+    console.log('[SPEC afterEach] COMPLETE');
   });
 
+  console.log('[SPEC] About to call fixture()');
   fixture({ entries: [entry1], getUser: () => taskResult.data.user });
+  console.log('[SPEC] fixture() returned');
 });

cypress/utils/steps.js

@@ -9,8 +9,10 @@ const {
 } = require('./constants');
 
 function login(user) {
+  console.log('[login] START user=', user ? 'yes' : 'no', 'netlifySiteURL=', user?.netlifySiteURL || 'none');
   cy.viewport(1200, 1200);
   if (user) {
+    console.log('[login] About to cy.visit("/")');
     cy.visit('/', {
       onBeforeLoad: () => {
         // https://github.com/cypress-io/cypress/issues/1208
@@ -19,20 +21,28 @@ function login(user) {
         if (user.netlifySiteURL) {
           window.localStorage.setItem('netlifySiteURL', user.netlifySiteURL);
         }
+        console.log('[login] onBeforeLoad complete');
       },
+    }).then(() => {
+      console.log('[login] cy.visit completed');
     });
     if (user.netlifySiteURL && user.email && user.password) {
+      console.log('[login] Filling login form');
       cy.get('input[name="email"]', { timeout: 10000 }).clear();
       cy.get('input[name="email"]').type(user.email);
       cy.get('input[name="password"]').clear();
       cy.get('input[name="password"]').type(user.password);
       cy.contains('button', 'Login').click();
+      console.log('[login] Login button clicked');
     }
   } else {
     cy.visit('/');
     cy.contains('button', 'Login').click();
   }
-  cy.contains('a', 'New Post');
+  console.log('[login] Waiting for New Post link');
+  cy.contains('a', 'New Post', { timeout: 60000 }).then(() => {
+    console.log('[login] New Post link found - COMPLETE');
+  });
 }
 
 function assertNotification(message) {