Repository: cypress-io/cypress
File: packages/app/cypress/e2e/studio/studio.cy.ts (TypeScript)

Code before:
        button: 'right',
      })

      cy.get('.__cypress-studio-assertions-menu').shadow()
      .find('.assertions-menu').should('be.visible')

      // Show submenu
      cy.get('.__cypress-studio-assertions-menu').shadow()
      .find('.assertion-type-text:first').realHover()

      cy.get('.__cypress-studio-assertions-menu').shadow()
      .find('.assertion-option')
      .should('have.text', 'Hello, Studio!')
      .should('be.visible')

      autAssertions?.()
    })
  }

  it('shows assertions menu and submenu correctly', () => {
    showAssertionsMenu()
  })

  it('closes assertions menu when clicking outside', () => {
    showAssertionsMenu(() => {
      // click on the highlighted element
      cy.get('.__cypress-studio-assertions-menu').shadow().find('.vue-container').click()
      // check that the menu is closed
      cy.get('.__cypress-studio-assertions-menu').should('not.exist')
    })
  })

  it('closes assertions menu on the highlighted element', () => {
    showAssertionsMenu(() => {
      // click on the highlighted element
      cy.get('.__cypress-studio-assertions-menu').shadow().find('.highlight').click()
      // check that the menu is closed
      cy.get('.__cypress-studio-assertions-menu').should('not.exist')
    })
  })

  it('removes pending commands if the page is reloaded', () => {
    launchStudio()

    incrementCounter(0)

    cy.get('.cm-line').should('contain.text', `cy.get('#increment').click();`)

    cy.window().then((win) => {
      // calling cy.reload() or win.location.reload() confuses the test runner
      // and causes it to go to the spec list of the main runner instead of reloading the inner runner,

Review comment (suggestion):
```suggestion
      // click outside the menu
```

Code after:
        cy.get('h1').realClick({
          button: 'right',
        })

        cy.get('.__cypress-studio-assertions-menu').shadow()
        .find('.assertions-menu').should('be.visible')

        // Show submenu
        cy.get('.__cypress-studio-assertions-menu').shadow()
        .find('.assertion-type-text:first').realHover()

        cy.get('.__cypress-studio-assertions-menu').shadow()
        .find('.assertion-option')
        .should('have.text', 'Hello, Studio!')
        .should('be.visible')

        autAssertions?.()
      })
    }

    const showAssertionsMenuForModal = (autAssertions?: () => void) => {
      launchStudio({ specName: 'spec-w-modal.cy.js' })

      cy.waitForSpecToFinish()

      cy.contains('No commands were issued in this test.').should('not.exist')

      cy.getAutIframe().within(() => {
        // Show menu
        cy.get('.modal-body').realClick({
          button: 'right',
        })

        cy.get('.__cypress-studio-assertions-menu').shadow()
        .find('.assertions-menu').should('be.visible')

        // Show submenu
        cy.get('.__cypress-studio-assertions-menu').shadow()
        .find('.assertion-type-text:first').realHover()

        cy.get('.__cypress-studio-assertions-menu').shadow()
        .find('.assertion-option')
        .should('have.text', 'Semi-transparent background overlay')
        .should('be.visible')

        autAssertions?.()
      })
    }

    const assertionsMenuFns = [
      { fn: showAssertionsMenu, name: 'handles normal element' },