Vue - Using forEach or array.find does not work

[anon48625188]

In my test, I want to iterate over my Vue state. When I debug my code in chrome I can let quotes get defines as an array with a length of 8, but when I try a find or forEach function the iterator (quote in my case) stays undefined.

Is there something I'm missing or is it just not possible to use these functions in testCafe?

Thnx

let signCmp = await quotePage.step5.signCmp.getVue()
await t
let quoteId = signCmp.props.quote.id
await t
.click(quotePage.step5.nextButton)
await t
.click(navigationPage.menu.quote.mainItem)
.click(navigationPage.menu.quote.subItems.waiting)
let listOpenCmp = await quotePage.waiting.listOpenCmp.getVue()
await t
let quotes = listOpenCmp.computed.quotes
quotes.forEach((item) => {
console.log(item)
})

[miherlosev]

Hi @idmick

Could you please provide us the execution result of the following instructions:

• console.log(listOpenCmp.computed.quotes.toString())
• console.log(listOpenCmp.computed.quotes instanceof Array)

[anon48625188]

Thnx for your reply. The result of the execution is as follows:

[anon48625188]

I have it working using an 'old' for loop
for (var i = 0; i < array.length; i++)


But forEach and other es6 function won't work. So I think the test might not understand es6..? Is there something I need to configure? I understood that testcafe supported es6.

[miherlosev]

I have it working using an 'old' for loop

Glad to hear this.
This behavior looks like a bug. I will perform an additional investigation.

[anon48625188]

Alright, let me know I can be of any further assistance :).

[miherlosev]

Cannot reproduce the problem with testcafe@0.19.2.

Internally, testcafe-vue-selectors uses a ClientFunction with custom method getVue.
I've created a simple example related to your scenario:

import { Selector } from 'testcafe';

fixture `Fixture`;

test('test', async t => {
    const extendedSelector = Selector('body').addCustomMethods({
        method: () => {
            var complexObject = {
                prop1: {
                    prop2: [
                        { id: 1, data: '1' },
                        { id: 2, data: '2' },
                        { id: 3, data: '3' }
                    ]
                }
            };

            return complexObject;
        }
    });

    const fnResult = await extendedSelector().method();
    const prop2    = fnResult.prop1.prop2;

    prop2.forEach(item => console.log(item));
});

and it works good.

Could you please provide an example on which I can reproduce the problem?