Проверьте, есть ли у элемента дочерний элемент - PullRequest
Новая
       20

Проверьте, есть ли у элемента дочерний элемент

2 голосов
/ 25 октября 2019

У меня есть следующее дерево DOM (упрощенно) 

<div class=row-0>...</div>
<div class=row-1>
  <div class=container>
    <div class=panel>...</div>
  </div>
</div>
<div class=row-2>...</div>
<div class=row-3>
  <div class=container>
    <div class=panel>...</div>
    <div class=drawer>...</div>
  </div>
</div>
<div class=row-4>...</div>

Как видите, все элементы имеют панель class=panel, но не все элементы имеют выдвижной ящик class=drawer. Я перебираю элементы следующим образом: 

const events = Selector('[class^="row-"]');
const eventCount = await events.count;

for (let i = 0; i < eventCount; i++) {
  const event = await events.nth(i);
  // Here's where I want to check if the event (class=row-x) has a child element class=drawer
  const drawer = await Selector(event).child('class["drawer"]')
  if (await drawer.exists) {
    console.log('Found drawer')
  }
}

Я могу успешно перебрать все строки, но не могу определить, есть ли у определенного события ящик. Я пытался следовать логике из этого ответа, а также из документов .

Как мне выполнить эту логику?

1 Ответ

1 голос
/ 28 октября 2019

Я предлагаю вам переписать ваш тест следующим образом:

  1. Получить все элементы «выдвижного ящика»: Selector('div.drawer').
  2. Получить все строки, содержащие элементы «выдвижного ящика», в соответствии сиерархия вашей страницы.

Я создал простой пример - пожалуйста, проверьте его:

index.html : 

<html>
<head></head>
<body>
<div class=row-0>Row 0</div>
<div class=row-1>
    Row 1
    <div class=container>
        <div class=panel>...</div>
    </div>
</div>
<div class=row-2>Row 2</div>
<div class=row-3>
    Row 3
    <div class=container>
        <div class=panel>...</div>
        <div class=drawer>...</div>
    </div>
</div>
<div class=row-4>Row 4</div>
<div class=row-5>
    Row 5
    <div class=container>
        <div class=panel>...</div>
        <div class=drawer>...</div>
    </div>
</div>

</body>
</html>

test.js : 

import { Selector } from 'testcafe';

fixture `Fixture`
    .page `./index.html`;

test('find rows with "drawer"', async t => {
    const drawerElements = Selector('div.drawer').addCustomDOMProperties({
        outerHTML: el => el.outerHTML
    });
    const length = await drawerElements.count;

    console.log('Row elements count:', length);

    for (let i = 0; i < length; i++) {
        console.log('//', i + 1, 'element:');
        console.log(await drawerElements.nth(i).parent().parent().outerHTML);
    }
});

Команда: 

testcafe chrome test.js

Результат: 

 Running tests in:
 - Chrome 78.0.3904 / Windows 10.0.0

 Fixture
Row elements count: 2
// 1 element:
<div class="row-3">
    Row 3
    <div class="container">
        <div class="panel">...</div>
        <div class="drawer">...</div>
    </div>
</div>
// 2 element:
<div class="row-5">
    Row 5
    <div class="container">
        <div class="panel">...</div>
        <div class="drawer">...</div>
    </div>
</div>
 √ find rows with "drawer"


 1 passed (1s)
...