Timed out retrying: cy.type() failed because this element is not visible. has CSS property: position: fixed and it's being covered by another element:

user_16230000 0
Viewed 4137

Unable to find the textbox element in a new pop-up window.

Actual Result:

Throws exception

Expected Result: Able to type value in the text box.

Adding the cypress snippet below,

 it("Add business test",function(){         
   cy.xpath("//a[contains(.,'1099/W-2')]").click({force:true});
   cy.wait(5000); 
   cy.get(':nth-child(2) > .btn-hover-shrink > .v-btn__content').click({force: true});
   cy.contains('Start Now').click({force:true});
   //Add business pop-up open
   cy.contains('Business Name').click({force: true}).type("Test LLC");
})
cypress vue.js
3 Answers

You can add {force: true} with type() to disable error checking -

cy.get('[id*="input-"]').type("Test LLC", {force: true});
user_45712710

The error message indicates that you are trying to type() into the label. That's because cy.contains('sometext') selects the element "owning" the text, which is the label, but you can also select a parent by using the pattern cy.contains(<parentSelector>, 'sometext')

Take a look at the page DOM, if you have a common parent of the <label> and the <textarea> (or <input>), like this

<div>
  <label>Business Name</label>
  <input />
</div>

you can target that parent in the .contains()

cy.contains('div', 'Business Name')
  .find('input')           // drill down to the element receiving the text
  .should('be.visible')    // since there's a toolbar in the mix, wait for visibility
  .type('Test LLC')

An alternative might be to use .closest()

cy.contains('Business Name')  // gives you the label
  .closest('input')           // nearby element receiving the text
  .should('be.visible')       // wait for visibility
  .type('Test LLC')

Here's one more way, making use of the label's "for" attribute

cy.contains('Business Name')  // gives you the label
  .invoke('attr', 'for')      // which id is it for?
  .then(id => {
    cy.get('#' + id)          // get the actionable element
      .should('be.visible')   // wait for visibility
      .type('Test LLC')
  })
user_47162450

Taking a look at the Vuetify form component here which has a similar HTML to yours

<div class="v-text-field__slot">
  <label for="input-6" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Last name</label>
  <input required="required" id="input-6" type="text">
</div>

the same test code you have succeeds on the sample code

cy.contains('Last name')  
  .click({force: true})
  .type("Test LLC");        // text appears in the input

but if I simulate the covering toolbar, it fails with the same error you have.

Adding .type("Test LLC", {force: true}) also fails with a different error

cy.contains('Last name')  
  .click({force: true})
  .type("Test LLC", {force: true});

cy.type() failed because it requires a valid typeable element.

Using the parent contains to find the "typeable element" and applying force: true option works

cy.contains('div', 'Business Name')
  .find('input')          
  .should('be.visible')
  .type("Test LLC", {force: true})

This assumes the toolbar remains static and does not animate away, in which case it would work without the force: true option.

Admin1
Related