如何在选择器 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>

测试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)

但是如果我尝试使用 div 的结果作为 console.log 中的变量，我不再得到“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] 被打印到控制台。

我想要做的是使用 select 或 select 元素中的项目数，例如：

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 不是数字，所以我收到了消息

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

是否可以使用找到的元素数量作为下一个 selector 的变量？

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

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

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

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

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

How to use result of .length in selector Cypress

jquery-selectors

cypress