How to get full stack trace in Test Cafe errors

Question

I have been using Test Cafe to write an internal test framework where actions (t.click) and assertions (t.expect) are not directly written inside the spec, but are defined and aggregated in other files.

Everything cool until a test does not fail: in this case the Test Cafe reporter writes in console the assertion/action failed and the relative snippet of code, but I did not find the way to understand the full stack trace of function calls from my test down to the failed assertions.

How can I make sure to provide a full stack trace in the reporter, logging a stack trace with all the calls to function that made my test fail?

I understood that the reason should be linked to how async/await is transpiled into generators: the stack trace of the error shows only the last await executed and not all the previous calls.

<section> ... </section>
<section class="section--modifier">
  <h1> ... </h1>
  <div>
    ...
    <button class="section__button">
      <div class="button__label">
        <span class="label__text">Hello!</span> <-- Target of my test
      </div>
    </button>
    ...
  </div>
</section>
<section> ... </section>

// 
// My spec file
//
import { Selector } from 'testcafe';

import {
  verifyButtonColor
} from './button';

fixture`My Fixture`
  .page`....`;

test('Test my section', async (t) => {
  const MySection = Selector('.section--modifier');
  const MyButton1 = MySection.find('.section__button');

  const MySection2 = Selector('.section--modifier2');
  const MyButton2 = MySection2.find('.section__button');

  ....
  await verifyButtonColor(t, MyButton1, 'green'); // it will fail!
  ....
  ....
  ....
  await verifyButtonColor(t, MyButton2, 'green');
});

//
// Definition of assertion verifyButtonColor (button.js)
//
import { Selector } from 'testcafe';

import {
  verifyLabelColor
} from './label';

export async function verifyButtonColor(t, node, expectedColor) {
   const MyLabel = node.find('.button__label');
   await verifyLabelColor(t, MyLabel, expectedColor);
}

// 
// Definition of assertion verifyLabelColor (label.js)
//
export async function verifyLabelColor(t, node, expectedColor) {
   const MyText= node.find('.label__text');
   const color = await MyText.getStyleProperty('color');

   await t.expect(color).eql(expectedColor, `Color should be ${expectedColor}, found ${color}`); // <-- it will FAIL!
}

What I get not in the reporter is that my test failed because the assertion defined in "verifyLabelColor" failed (the color is not green :(),

...
await t.expect(color).eql(expectedColor, `Color should be ${expectedColor}, found ${color}`);
...

but in the reporter I have no evidence that failed due to the following stack of calls

- await verifyButtonColor(t, MyButton1, 'green');
- await verifyLabelColor(t, MyLabel, expectedColor);
- await t.expect(color).eql(expectedColor, `Color should be ${expectedColor}, found ${color}`);

Any body faced a similar problem?

An alternative could be to log the "path" of the selector that caused the failure, but looking to Test Cafe documentation I did not find the possibility to do it: knowing that the assertion failed on element with the path below could at least help to understand what went wrong

.section--modifier .section__button .button__label .label__text

Answer 1

This subject is related to TestCafe proposal : Have a multiple stacktrace reporter for fast analysis when a test fails

In the meantime you could give a try to this reporter: /testcafe-reporter-cucumber-json or maybe you could develop your own reporter