Today marks the beginning of my journey into posting on this platform, and I am eager to get it right.
In my current project using Cypress for writing integration tests, I encountered a challenge while attempting to click on an Ace editor widget within a React application. The widget is nested inside a span element with a class attribute like "ace_fold-widget ace_start ace_open". Manually clicking on the widget changes the class to "ace_fold-widget ace_start ace_closed".
Despite multiple attempts to interact with the element in different ways, I have not been able to trigger the desired response from it. This issue seems unique as I couldn't find any helpful solutions online.
Various methods were tried:
cy.get('Ace widget element').click() (force option tested as well)
cy.get('Ace widget element').invoke('have.class', 'ace_fold-widget ace_start ace_closed').trigger('change')
cy.get('Ace widget element').trigger('mousedown')
cy.get('Ace widget element').trigger('click')
cy.get('Ace widget element').trigger('changeFold') (identified changeFold as the relevant event)
Additionally, plain JS was also utilized:
cy.get('Ace widget element').then(function($input) {
$input[0].setAttribute('test', 'my new value')
})
.should('have.attr', 'test', 'my new value')
Please note that 'Ace widget element' is merely an example placeholder. The correct locator is used in practice.
The observed behavior included the element visually appearing folded with the arrow image, along with the alteration in class attributes; however, the rows did not actually fold. Even after trying to chain various triggers, no successful outcome was achieved. Subsequently, the element reverted back to its initial state.
Attempts to interact with the parent element or trigger its 'changeFold' event had equally futile results.
The structure of the DOM is depicted below:
Your assistance in resolving this matter would be greatly appreciated.