cypress-context-aware/examples/modal.example.js

A context-aware command system for Cypress that enables component-based test interactions

// Example: Modal Context-Aware Commands
// This file demonstrates how to create context-aware commands for modal interactions

import { ChainContext } from '../src/index.js';

const Modal = {
  // The root modal command - this establishes the context
  modal(_, { waitForInteractive = true } = {}) {
    const modal = () => cy.getByCastle('modal');

    if (waitForInteractive) {
      modal()
        .should('be.visible')
        .should('have.attr', 'data-castle')
        .should('match', /open/u);
    }

    return modal();
  },

  // Context-aware commands that work within modal() context
  header(_, $subject) {
    return $subject.findByCastle('modal-header');
  },

  body($subject) {
    return $subject.findByCastle('modal-body');
  },

  footer($subject = cy.root()) {
    return $subject.findByCastle('modal-footer');
  },

  closeModal($subject) {
    return $subject.button('close modal').click();
  },
};

// Register the modal commands with the context-aware system
ChainContext.register('modal', Modal, { prevSubject: 'optional' });

// Usage examples:
// cy.modal().header().should('contain', 'Title');
// cy.modal().body().should('be.visible');
// cy.modal().footer().button('Save').click();
// cy.modal().closeModal();