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

Question

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

实际结果：

预期结果： 能够在文本框中输入值。

添加下面的柏树片段，

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

Answer 1

错误消息表明您正在尝试 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')
  })

Answer 2

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

<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 选项的情况下工作。