如何链接选择器以便使用 webdriverio 获取元素

Question

我有一个包含产品列表的页面。
这是 HTML DOM 一个产品项目的样子：

<div class="module card listing-search-card js-product-card      " id="product-entry-123" data-product-id="123" data-toggle-status="open" data-out-of-stock="" data-toggle-isbundle="false" data-load-prices-async="false">
<div class="product-entry__wrapper">
    <div class="card__header">
        <div class="promotion">
            <div class="product-entry__right promotion-card__body on-promotion--banner-offer">
                </div>
            <a href="/Products/p/123" tabindex="-1">
                <picture>
                        <img class="card__image mobile-img lazyload" src="/medias/image-mobile">
                        <img class="card__image desktop-img lazyloaded" src="/medias/image-desktop">
                    </picture>
                </a>
        </div>
    </div>
    <div class="product-entry__body-actions-wrapper">
        <div class="product-entry__body card__body">
            <h3 class="card__title">
                <a href="/Products/p/123" tabindex="-1">Schweppes</a>
            </h3>
            <div class="product-entry__summary card__description-wrapper">
                <div class="product-entry__summary__list">
                    <div class="card__detail-wrapper">
                        <div class="product-entry__summary__item card__description-product-detail">
                                    33 x 24</div>
                        <div class="product-entry__summary__item card__description-product-code">
                            <span class="product-entry__code">
                                123</span>
                        </div>
                    </div>

                    <div class="container-type">
                        box</div>
                    </div>
            </div>
        </div>

        <div class="cta-container">
            <div class="card__amount-wrapper ">
                <div class="card__amount">
                    61,83 €&nbsp;<span class="base-unit">HT/CHACUN</span>
                            <p class="sales-unit-price is-price">
                                    <span>soit</span> 10,00 €
                                </span></span></p>
                            </div>
            </div>
            <div class="add-to-cart__footer add-to-cart__action">
                <div class="success-overlay">Add to cart</div>
                <div class="add-to-cart__action--active">
                    <div class="form-quantity__wrapper quantity-action quantity-action__wrapper" 
data-form-quantity-id="123">
<div class="form-quantity ">

    <button class="form-quantity__decrease quantity-action__decr icon-Minus disabled" type="button" 
 tabindex="-1" aria-label="decrement" data-form-quantity-decrement="">
    </button>

    <input id="product-123" class="form-quantity__input form-control quantity-action__value js- 
   quantity-input-typing" name="product-123" type="text" value="1" maxlength="4" data-price- 
 single="10.00" data-price-currency="€" data-parsley-range="[1,9999]" data-form-quantity-times="1" 
 data-parsley-multiplerange="1" data-parsley-type="integer" data-parsley-validation-threshold="1" 
 required="">

    <button class="form-quantity__increase quantity-action__incr icon-Add-to-list" type="button" 
 tabindex="-1" aria-label="increment" data-form-quantity-increment="">
    </button>
</div>

<span class="form-quantity__update" data-form-quantity-success=""></span>
</div>
<div class="add-to-cart__total">
                        <button class="button  button--primary js-addToCart" role="button" title="Add 
to cart" data-product-id-ref="123" data-modal-trigger="" data-modal-target="#add-to-cart-modal" data- 
modal-before-trigger="addToCart" data-component-id="product list" tabindex="-1">
                            <div class="button__text">
                                <span class="button__text-add js-added-price">Add</span>
                                <span class="button__text-to-cart js-added-price">to cart</span>
                            </div>
                            <span class="button__text js-added-price mobile-only">Add</span>
                            </button>
                    </div>
                </div>
            </div>

            <div class="add-to-template">
                


 <button class="add-to-template--button button js-addToNewTemplate" type="button" data-modal- 
 trigger="" data-modal-target="#add-to-template-modal" data-modal-before- 
 trigger="openAddToTemplateModal" data-product-code="123">
 <span>Add to list</span>
 </button>
 </div>
        </div>
    </div>

</div>

我正在调用这个函数：

isSortedAlphabeticallyAscending($$('div.js-product-card'));

函数实现为：

isSortedAlphabeticallyAscending(list) {
    for (let i = 0; i < (list.length - 1); i++) {
        let outOfStockCurrent = list[i].getAttribute('data-out-of-stock');
        let outOfStockNext = list[i + 1].getAttribute('data-out-of-stock');

        let idCurrent = list[i].getAttribute('id');
        let idNext = list[i + 1].getAttribute('id');

        console.log("outOfStockCurrent " + outOfStockCurrent + " " + idCurrent);
        console.log("outOfStockNext " + outOfStockNext + " " + idNext);

        let productIdCurrent = idCurrent.split('-').pop();
        let productIdNext = idNext.split('-').pop();


        let currentText = list[i].$('a[href*="' + productIdCurrent + '"]').getText();
        let nextText = list[i+1].$('a[href*="'+ productIdNext + '"]').getText();

        console.log("currentText " + currentText);
        console.log("nextText " + nextText);

        if(outOfStockCurrent === "true" || outOfStockNext === "true") continue;
        if (currentText > nextText) return false;
    }
    return true;
}

我忽略缺货产品，因为它们总是在页面底部。
但是 list[i].$('a[href*="' + productIdCurrent + '"]').getText() 总是返回空文本。
我希望它获得“Schweppes”文本，即产品名称。

有没有办法以某种方式以不同方式链接 .$a[href ...] 以从使用 webdriverio 5 的产品列表的 <div> 元素内的 <a> 标签获取文本？

谢谢！

Answer 1

上面的选择器 list[i].$('a[href*="' + productIdCurrent + '"]').getText() 定位了 2 个元素。
我需要进一步 div 并在那里找到它：

list[i].$('div.product-entry__body-actions-wrapper').$('a[href*="' + productIdCurrent + '"]').getText()

瞧，文字出现了:)
希望它能帮助遇到类似问题的人 :D

如何链接选择器以便使用 webdriverio 获取元素

How to chain selectors in order to get element inside with webdriverio

webdriver-io