Проблема в XPath - учет скрытых элементов и неправильный подсчет

Question

У меня есть 2 страницы, которые имеют похожий тег, но имеют разные теги, когда элемент скрыт

В настоящее время, когда я использую ниже XPath - он тоже берет скрытый элемент, который мне не нужен

XPATH:

var сторон_by_v2_term = "// div [@id = 'product-carousel'] // a [содержит (@rel, '/ product / carousel / select / Field / ')] ";

Мне нужны только те элементы, которые не скрыты, но я получаю 6 отсчетов от DOM. Страница 1 - И мне нужно 5 отсчетов (то есть скрытый элемент не должен приходить")

Код навигации по всем элементам - выдача по мере поступления 6

     for (int i = 1; i <= sides_Count; i++)
            {
                //var side_by = By.XPath($"{element_sides_by_xpath}[{i}]");
                var side_by = By.XPath($"{canvasView.element_sides.locator}[{i}]");


                //var temp = Driver.TryFind(side_by, 500);
                Driver.Click(side_by);}

Страница DOM Elements 1:

<div id="items" class="items carousel-items" style="outline: green dotted 2px !important;" xpath="1">
    <a class="carousel-item js-carousel-item active" href="javascript:" rel="/product/carousel/select/Field/0">
        <div id="productfield0" class="product-carousel-field js-carousel-item-wrapper">
            <span class="carousel-item-image" id="fieldCanvasWrapper0">
                <canvas width="100" height="100" style="width: 100px; height: 100px;"/>
            </span>
            <p id="fieldLable0">Front Left</p>
        </div>
        <span class="" data-fieldindex="0"/>
    </a>
    <a class="carousel-item js-carousel-item" href="javascript:" rel="/product/carousel/select/Field/1">
        <div id="productfield1" class="product-carousel-field js-carousel-item-wrapper">
            <span class="carousel-item-image" id="fieldCanvasWrapper1">
                <canvas width="100" height="100" style="width: 100px; height: 100px;"/>
            </span>
            <p id="fieldLable1">Front Right</p>
        </div>
        <span class="" data-fieldindex="1"/>
    </a>
    <a class="carousel-item js-carousel-item" href="javascript:" rel="/product/carousel/select/Field/2">
        <div id="productfield2" class="product-carousel-field js-carousel-item-wrapper">
            <span class="carousel-item-image" id="fieldCanvasWrapper2">
                <canvas width="100" height="100" style="width: 100px; height: 100px;"/>
            </span>
            <p id="fieldLable2">Right Belt</p>
        </div>
        <span class="" data-fieldindex="2"/>
    </a>
    <a class="carousel-item js-carousel-item" href="javascript:" rel="/product/carousel/select/Field/3">
        <div id="productfield3" class="product-carousel-field js-carousel-item-wrapper">
            <span class="carousel-item-image" id="fieldCanvasWrapper3">
                <canvas width="100" height="100" style="width: 100px; height: 100px;"/>
            </span>
            <p id="fieldLable3">Left Belt</p>
        </div>
        <span class="" data-fieldindex="3"/>
    </a>
    <a class="carousel-item js-carousel-item" href="javascript:" rel="/product/carousel/select/Field/4" style="">
        <div id="productfield4" class="product-carousel-field js-carousel-item-wrapper">
            <span class="carousel-item-image" id="fieldCanvasWrapper4">
                <canvas width="100" height="100" style="width: 100px; height: 100px;"/>
            </span>
            <p id="fieldLable4">Back</p>
        </div>
        <span class="" data-fieldindex="4"/>
    </a>
    <a class="carousel-item js-carousel-item" href="javascript:" rel="/product/carousel/select/Field/5" style="">
        <div id="productfield5" class="product-carousel-field js-carousel-item-wrapper js-hide-3d-carousel-item" style="">
            <span class="carousel-item-image" id="fieldCanvasWrapper5">
                <canvas width="100" height="100" style="width: 100px; height: 100px;"/>
            </span>
            <p id="fieldLable5"/>
        </div>
        <span class="warnings" data-fieldindex="5"/>
    </a>
</div>

Страница DOM 2:

<div id="items" class="carousel-items less-itmes" style="left: 0px;">
    <a href="javascript:" rel="/product/carousel/select/Field/0" class="active">
        <span class="product-carousel-field"><img src="/estore/preview/initialthumb?productId=30&amp;systemName=&amp;productName=Cushion_30new&amp;pvers=211&amp;currentFieldIndex=0&amp;listOfOptionValues=bas-26:817,bas-259:4,bas-431:2572&amp;templateChanged=false&amp;galleryId=s3_2020.04.21_0c8776e8-fab4-4f40-bcf6-6fc1b22e3e2a&amp;tid=11824ea5-dac6-4666-8d2d-156e40121d1e&amp;viewName=&amp;designName=&amp;version=0"/><br/>Front</span>
        <span data-fieldindex="0">&nbsp;</span>
    </a>
    <a href="javascript:" rel="/product/carousel/select/Field/1" class="">
        <span class="product-carousel-field"><img src="/estore/preview/initialthumb?productId=30&amp;systemName=&amp;productName=Cushion_30new&amp;pvers=211&amp;currentFieldIndex=1&amp;listOfOptionValues=bas-26:817,bas-259:4,bas-431:2572&amp;templateChanged=false&amp;galleryId=s3_2020.04.21_0c8776e8-fab4-4f40-bcf6-6fc1b22e3e2a&amp;tid=11824ea5-dac6-4666-8d2d-156e40121d1e&amp;viewName=&amp;designName=&amp;version=0"/><br/>Back</span>
        <span data-fieldindex="1">&nbsp;</span>
    </a>
</div>

Answer 1

Я думаю, что у меня есть суть того, что вы пытаетесь сделать. Вам не нужно сначала выбирать элементы div, вы можете go прямо к тегам привязки. Я изменил ваш xpath, чтобы не выбирать якоря без активного класса.

//a[contains(@rel, '/product/carousel/select/Field/') and not(contains(@class, 'active'))]

Answer 2

Правильно ли я предположить, что скрытый элемент определяется классом js-hide-3d-carousel-item?

Если это так, этот XPath исключит соответствующий a -tag:

//a[contains(@rel , '/product/carousel/select/Field/') and div[not(contains(@class, 'js-hide-3d-carousel-item'))]]

Поскольку строковые операции, такие как contains(), довольно дороги в предварительной фильтрации XPath (как вы это сделали) с родителем, div хорошая идея:

//div[@id = 'items']/a[div[not(contains(@class, 'js-hide-3d-carousel-item'))]]

(Примечание: я не использовал //div[@id = 'product-carousel'] поскольку это не в вашем примере XML, вместо этого я использовал //div[@id = 'items'] в приведенном выше примере.