0

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!!!!!

Given the following snippet of code:

<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>

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"

Jeuke
  • 133
  • 1
  • 10

1 Answers1

0

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']/../..");

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();
}
Jeuke
  • 133
  • 1
  • 10