error element not visible because its ancestor has position: fixed CSS property and it is overflowed by other element

user_15647985 0
Viewed 895

enter image description herei am trying to click on the icon trash

<div class="form-body">
  <div class="infos">
    <div class="recap">
      <div class="form-actions ">
        <a class="btn btn-light btn-icon btn-icon-light" title="download" href=""
          target="_blank" rel="noreferrer noopener" download="my_file">
          <i class="icon-download"></i>
        </a>
        <button type="button" class="btn btn-light btn-icon btn-icon-light" title="delete">
          <i class="icon-trash">

i have tried

cy.get('i.icon-trash').click()
cy.get(.form-actions .icon-trash').click()

Whatever i am trying i am getting the error:

The element <i.icon-trash> is not visible because its ancestor has position: fixed CSS property and it is overflowed by other elements. How about scrolling to the element with cy.scrollIntoView()?

Fix this problem, or use {force: true} to disable error checking.

scrollIntoView() also is not working. Does anyone know why this error is happening please?

Thank you screenshot of the html part above

cypress
1 Answers

The button parent of the icon has the click handler, try clicking that

cy.get('i.icon-trash')
  .parent()
  .scrollIntoView()     
  .should('be.visible')   // for good measure, may not require
  .click()

but I suspect the problem still persists.

Also try realClick()

cy.get('i.icon-trash')
  .parent()
  .scrollIntoView()     
  .should('be.visible')   
  .realClick({ position: "topLeft" })  // try various click positions

You can also try setting a larger viewport at the top of the test.

Other than that try working the CSS - but this is a bit of a hack.

Arguably it's ok because you are testing the click logic not the visibility of the icon (also true for .click({force:true})).

Identify the element with position: fixed for example if it's div.form-actions

cy.get('div.form-actions')
  .then($formActions => {
    $formActions.css({ position: 'relative' })
  })
user_169977070
Related