重试超时：cy.type() 失败，因为此元素不可见。具有 CSS 属性： position: fixed 并且它被另一个元素覆盖：答案

【问题标题】：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:重试超时：cy.type() 失败，因为此元素不可见。具有 CSS 属性： position: fixed 并且它被另一个元素覆盖：
【发布时间】：2021-06-15 15:20:19
【问题描述】：

无法在新的弹出窗口中找到文本框元素。

实际结果：

预期结果：可以在文本框中输入值。

在下面添加cypress sn -p，

 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");
})

【问题讨论】：

标签： vue.js cypress

【解决方案1】：

您可以添加 {force: true} 和 type() 以禁用错误检查 -

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

【讨论】：

我使用了相同的代码 - cy.contains('Business Name').click({force: true}).type("Test LLC", {force: true}); 它抛出异常 - cy.type() 失败，因为它需要一个有效的可键入元素。。我更改了代码 - @ 987654325@。有效，值是geeting类型。但是id值ig经常更改。
您可以将定位器更改为类似cy.get('[id*="input-"]')。
但是所有的文本框都有id = input-

【解决方案2】：

错误消息表明您正在尝试将type() 放入标签中。这是因为cy.contains('sometext') 选择了“拥有”文本的元素，即标签，但您也可以使用模式cy.contains(<parentSelector>, 'sometext') 选择父元素

查看页面 DOM，如果您有 <label> 和 <textarea>（或 <input>）的共同父级，像这样

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

您可以在.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')

另一种可能是使用.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')

这是另一种方法，利用标签的“for”属性

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')
  })

【讨论】：

谢谢。使用“for”属性的第三个解决方案我们能够输入值并且我们在类型中给出了 {force: true}。

【解决方案3】：

查看 Vuetify 表单组件 here，它的 HTML 与您的相似

<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>

您在示例代码上成功的相同测试代码

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

但如果我模拟覆盖工具栏，它会失败并出现与您相同的错误。

添加 .type("Test LLC", {force: true}) 也会失败并出现不同的错误

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

cy.type() 失败，因为它需要一个有效的可类型元素。

使用父包含查找“可键入元素”并应用force: true 选项有效

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

这假定工具栏保持静态并且不会动画消失，在这种情况下，它可以在没有 force: true 选项的情况下工作。

【讨论】：