检查元素是否有 child

Question

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

我可以成功遍历所有行，但我无法检测某个事件是否有抽屉。我试图遵循 answer and also from the docs.

中的逻辑

如何执行此逻辑？

Answer 1

我建议您按如下方式重写测试：

获取所有 "drawer" 个元素：Selector('div.drawer').
根据您的页面层次结构获取包含 "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)

检查元素是否有 child

Check if element has child

html

testing

automated-tests

e2e-testing

testcafe