Can not select <router-view> component

I’m trying to test certain parts of my applications computed properties such as locale or form validation results which are contained on the component loaded into the <router-view> component

You can see in the screenshot

https://imgur.com/PswNqQi/

my default route view loads up my welcome component, using VueSelector() how do I actually select this component to access the state/prop/ computed data.

If i do

const root = VueSelector() const rootVue = await root.getVue()

This selects the <QLayout> component

If I do

const welcome = VueSelector(‘welcome’) const welcomeVue = await welcome.getVue()

I get a

node.vue undefined

I’ve tried passing all sorts of combinations into VueSelector like

VueSelector(‘q-layout welcome’) VueSelector(‘router-view’) VueSelector(‘q-layout router-view’) VueSelector(‘router-view welcome’)

None of which actually select the component served from the route. I can however select any component nested within welcome such as the Login component like

const login = VueSelector(‘login’) const loginVue = await login.getVue()

await t .expect(loginVue.computed.isAuthenticated).eql(false) .expect(loginVue.props.facebook).eql(true)

Any help is really appreciated because otherwise I can’t test alot of data on any components server from the router

[miherlosev]

Yes. You can do it using a ClientFunction feature. I’ve created an example

import { Selector, ClientFunction } from 'testcafe';

fixture `Vue properties`
	.page('http://localhost:8080/test/data/');
	
test('get Vue specific properties', async t => {
	const node = Selector('#app');
	
    const getVueProperties = ClientFunction(() => {
		function getData (instance, prop) {
            const result = {};

            Object.keys(prop).forEach(key => {
                result[key] = instance[key];
            });


            return result;
        }
		
		 function getProps (instance) {
            return getData(instance, instance.$options.props || {});
        }

        function getState (instance) {
            const props   = instance._props || instance.$options.props;
            const getters = instance.$options.vuex && instance.$options.vuex.getters;
            const result  = {};

            Object.keys(instance._data)
                .filter(key => !(props && key in props) && !(getters && key in getters))
                .forEach(key => {
                    result[key] = instance._data[key];
                });

            return result;
        }

        function getComputed (instance) {
            return getData(instance, instance.$options.computed || {});
        }
		
		var nodeVue = node().__vue__;
		
		if (!nodeVue)
            return null;
		
		var props    = getProps(nodeVue);
        var state    = getState(nodeVue);
        var computed = getComputed(nodeVue);
		
		return {
			props: props,
			state: state,
			computed: computed
		};
	}, { dependencies: { node } });	
	
	const vueProperties = await getVueProperties();
	
	console.log(vueProperties);
});	

[nshCore]

is there a way to access vue computed properties with the default selectors?