将范围限制为elementHandles数组(用于选择/单击/等) [英] limit scope to an array of elementHandles (for selection/click/etc)

问题描述

我正在使用-> arrayOfHandles =等待页面. 创建一个elementHandles数组以循环遍历并将循环的范围限制为每个Handle:但这不起作用！！！！！

I'm using --> arrayOfHandles = await page.$x({SOME XPATH EXPRESSION}); To create an array of elementHandles to loop through and limit scope in the loop to each Handle: But It is not working!!!!!

给出以下代码段:

<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"表示没有可用的位置.

Each time the page loads the cameraList is different. sometimes more, or fewer, cameras. Sometimes the svg id="marker-icon" which means no location available.

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

I need to gather the list of cameras and click only the checkboxes for the ones that have locations. Here's what I have:

    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();
        }
    }

即使它在列表中循环了预期的时间(告诉我它发现并创建了一系列的相机行)，它始终仅单击列表中的第一个.另外，在没有它的行上应该跳过它，但是没有.在我看来，示波器无法正常工作，并且仍在根据页面"进行检查

Even though it loops through the list the expected amount of times (tells me it finds and creates an array of the camera-rows), it always clicks on only the first one in the list. Also, on the row that doesn't have it should skip it, but it doesn't. Seems to me the scope isn't working and it's still doing the checks based on "page"

推荐答案

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

So I found that I was using bad Xpath and that was the issue. If I choose the parent object for the array of Handles:

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

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

And then selected the relative Xpath from there it all works!

for (const cameraRow of cameraRowList) {
  const [cameraSelectBox] = await cameraRow.$x("./div[contains(@class, 'checkbox')]");
  await cameraSelectBox.click();
}

这篇关于将范围限制为elementHandles数组(用于选择/单击/等)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！