Cannot obtain information about the node because the specified selector does not match any node in the DOM tree

Question

I am working with testCafe for the first time and I am trying to write a test that clicks the name of a specific patient in a list of patients displayed.

The error that I am getting is as follows:

Cannot obtain information about the node because the specified selector does not match any node in the DOM tree.

| Selector('[data-cy=Name]')

This is the actual code block:

test
  .meta({
    code: '4.1',
    action: 'From Patient Summaries screen, click a patient name'.
    expected: 'Should take user to the weekly Patient Overview screen'
  })
  .page(url)
  ('4.1', async t => {
    await LoginPageObject.loginAsDoctor();

    const patients = Selector('[data-cy=Patients]');
    const settingsMenuItem = Selector('[data-cy=name]');

    await t.expect(patients.visible).ok().click(patients);
    await t.expect(Selector('[data-cy=table-row-0]').visible).ok()

    await t.expect(settingsMenuItem.textContent)
      .contains("Charles Shetland")
      .click(settingsMenuItem);

    await VnVScreenshot(t, '4.1', fixtureName);
  });

I tried doing const settingsMenuItem = Selector('td [data-cy=Name]'); and .contains("Shetland,Charles") as that's technically how the name is listed.

But I am still getting the same error for Selector('td [data-cy=Name]').

The way the DOM hierarchy looks is:

div
 table
  thead
  tbody
   tr
    td

Answer 1

So the way I was able to resole it is with some testCafe magic.

What I did was change the data-cy="Name", to data-cy="call_Shetland Charles".

I was not sure at first but that allowed me to go from this:

const settingsMenuItem = Selector('[data-cy=Name]');

To this:

const settingsMenuItem = Selector('[data-cy*=Charles]');

And testCafe was able to identify what patient I wanted it to click on.