Mcdev10011/cypress

[Mcdev10011]

feat(cypress): enhance assertion block and modernize styling

🔗 Linked issue

Description

This PR introduces the following improvements to the Cypress feature:

• CypressAssertion.tsx enhancements

  • Added a “Select By” dropdown (selectorMethod) and corresponding input (selectorValue).
  • Introduced dynamic placeholder text for the “Expected Value” field based on the chosen matcher.
  • Added useEffect hooks to reset invalid selectorMethod or matcherType values.
  • Removed conditional disabled logic on the matcher dropdown once a selector is chosen.

• Styling updates for action/assertion cards

  • Reworked the layout for Cypress “CommandStep” fields so that Selector, Value, Action, and Argument appear inline.
  • Styled dropdown arrows, focus/hover states, and added responsive behavior.
  • Updated the “Delete Step” button to center its text/icon, apply a gradient background, and use the AiOutlineClose icon.

---

Demo test generation & known issues

Below is the demo test generated by the GUI. It contains multiple syntax errors—each is marked as Pending or Bug. These will be addressed in follow-up commits.

describe('Demo: Cypress Feature Showcase', () => {
  it('', () => {
    before(() => {
      cy.visit('http://localhost:3000');
    });
  });

  it('should load the home page and display the main header', () => {
    cy.get('h1').should.have.text('Welcome to MyApp');
  });

  it('should navigate to the Dashboard and check elements', () => {
    cy.get(#go - to - dashboard).click();
    .should.include('/dashboard');
    cy.contains(/^Dashboard$/i).should.be.visible();
  });
});