testcafe how to make the selection of the conditional element

Question

I'm having trouble making the selection of the element that conditionally appears on a page. I've tried awaiting but it didn't work.

// Gets imported as detailedProductPage 
export default class Page {
  constructor () {
    this.chipItem0 = Selector('[data-test-id="chipItem0"]').child('.tag-name').child('[data-test-id="tagValue"]');
  }
}


test('should accept value and allow for making the selection of multiple     items.', async t => {
  const string0 = 'Professionelle Nassreinigung nicht erlaubt';
  const string1 = 'Handwäsche';
  const string2 = 'Waschen 30°C';

  await t
    .click(detailedProductPage.listContainerFirstChild)

    .typeText(detailedProductPage.symbols, string0)
    .click(detailedProductPage.symbolsResultsItem0)
    .expect(string0).eql(detailedProductPage.chipItem0.innerText)

    .typeText(detailedProductPage.symbols, string1)
    .click(detailedProductPage.symbolsResultsItem0)
    .expect(string1).eql(detailedProductPage.chipItem1.innerText)

    .typeText(detailedProductPage.symbols, string2)
    .click(detailedProductPage.symbolsResultsItem1)
    .expect(string2).eql(detailedProductPage.chipItem2.innerText);
});    

Answer 1

You can use the exists property to check if the element exists on the page. With this you can click on the element that conditionally appears on a page:

const el = Selector('#el');

if(await el.exists)
    await t.click(el);

  To make your test correct, you need to fix your assertions. According to the TestCafe Assertions API the eql assertion should be used in the following manner:

await t.expect( actual ).eql( expected, message, options );

  TestCafe allows a user to pass asynchronous Selector properties as an actual argument. These properties represent a state of a related DOM-element on the tested page. In your case, the actual value is detailedProductPage.chipItem0.innerText. The expected value can't be an asynchronous property, it should be a calculated value (like string, boolean, number or some object etc..).   The following code should work correctly:

await t
    .click(detailedProductPage.listContainerFirstChild)
    .typeText(detailedProductPage.symbols, string0)
    .click(detailedProductPage.symbolsResultsItem0)
    .expect(detailedProductPage.chipItem0.innerText).eql(string0);