0

below is the response error from running cypress.

Timed out retrying after 4000ms: cy.type() failed because this element:

<input autocomplete="new-password" class="form-control" data-val="true" data-val-           required="The User Name field is required." id="myform" name="UserName" placeholder="Enter username" required="required" type="text" value="">

is being covered by another element:

<div class="form-group">...</div>

I have tried to use below but still error.

cy.get('input[name="UserName"]').click({ force: true }).type('your-username')
cy.get('input[name="UserName"]').focus().type('your-username')

would like to can type('your-username'). could someone help me with this thank you so much.

Codemaker2015
  • 12,190
  • 6
  • 97
  • 81
Zack
  • 1

2 Answers2

1

The error message is indicating cy.type() failed. If you look further in the message, it will tell you to use {force:true} option on that command.

But you have only used it on the click. The following should work:

cy.get('input[name="UserName"]').type('your-username', {force:true})

You will not have to click or focus, Cypress already does that.

But you should try to pass the test without forcing, perhaps this is better (depends on the app)

cy.get('input[name="UserName"]')
  .should('be.visible')
  .type('your-username')
Aladin Spaz
  • 327
  • 6
-1

The error you're facing indicates that the element you're trying to type into (cy.type()) is being covered by another element, ..., which prevents accessing it and performing the desired action.

To fix this issue, you can follow some possible steps:

1-Ensure the presence of the covering element and precisely identify its location on the web page. You may have another element that overlaps with the element and obscures it. You can use browser developer tools (DevTools) to inspect the elements and confirm this.

2-Make modifications to the element's styling using CSS to ensure that the element is not covered and is properly visible. You can try increasing the width or height of the element to ensure it is not hidden or covered.

3-Verify the order and sequence of elements on the web page. Perhaps you can change the order of elements or the page structure so that the element is displayed correctly without conflicting with the other element.

4-If you are unable to modify the design or arrangement, you can try using mouse control or scrolling to the covering element and directly clicking on it using Cypress. You can use code like the following to access the element and click on it:

cy.get('.form-group').click();

Modify the selector .form-group based on the exact element you're trying to access.

Rana
  • 1
  • 3