Debugging UI Tests written with Testcafe

Question

UPDATE:

Regarding to another(hammerhead) bug we were forced to use minified code in testcafe test. Since this bug is resolved we're now able to run the tests against non minified code.

But still, we have the problem that source maps get removed by testcafe. When we run the webpack dev server normally we see all the source maps and are able do set breakpoints and debug the application code.

Nevertheless during tests source maps are not available any more. You can see the attached screenshots showing the 2 cases.

Are we doing something wrong here?

Image without Testcafe

Image with testcafe

---

We are using Testcafe + Webpack + Vue.js for our project. I know that it is possible to debug the test code either by t.debug() directive or --inspect flag of node.js.

However, I can only see the production code (build.js) which is obfuscated and not really debuggable. I wonder if it is possible to have a configuration so that the testcafe does not use the bundled code but rather the original source code (probably with sourcemaps?). I am using source-map as the devtool option in webpack.

I am aware that the UI tests should test the production code but it would be nice to have such a configuration while developing. Any ideas?

Communist

Hi, Do you mean you'd like to debug the code of your application during test run? – Zanazander

@AlexanderMos yes, I can see the bundle.js but not the seperate modules. It would be convenient to see the seperate modules and put breakpoints there. – Communist

I suppose it should be configured in your project. TestCafe just opens a page by the provided url. So, you need to build the project in the development mode without script minimization before running tests. – Zanazander

Answer 1

Testcafe drops source maps declarations from client scripts. Unfortunately, now you cannot debug client scripts using source maps mechanism. I've created the proposal for this. You can track this issue on Github to be aware of progress.

Unpolitic