search

DevExpress / testcafe-vue-selectors

TestCafe selector extensions for Vue.js apps.
https://testcafe.io
MIT License
103 stars 18 forks source link

Selector returns wrong DOM node if component doesn't render a real DOM elements #20

Closed miherlosev closed 1 year ago

miherlosev commented 7 years ago

Markup for reproduce:

<html>
    <head>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id='root'>
            <App></App>
        </div>
        <script>
           Vue.component('total-value', {  
               props: ['formatProperty'],
               template: '<div>{{ formatProperty }}</div>' 
           });
           Vue.component('Hello', { template: '<total-value formatProperty="%d"></total-value>' });
           Vue.component('App', { template: '<Hello></Hello>' });

           new Vue({ el: '#root' });
        </script>
    </body>
</html>

Test for reproduce:

import VueSelector from "testcafe-vue-selectors";

fixture `https://stackoverflow.com/questions/44585727/testcafe-vue-selectors-cant-grab-vue-component`
    .page('http://localhost:8080');

test('test', async t => {
    const totalValue = VueSelector("total-value");

    await t.expect(totalValue.getVue(({ props }) => props.formatProperty)).eql('%d');
});
blainehansen commented 6 years ago

It seems to me that it might be a good idea to just directly use some of the vue-devtools methods to do the work of finding nodes. I'm comparing their code to this plugin's and it seems that could be causing some of these problems.

blainehansen commented 6 years ago

I feel that I could help in solving some of these bugs, but you'll have to help me understand how to work with and debug a testcafe plugin.

I've copied the index.js of this plugin to my directory and made some exploratory changes, but it seems that my console.log calls and other attempts at actually understanding what's going on inside are being interfered with by the testing framework (or something)

I import the local source code into my fixture file

import { Selector } from 'testcafe'
// import VueSelector from 'testcafe-vue-selectors'
import VueSelector from './plugin'

fixture('Getting Started')
  .page('http://localhost:8080')
// ...

But the code I've added, such as this, isn't output to the console.

// ...
}).addCustomMethods({
    getVue: (node, fn) => {
        console.log(node)
// ...

How do I go about actually debugging a testcafe selector plugin?

blainehansen commented 6 years ago

And my attempt at using the node debugger didn't work:

node inspect ./node_modules/testcafe -- 'chrome:headless' test/end-to-end/*.spec.js --app 'npm run dev' --app-init-delay 12000

I would love to help solve these problems. It's hard to work with a black box though ha.

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had any activity for a long period. It will be closed and archived if no further activity occurs. However, we may return to this issue in the future. If it still affects you or you have any additional information regarding it, please leave a comment and we will keep it open.

github-actions[bot] commented 1 year ago

We're closing this issue after a prolonged period of inactivity. If it still affects you, please add a comment to this issue with up-to-date information. Thank you.