当“`find(.).shadow`不是函数”时，如何使用柏树在嵌套的阴影王国中定位dom元素

Question

我正在使用Cypress v9.6.1和自定义元素的影子多姆。我们有几个深嵌套的自定义元素--我能够查询一个与几个web组件紧密嵌套的输入，并成功地使用如下所示的内容：

// WORKS!
cy.get(‘custom-element-1’)
    .shadow()
    .find('custom-element-2’)
    .shadow()
    .find('custom-element-3’)
    .shadow()
    .find(`custom-element-4[id=“ce”4]`)
    .shadow()
    .find('input');

我想做的是在测试进行之前确定输入是否存在。

Pseudo code - 
if (cy.('.deeply-nested-element').exists() ){
  do.not.click(button-a)
} else {
  click(button-a)
}

在conditional testing -> element presence的cypress文档之后，我尝试用一个条件来表示上面的内容，并使用length属性来确定是否存在。

//DOES NOT WORK
cy.get(‘custom-element-1').then(($ce) => {
    if($ce.shadow()
    .find('custom-element-2’)
    .shadow()
    .find('custom-element-3’)
    .shadow()
    .find(`custom-element-4[id=“ce”4]`)
    .shadow()
    .find('input')) // then do something
}

这给了我一个错误。Property 'shadow' does not exist on type 'JQuery<HTMLElement>'. Did you mean 'show'?ts(2551)

忽略ts错误会导致使用：$ce.find(...).shadow is not a function进行柏树测试失败

我用链子把阴影()串起来，得到了同样的结果。

//ALSO DOES NOT WORK
cy.get(‘custom-element-1').shadow().then(($ceshadow) => {
    $ce
    .find('custom-element-2’)
    .shadow()
    .find('custom-element-3’)
    .shadow()
    .find(`custom-element-4[id=“ce”4]`)
    .shadow()
    .find('input');
}

对于这个：$ce.find(...).shadow is not a function

在我看来，get方法的承诺不会传递给回调--一个带有影子dom (JQuery)的元素。我想解决的小问题就是解决这个问题。更大的问题是如何设置一个条件，该条件是由一个元素的存在决定的，该元素深深嵌套在自定义元素阴影中。如有任何建议，将不胜感激。

Answer 1

.shadow()命令是Cypress命令，但$ce是不能直接调用Cypress命令的jQuery对象。

$ce.find(...).shadow is not a function发生是因为jQuery和Cypress都有.find()，但是只有Cypress有.shadow()。

通过将includeShadowDom:true设置为全局配置或测试选项，可以使用Cypress命令，而无需在每一步都链接.shadow()。

如果是有条件的custom-element-1，这应该可以工作

it('tests deeply-nested shadow elements', {includeShadowDom:true}, () => {

  cy.get('body').then($body => {

    const ce1 = $body.find('custom-element-1');
    if (ce1.length) {

      cy.wrap(ce1)                 // wrap jQuery element into Cypress result
                                   // so that includeShadowDom:true is effective
        .find('custom-element-2')
        .find('custom-element-3')
        .find('custom-element-4[id="ce4"]')
        .find('input')) 
    }
  })
})