testcafe条件付き要素の選択方法

Question

条件付きでページに表示される要素の選択に問題があります。 await ingを試しましたが、動作しませんでした。

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

あなたは、要素がページ上に存在するかどうかを確認するためにexistsプロパティを使用することができます。これを使用すると、条件付きのページに表示された要素をクリックすることができます：あなたのテストが正しいようにするには

const el = Selector('#el'); 

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

、あなたのアサーションを修正する必要があります。 TestCafe Assertions APIによればeqlアサーションは、以下のように使用されるべきである：

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

TestCafeは、ユーザがactual引数として非同期セレクタプロパティを通過することを可能にします。これらのプロパティは、テストされたページ上の関連するDOM要素の状態を表します。あなたの場合、実際の値はdetailedProductPage.chipItem0.innerTextです。 expectedの値は非同期プロパティであってはなりません。計算値（文字列、ブール値、数値、オブジェクトなど）でなければなりません。 次のコードは正常に動作するはずです：AlexanderMosを手伝うため

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