Cannot obtain information about the node because the specified selector does not match any node in t-CodePudding

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 thats 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

CodePudding user response：

It's difficult to determine the exact cause of the error without a sample. However, I found the incorrect code in the following lines:

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

If you want to click an item with specified text, you need to use the withText method: https://testcafe.io/documentation/402740/reference/test-api/selector/withtext

await t.click(settingsMenuItem.withText('Charles Shetland'))

If this does not help, please prepare a sample that demonstrates the issue.

Please note that you can use the TestCafe Experimental Debug functionality to execute a selector in IDE or chrome nodejs console. Refer to the following article for details: https://testcafe.io/documentation/402639/reference/command-line-interface#--experimental-debug

CodePudding user response：

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.