How to use result of .length in selector Cypress

Question

I'm trying to perform an action based on the results of an earlier assertion. I have the following situation, I want to determine the number of versions for a document, this is represented in the follwing 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>

Each element with test id data-testhook-id="version-xxx" is a line containing version information and its these div elements I want to count. for this I have set up the following:

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

Now if I add the following assertion, this passes without any problem

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

But if I try to use the outcome of the number of div's found as a variable in a console.log I no longer get '4' but [object, Object]. Tried this by:

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

Which results in foo [object Object] being printed to the console.

What I want to do is use the number of items in a selector to select an element, like:

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

But as the var is not a number I get the 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])

Is it possible to use the number of elements found as a variable for a next selector?

Answer 1

Try this:

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

You cannot assign or work with the return values of any Cypress command. Commands are enqueued and run asynchronously. What commands really return are Chainable<typeOfValueYouWant>, in another words, it's kind of queue object which resolves with desired value. Read more here

BTW: I think you should consider change your approach for selecting elements. Read more here.

For those who are using Typescript - I wrote plugin for tslint which prevents making this mistake: https://github.com/krzysztof-grzybek/tslint-plugin-cypress