Testcafe: Trouble locating a nested element

[mnemanja]

I'm not sure what this is. Most likely it's my lack of understanding.
I'm trying to select a nested node without much luck.

I'm trying to access it with this code:

test.only('selecting another product, while the previous is still opened, should refresh the preview with the new selection.', async t => {
  const productsListItem0 = await Selector('#listContainer').find('li').nth(0);
  const productsListItem0Title = await productsListItem0.find('[data-test-id="name"]');
  const pageTitle = await Selector('#pageTitle'); // <- This one gets targeted correctly 

// An alternative approach to the element's selector
  const productsListItem0Title = await Selector('#listContainer').find('div').withAttribute('data-test-id');


  await t
    .click(productsListItem0)
    .expect(pageTitle.textContent).eql(productsListItem0Title.innerText)
});

• operating system: Windows 10
• testcafe version: 0.16.2
• node.js version: 6.10.0

[AlexanderMoskovkin]

Hi Nemanja,

I've create a simple example based on your markup: https://jsfiddle.net/9byn92sf/

If run the following test:

test.only.page('https://jsfiddle.net/9byn92sf/')('selecting another product, while the previous is still opened, should refresh the preview with the new selection.', async t => {
  await t.switchToIframe('[name="result"]');

  const productsListItem0 = await Selector('#listContainer').find('li').nth(0);
  const productsListItem0Title = await productsListItem0.find('[data-test-id="name"]');
  const alternativeProductsListItem0Title = await Selector('#listContainer').find('div').withAttribute('data-test-id');

  console.log('productsListItem0.count = ', await productsListItem0.count);
  console.log('productsListItem0Title.count = ', await productsListItem0Title.count);
  console.log('productsListItem0Title.innerText = ', await productsListItem0Title.innerText);

  console.log('alternativeProductsListItem0Title.count = ', await alternativeProductsListItem0Title.count);
  console.log('alternativeProductsListItem0Title.innerText = ', await alternativeProductsListItem0Title.innerText);

  await t.click(productsListItem0);
});

it works properly and I see the following log in the CLI:

productsListItem0.count =  1
productsListItem0Title.count =  1
productsListItem0Title.innerText =  Test product 0
alternativeProductsListItem0Title.count =  3
alternativeProductsListItem0Title.innerText =  Test product 0

So, Selector finds target elements properly.
Could you please clarify where is your test failed, on the click action or on the expect command? Also you can try to use console.log in your test (as I do in my example) to see which elements exist.

[mnemanja]

You sir, are awesome!
Thank you very much for this quick response and a good example.
My code was failing on the expect line with productsListItem0Title.innerText looking up the content before it was ready.

From your example, I've managed to deduct that I was missing an await on my productsListItem0Title.innerText. I've moved the innerText on the previous line, where it has await and now it works as expected.

test.only('selecting another product, while the previous is still opened, should refresh the preview with the new selection.', async t => {
  const productsListItem0 = await Selector('#listContainer').find('li').nth(0);
  const productsListItem0Title = await productsListItem0.find('[data-test-id="name"]').innerText;
  const pageTitle = await Selector('#pageTitle');

  await t
    .click(productsListItem0)
    .expect(pageTitle.textContent).eql(productsListItem0Title)
});