Правильный способ выбора селектора

Question

В моем скрипте TestCafe я пытаюсь выбрать 3 входа. Это:

<div>
<div class="InputHeaderContainer cl-input-header-container">
<div class="cl-input-header-text">Korpushöhe (ohne Sockel)</div>
<input class="InputField cl-input cl-input-header" type="number" value="600">
<div class="clear"></div>
</div>
</div>

<div>
<div class="InputHeaderContainer cl-input-header-container">
<div class="cl-input-header-text">Korpusbreite</div>
<input class="InputField cl-input cl-input-header" type="number" value="600">
<div class="clear"></div>
</div>
</div>

<div>
<div class="InputHeaderContainer cl-input-header-container">
<div class="cl-input-header-text">Korpusbreite</div>
<input class="InputField cl-input cl-input-header" type="number" value="600">
<div class="clear"></div>
</div>
</div>

Я использовал в своем скрипте:

await t
    .typeText(Selector('div').withText('Korpushöhe').find('input'), '1200', {replace: true})
    .typeText(Selector('div').withText('Korpusbreite').find('input'), '1400', {replace: true})
    .typeText(Selector('div').withText('Korpustiefe').find('input'), '400', {replace: true});

Но если я запусту этот скрипт, Браузер напечатает текст 3 раза в первом поле. Это смущает. Что я не так сделал?

Answer 1

Попробуйте с помощью 'sibling'.

См. Документацию

await t
    .typeText(Selector('div').withText('Korpushöhe').sibling('input'), '1200', {replace: true})
    .typeText(Selector('div').withText('Korpusbreite').sibling('input'), '1400', {replace: true})
    .typeText(Selector('div').withText('Korpustiefe').sibling('input'), '400', {replace: true})