0

我正在使用 --> arrayOfHandles = await page.$x({SOME XPATH EXPRESSION}); 创建一个 elementHandles 数组进行循环并将循环中的范围限制为每个句柄：但它不起作用！！！！！！

给定以下代码片段：

<div class="cameraList">
    <div class="camera-row">
        <div class="statsRow">
            <div class="checkbox checkbox-primary">
                <input id="Entrance" type="checkbox" readonly="">
            </div>
            <div class="hasLocationIcon">
                <svg version="1.1" id="locationChecked"></svg>
            </div>
            <div title="Entrance" class="camera-select-box">Entrance</div>
        </div>
    </div>
    <div class="camera-row">
        <div class="statsRow">
            <div class="checkbox checkbox-primary">
                <input id="Camera 3" type="checkbox" readonly="">
            </div>
            <div class="hasLocationIcon">
                <svg version="1.1" id="locationChecked"></svg>
            </div>
            <div title="Camera 3" class="camera-select-box">Camera 3</div>
        </div>
    </div>
    <div class="camera-row">
        <div class="statsRow">
            <div class="checkbox checkbox-primary">
                <input id="Camera 2" type="checkbox" readonly="">
            </div>
            <div class="hasLocationIcon">
                <svg id="marker-icon"></svg>
            </div>
            <div title="Camera 2" class="camera-select-box">Camera 2</div>
        </div>
    </div>
    <div class="camera-row">
        <div class="statsRow">
            <div class="checkbox checkbox-primary">
                <input id="Sky Cam" type="checkbox" readonly="">
            </div>
            <div class="hasLocationIcon">
                <svg version="1.1" id="locationChecked"></svg>
            </div>
            <div title="Sky Cam" class="camera-select-box">Sky Cam</div>
        </div>
    </div>
</div>

每次页面加载cameraList都是不同的。有时更多或更少的相机。有时 svg id="marker-icon" 表示没有可用的位置。

我需要收集摄像机列表并仅单击具有位置的摄像机的复选框。这是我所拥有的：

    const cameraRowList = await page.$x("//div[contains(@class, 'camera-row')]"); // returns an array of elementHandles
    for (const cameraRow of cameraRowList) {
        // loop through the list of elementHandles and click the ones that have locations
        const [cameraHasLocation] = await cameraRow.$x("//div[@class='statsRow']//div[@class='hasLocationIcon']//*[@id='locationChecked']");
        if (cameraHasLocation) {
            const [cameraSelectBox] = await cameraRow.$x("//div[contains(@class, 'checkbox')]");
            await cameraSelectBox.click();
        }
    }

即使它在列表中循环了预期的次数（告诉我它找到并创建了一个相机行数组），它总是只点击列表中的第一个。此外，在没有它的行上应该跳过它，但它没有。在我看来，范围不起作用，它仍在根据“页面”进行检查

4

1 回答 1

0

所以我发现我使用了错误的 Xpath，这就是问题所在。如果我为 Handles 数组选择父对象：

const cameraRowList = await page.$x("//div[@class='statsRow']//div[@class='hasLocationIcon']//*[@id='locationChecked']/../..");

然后从那里选择相对的 Xpath 一切正常！

for (const cameraRow of cameraRowList) {
  const [cameraSelectBox] = await cameraRow.$x("./div[contains(@class, 'checkbox')]");
  await cameraSelectBox.click();
}
于 2020-01-22T17:18:08.740 回答