Exploring Cypress selectors for failing table test

Author: directcuteo

frontend/cypress/e2e/block-production/won-slots/table.cy.ts

@@ -52,53 +52,46 @@ describe('BLOCK PRODUCTION WON SLOTS TABLE', () => {
       .then(getBPWonSlots)
       .then((state: BlockProductionWonSlotsState) => {
         if (state && state.slots) {
-          cy.log(state.slots.length.toString());
+          cy.task(state.slots.length.toString());
         }
-        cy.log(condition(state).toString());
-        if (condition(state)) {
-
-          // First, let's see if the main table exists
-          cy.get('mina-block-production-won-slots-table', { timeout: 15000 })
-            .should('exist')
-            .then(() => {
-              cy.log('✅ Main table element found');
-            });
-
-          // Check if .head exists
-          cy.get('mina-block-production-won-slots-table .head', { timeout: 15000 })
-            .should('exist')
-            .then(($head) => {
-              cy.log('✅ Table head found, length:', $head.length);
-              cy.log('Head HTML:', $head.html());
-            });
-
-          // Check all spans in head
-          cy.get('mina-block-production-won-slots-table .head > span')
-            .should('exist')
-            .then(($spans) => {
-              cy.log('✅ Header spans found, count:', $spans.length);
-              $spans.each((index, span) => {
-                cy.log(`Span ${index + 1}:`, span.textContent, 'Visible:', Cypress.$(span).is(':visible'));
-              });
-            });
+        cy.task(condition(state).toString());
+        // This WILL show in CI logs
+        cy.task('log', '🔍 Starting table structure debug...');
+
+        cy.get('mina-block-production-won-slots-table', { timeout: 15000 })
+          .should('exist')
+          .then(() => {
+            cy.task('log', '✅ Main table element found');
+          });
 
-          // Try the exact failing selector
-          cy.get('mina-block-production-won-slots-table .head > span:nth-child(1)', { timeout: 5000 })
-            .should('exist')
-            .then(($span) => {
-              cy.log('✅ First span found:', $span.text());
-              cy.log('Is visible:', $span.is(':visible'));
-              cy.log('Has click handler:', $span.prop('onclick') !== null);
-            });
+        cy.get('mina-block-production-won-slots-table .head', { timeout: 15000 })
+          .should('exist')
+          .then(($head) => {
+            cy.task('log', `✅ Table head found, length: ${$head.length}`);
+            cy.task('log', `Head HTML: ${$head.html()}`);
+          });
 
-          // Compare with working row selector
-          cy.get('mina-block-production-won-slots-table .row:not(.head)')
-            .should('exist')
-            .then(($rows) => {
-              cy.log('✅ Table rows found, count:', $rows.length);
+        cy.get('mina-block-production-won-slots-table .head > span')
+          .should('exist')
+          .then(($spans) => {
+            cy.task('log', `✅ Header spans found, count: ${$spans.length}`);
+            $spans.each((index, span) => {
+              cy.task('log', `Span ${index + 1}: "${span.textContent}" Visible: ${Cypress.$(span).is(':visible')}`);
             });
+          });
 
-        }
+        // Test the exact failing selector
+        cy.get('body').then(() => {
+          // Check if the element exists at all
+          const element = Cypress.$('mina-block-production-won-slots-table .head > span:nth-child(1)');
+          cy.task('log', `❓ nth-child(1) selector found: ${element.length} elements`);
+
+          if (element.length > 0) {
+            cy.task('log', `Element text: "${element.text()}"`);
+            cy.task('log', `Element visible: ${element.is(':visible')}`);
+            cy.task('log', `Element position: ${JSON.stringify(element.offset())}`);
+          }
+        });
       });
   }));