Question

我有一个DOM树，想使用cypress进行端到端测试。

<div class="this-is-an-array">
  <div class="array-item-element">
    ...
  </div>
  <div class="array-item-element">
    <div class="very">
      <div class="deep">
        <div class="child">
          <div class="element">
            Expected Content
          </div>
        </div>
      </div>
    </div>
    <div class="another">
      <div class="component">
        <div class="dom">
          <div class="tree">
            <button>ButtonToClick</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="array-item-element">
    ...
  </div>
</div>

我想通过声明一个子组件来过滤期望的项目，然后通过如下可能的代码单击另一个子按钮：

cy.get('.this-is-an-array') // get the root node of array
  .find('.array-item-element') // looping over all items
  .should(($el) => {
    // the very deep child element should contain text of 'Expected Content'
  })
  .get('.another .component .dom .tree button')
  .click()

如何编写should子句来实现这一目标？

Answer 1

在不完全了解您要做什么的情况下，我认为您需要的是cy.within()：

cy.get(`.this-is-an-array`)
    .find(`.array-item-element`).then( $elems => {
        $elems.each((idx, elem) => {
            cy.wrap(elem)
                .should(elem => {
                    // assert on child element
                })
                // ensure all subsequent DOM commands are scoped within
                //  the wrapped DOM elem
                .within(() => {
                    cy.get(`.another .component .dom .tree button`)
                        .click();
                });
        });
    });

如何通过对深层子div内容的断言进行过滤，但产生原始元素？

1 个答案: