ограничить область видимости массивом elementHandles (для выбора / click / et c) - PullRequest
Новая
       31

ограничить область видимости массивом elementHandles (для выбора / click / et c)

0 голосов
/ 21 января 2020

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

С учетом следующего фрагмента кода: 

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

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

1 Ответ

0 голосов
/ 22 января 2020

Итак, я обнаружил, что использовал плохой 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();
}
...