23

Context: I have an acceptance test for my ember-cli application, and the test passes just fine in Chrome. However, in phantomjs, my test fails -- the UI doesn't get created the same way, and I'm trying to work out why. (I think the test is broken because of https://github.com/ember-cli/ember-cli/issues/1763, but the general question of how to debug remains)

In Chrome, I can use the standard debugging tools on my tests and all is well -- but in phantomjs, I can't get at it with a debugger. I also don't see console.log() messages show up in the output -- all I get is a list of test results in my terminal window.

I can sort-of get diagnostic info by writing things like

equal(true, false, "This is a log message");

and then I get the message as details for the assertion that failed, or I can try and work out what's in the DOM with

equal(true, false, document.getElementsByClassName("my-class".innerHTML);

but both of those a:stop the test going any further, and b:only let me log information from the test itself, not my application.

Is there a way to run my tests outside of "ember test", or some way to attach to the running test processes? Alternatively, is there a way to get console.log() messages to show up in the output?

Dan Mitchell
  • 715
  • 1
  • 7
  • 13

4 Answers4

12

You can expose PhantomJS debug port and open it in browser then you can interact with context at your debugger breakpoints.

Debugging tests on PhantomJS using Testem test runner

Pooyan Khosravi
  • 4,861
  • 1
  • 19
  • 20
  • 5
    When I tried that, I could attach to the phantomjs process okay, but then something weird happened where it looks as if ember is jumping in and trying to catch exceptions which gets in the way of the debugger. That said, it did remind me that I should be using "ember test --server", and from there I get all the console logs showing up in the testem window, which is a big big step in the right direction. Thanks! – Dan Mitchell Jan 27 '15 at 22:40
9

In testem.json add "phantomjs_debug_port": 9000.

While you run your tests visit http://localhost:9000 in your browser and click the long link that shows up.

Source: cssugared

Nelu
  • 16,644
  • 10
  • 80
  • 88
  • 1
    If you hit any issues with this, make sure something else on your machine isn't using port 9000 for something else – Adam Knights Sep 19 '16 at 12:55
  • a warning for anyone reading this in 2017. the inspector that is exposed on port 9000 is extremely unstable and unusable for its intended purpose. tried different ports but it made no difference. – Christopher Milne Feb 27 '17 at 19:59
7

I had no luck with the other answers, so here's what I found out:

Add a return pauseTest(); at the point in your test where you want to be able to interact with the container in the browser. This is in the docs but I'm not sure it's in the guides.

aceofspades
  • 7,568
  • 1
  • 35
  • 48
0

To answer the part of my original question about "how do I get log messages to show up", if I use the TAP reporter, then console.log (in my app and in my tests) messages show up in the output; the xunit reporter doesn't pass console.log on, which was confusing me.

(I've also hit issues where running the tests on teamcity behaves differently than running locally; in that situation, combining the TAP reporter with https://github.com/aghassemi/tap-xunit (or the TAP teamcity plugin) lets me get log messages and also test counts)

Dan Mitchell
  • 715
  • 1
  • 7
  • 13