ограничить область действия массивом elementHandles (для выбора / щелчка / и т. д.)

Я использую -> arrayOfHandles = await page. $ X ({НЕКОТОРЫЕ ВЫРАЖЕНИЕ XPATH}); Чтобы создать массив elementHandles для выполнения цикла и ограничения области в цикле для каждого Handle: Но это не работает !!!!!

Учитывая следующий фрагмент кода:

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

Каждый раз, когда страница загружается, список камер меняется. иногда больше или меньше фотоаппаратов. Иногда 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();
        }
    }

Несмотря на то, что он просматривает список ожидаемое количество раз (сообщает мне, что находит и создает массив строк камеры), он всегда щелкает только по первому в списке. Кроме того, в строке, в которой его нет, следует пропустить его, но его нет. Мне кажется, что прицел не работает, и он все еще выполняет проверки на основе "страницы"


javascript puppeteer jest-puppeteer
person Jeuke    schedule 21.01.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, я обнаружил, что использую плохой Xpath, и это была проблема. Если я выберу родительский объект для массива дескрипторов:

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();
}
person Jeuke    schedule 22.01.2020