检查元素是否有子元素答案

【问题标题】：Check if element has child检查元素是否有子元素
【发布时间】：2020-02-21 21:55:11
【问题描述】：

我有以下 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')
  }
}

我可以成功地遍历所有行，但是我无法检测到某个事件是否有抽屉。我尝试遵循this 答案和docs 的逻辑。

我该如何执行这个逻辑？

【问题讨论】：

标签： html testing automated-tests e2e-testing testcafe

【解决方案1】：

我建议你重写你的测试如下：

获取所有“抽屉”元素：Selector('div.drawer')。
根据您的页面层次结构获取包含“抽屉”元素的所有行。

我创建了一个简单的示例 - 请查看：

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)

【讨论】：