Support component loaded via vue-loader

[miherlosev]

It components are loaded via vue-loader then window doesn't contains Vue property. Need to investigate how vue-loader performs component loading.

[fiws]

Is there a workaround for this? I tried setting window.Vue = Vue;, now nothing works – i cannot even select by id :\

[miherlosev]

So far, we couldn't come up with a workaround for this. If your application uses vue-loader, don't use the testcafe-selector-extentions plugin. Instead, use build-in TestCafe selectors.

[das-mensch]

I was facing the same problem. A little workaround could be (using testcafe):

const setFakeVue = ClientFunction(() => {
    window.Vue = {version: "2.2.6"};
});

fixture `Home`.page('url').beforeEach(async t => {
    await setFakeVue();
});

[Ranmus]

@fiws You cannot assign Vue imported in test (server side) to variable via function executed on client side. @das-mensch gave the best solution at the moment. Alternatively you can statically import Vue in your application by adding script tag and linking to some cdn. Or add dynamically script tag with Vue via client function.

[miherlosev]

@fiws @das-mensch @Ranmus testcafe-vue-selectors@2.1.0

[leonardovilarinho]

Is this solution still working?

I'm using the webpack-simple template. I'm testing but not finding the elements within App. See the error and code:

[miherlosev]

Hi @leonardovilarinho. I can not reproduce the problem on my side. Make sure your application is running in development mode. If it is true, then could you attach to issue the full code of your application?

[leonardovilarinho]

Hi @miherlosev, I found my error!

The Vue documentation suggests use the camel case to declare the component names. For example: List; ListItem.

But in the testcafe-vue-selector code there is a transformation filter for lowercase in the tags. Resulting in: list; listitem.

Then search the testcafe for "list" and do not find the element, because "l" is in lowercase.

I'll take you in the PR (#35). Now, the plugin allows the camel case format and suit components names.