testcafe comment faire la sélection de l'élément conditionnel

Question

Je n'arrive pas à faire la sélection de l'élément qui apparaît conditionnellement sur une page. J'ai essayé await ing mais cela n'a pas fonctionné.

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

Vous pouvez utiliser la propriété exists pour vérifier si l'élément existe sur la page. Avec cela, vous pouvez cliquer sur l'élément qui apparaît sous condition sur une page:

const el = Selector('#el'); 

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

Pour faire votre test correct, vous devez corriger vos affirmations. Selon le TestCafe Assertions API l'affirmation eql doit être utilisé de la manière suivante:

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

TestCafe permet à un utilisateur de passer des propriétés asynchrones de sélection comme un argument actual. Ces propriétés représentent un état d'un élément DOM associé sur la page testée. Dans votre cas, la valeur réelle est detailedProductPage.chipItem0.innerText. La valeur expected ne peut pas être une propriété asynchrone, elle doit être une valeur calculée (comme une chaîne, un booléen, un nombre ou un objet, etc.). Le code suivant devrait fonctionner correctement:

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