Testcafe: Get innerHTLM of a <div> or <span> tag.

[jesperalmstrom]

Are you requesting a feature or reporting a bug?

Bug?

What is the current behavior?

Trying to get the innerHTLM and pass it as a message to notOk

const el1 = await Selector('#errorArea');
const errorMessage = ClientFunction(() => document.getElementById('errorMessage').innerHTML);
await t.expect(el1.visible).notOk('Error visible: ' + errorMessage);

The printout is the following:

1) AssertionError: Error visible: function __$$clientFunction$$() {
      var testRun = builder.getBoundTestRun() ||
      _testRunTracker2.default.resolveContextTestRun();
      var callsite = (0,
      _getCallsite.getCallsiteForMethod)(builder.callsiteNames.execution);
      var args = [];
...

I have also tried to do

const errorMessage = el1.filter('#errorMessage').innerHTML;

What is the expected behavior?

I hoped to get the content/text of the following HTML

<div id="errorArea" class="">
      <span id="errorMessage">We couldn't draw some things because ...</span>
</div>

So in this case I was hoping to get We couldn't draw some things ... text to print it in the debug console.

How would you reproduce the current behavior (if this is a bug)?

Use HTML and the above test code.

Provide the test code and the tested page URL (if applicable)

Specify your

• operating system:
  Windows 10
• testcafe version:
  0.15 and 0.16
• node.js version:
  6.10.3

[AndreyBelym]

Hi @jesperalmstrom, result of ClientFunction is an async function, you can call it and await the result:

const el1 = Selector('#errorArea');
const getErrorMessage = ClientFunction(() => document.getElementById('errorMessage').innerHTML);
const errorMessage = await getErrorMessage();
await t.expect(el1.visible).notOk('Error visible: ' + errorMessage);

or use t.eval instead of ClientFunction:

const el1 = Selector('#errorArea');
const errorMessage = await t.eval(() => document.getElementById('errorMessage').innerHTML);
await t.expect(el1.visible).notOk('Error visible: ' + errorMessage);

[jesperalmstrom]

Thanks for super fast answer. I will try.
Is there a way to get this directly from the el1 Selector ?

[AndreyBelym]

You can pass Selectors into t.eval or ClientFunction as a dependencies:

const el = Selector('#errorMessage');
const getErrorMessage = ClientFunction(() => el().innerHTML, { dependencies: { el } });
const errorMessage = await getErrorMessage();
await t.expect(el1.visible).notOk('Error visible: ' + errorMessage);

const el = Selector('#errorMessage');
const errorMessage = await t.eval(() => el().innerHTML, { dependencies: { el } });
await t.expect(el1.visible).notOk('Error visible: ' + errorMessage);

[AndreyBelym]

Also please note that there is no await in el = Selector(..., in the previous case too

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.