如何在选择器 Cypress 中使用 .length 的结果

Question

我正在尝试根据先前断言的结果执行操作。我有以下情况，我想确定文档的版本数，这在以下 html 中表示：

<ul data-testhook-id="accordion-body">
    <li data-testhook-id="accordion-body-item">
            <div>
                    <div data-testhook-id="version-1">
                        <div data-testhook-id="avatar">
                            <div data-id="tooltip">John Doe</div>
                            </div>
                        </div>
                        <span data-testhook-id="content">1. 17-08-2018 at 15:26</span>
                    </div>
                    <div data-testhook-id="version-2">
                        <div data-testhook-id="avatar">
                            <div data-id="tooltip">John Doe</div>
                            </div>
                        </div>
                        <span data-testhook-id="content">2. 20-08-2018 at 13:05</span>
                    </div>
                    <div data-testhook-id="version-3">
                        <div data-testhook-id="avatar">
                            <div data-id="tooltip">Jane Doe</div>
                            </div>
                        </div>
                        <span data-testhook-id="content">3. 20-08-2018 at 13:11</span>
                    </div>
                     <div data-testhook-id="version-4">
                        <div data-testhook-id="avatar">
                            <div data-id="tooltip">No Body</div>
                            </div>
                        </div>
                        <span data-testhook-id="content">4. 21-08-2018 at 13:11</span>
                    </div>
                    <svg width="12" height="12" data-testhook-id="icon-active-version"><path d="path-here"></path></svg>
                    </div>
            </div>
    </li>

每个带有 test id 的元素data-testhook-id="version-xxx"都是一行，其中包含版本信息及其我想要计算的这些 div 元素。为此，我设置了以下内容：

cy.get('[data-testhook-id="accordion-body-item"] > div > div').its('length').as('versions')

现在，如果我添加以下断言，这将毫无问题地通过

cy.get('@versions').should('equal', 4)

但是，如果我尝试使用在 console.log 中找到的 div 数量的结果作为变量，我不再得到“4”而是 [object, Object]。试过这个：

var size = cy.get('[data-testhook-id="asset-versions"] [data-testhook-id="accordion-body-item"] > div > div').its('length')
console.log('foo ' + size)

这导致foo [object Object]被打印到控制台。

我想要做的是使用选择器中的项目数来选择一个元素，例如：

cy.get('[data-testhook-id="accordion-body-item"] > div > div:nth-child(' + size + ')').find('svg').should('have.attr', 'data-testhook-id', 'icon-active-version')

但由于 var 不是数字，我得到了 msg

Error: Syntax error, unrecognized expression: :nth-child
[data-testhook-id="asset-versions"] [data-testhook-id="accordion-body-item"] > div > div:nth-child([object Object])

是否可以将找到的元素数量用作下一个选择器的变量？

Answer 1

尝试这个：

cy.get('[data-testhook-id="accordion-body-item"] > div > div').its('length').then((size) => {
   cy.get('[data-testhook-id="accordion-body-item"] > div > div:nth-child(' + size + ')').find('svg').should('have.attr', 'data-testhook-id', 'icon-active-version')
});

您不能分配或使用任何赛普拉斯命令的返回值。命令被排队并异步运行。什么命令真正返回的是Chainable<typeOfValueYouWant>，换句话说，它是一种用所需值解析的队列对象。在这里阅读更多

顺便说一句：我认为您应该考虑改变选择元素的方法。在这里阅读更多。

对于那些使用 Typescript 的人 - 我为 tslint 编写了插件以防止犯这个错误：https : //github.com/krzysztof-grzybek/tslint-plugin-cypress