Как искать определенный элемент в некотором родительском элементе, не используя индекс элемента

Question

У меня есть окно поиска, и при поиске на каком-либо устройстве я получаю результаты для всех устройств, соответствующих строке, например, если я буду искать AppleiPhone XS, то получу результаты: Apple iPhone XS MAX, Apple iPhone XS DEMO DATA, Apple iPhone XS.

Теперь я хочу щелкнуть ссылку, которая находится ниже Apple iPhone XS, но без использования индекса этого элемента, то есть без использования уравнения. Поскольку некоторое время результат для других устройств даст только 1 выход.

<div class="c-loadingIndicator-containment l-vertical-scrollParent">
    <div class="l-vertical-list u-p+ ng-scope" ng-if="offeringsController.offerOptionViewModel.length > 0">
                <div class="c-selectableOption-body">
                    <div class="c-selectableOption-meta" ng-class="{'u-flexTop': selectableOptionController.useIdHeader}">
                        <div ng-if="!selectableOptionController.useIdHeader" class="c-selectableOption-title ng-scope">
                            <span title="Apple iPhone XS MAX" class="ng-binding">Apple iPhone XS MAX</span>
                        </div>
                    </div>
                    <div class="c-selectableOption-extras">
                        <div class="c-quickviewButton c-button c-button--link ng-binding ng-scope" ng-if="selectableOptionController.showQuickView" ng-click="selectableOptionController.quickViewClick(selectableOptionController.id)" ng-bind="::selectableOptionController.UILocaleKeys.QUICK_VIEW | i18n">quick view</div>
                    </div>
                </div>
            </div>
                <div class="c-selectableOption-body">
                    <div class="c-selectableOption-meta" ng-class="{'u-flexTop': selectableOptionController.useIdHeader}">
                        <div ng-if="!selectableOptionController.useIdHeader" class="c-selectableOption-title ng-scope">
                            <span title="Apple iPhone XS" class="ng-binding">Apple iPhone XS</span>
                        </div>
                    </div>
                    <div class="c-selectableOption-extras">
                        <div class="c-quickviewButton c-button c-button--link ng-binding ng-scope" ng-if="selectableOptionController.showQuickView" ng-click="selectableOptionController.quickViewClick(selectableOptionController.id)" ng-bind="::selectableOptionController.UILocaleKeys.QUICK_VIEW | i18n">quick view</div>
                    </div>
                </div>
            </div>
    </div>
</div>

Answer 1

Вы можете передать регулярное выражение в cy.contains, который будет содержать привязку конца строки.

// As your `selector` you'll need to use the closest wrapping element
// containing the target text else the regex's `$` will not work here.
// (the \s accounts for potential whitespace around the text)
cy.contains('span', /apple iphone xs\s*$/i)
    // get common ancestor
    .closest('.c-selectableOption-body')
    // find the quick view button
    .contains('.c-selectableOption-extras', /quick view/i);

На самом деле вам не нужно использовать какие-либо selector вообще, который получит ближайший элемент по умолчанию (вы также можете использовать * в качестве selector, который будет действовать так же):

cy.contains(/apple iphone xs\s*$/i)