从结果列表中选择产品上所有下拉列表中的选项

Question

我想了解Watir，所以请耐心等待。我在网站上有一个产品有多个下拉选项（大小，颜色，配置），我需要遍历一个代码块，直到每个下拉菜单都选择了一个选项，以便我可以将项目添加到我的购物车。

单击第一个下拉框并成功选择该选项。单击第二个下拉框，但是我收到一条错误，指出无法找到元素（选项），即使每个下拉列表都使用相同的HTML。有人可以帮我弄清楚如何选择额外的下拉选项吗？

这是我的红宝石代码：

skuString = @browser.button(:text, 'Add To Cart').id
sku = skuString[/[^_]+/]
skuOptions = hapi.getProduct(sku)
numOfOptions = skuOptions['products'][0]['options'].size

numOfOptions.times do |n|
@browser.spans(:class, 'HN-Item-Opt-Ar bg-hn-background icon-down-open')[n].when_present.click

if @browser.div(:class, 'standard-style HN-Item-Opt relativePosition ng-scope').exists?
   @browser.div(:class, 'standard-style HN-Item-Opt relativePosition ng-scope').when_present.click
else @browser.div(:class, 'standard-style padding10px HN-Item-Opt clearfix ng-scope').when_present.click
end
end

这是我在第二次下拉时收到的错误：

Watir::Wait::TimeoutError: timed out after 90 seconds, waiting for {:class=>"standard-style padding10px HN-Item-Opt clearfix ng-scope", :tag_name=>"div"} to become present
./features/step_definitions/result_lists.rb:41:in `block (2 levels) in <top (required)>'
./features/step_definitions/result_lists.rb:32:in `times'
./features/step_definitions/result_lists.rb:32:in `/^I select options in the modal$/'

以下是选项部分的HTML：

<div class="paddingSides15px paddingTopOnly5px borderTop border-hn-secondary-lt">

    <div hn-product-options="" options="model.product.options" variation="model.product.variation" productid="model.product.productID" class="ng-scope">

            <div hn-product-option="" ng-class="{'option-invalid': !option.valueSelected}" option="options[0]" class="ng-scope option-invalid">
                <div hn-select="" label="Bed Size (2)" select-name=" - Bed Size" on-collapse="getValueData(args)" class="marginTopOnly10px hn-option ng-isolate-scope" hn-input-disable="" hn-input-disable-exclude="lastSelectedOption == option" enable-on="hnProductOptions:updateComplete" disable-on="hnProductOptions:updating" content-width="654"><div class="HN-Select-Option">
<div ng-click="toggleContent()" style="height:100%;overflow: hidden;" class="">
    <div class="standard-style text-small noWrap">
        <div class="HN-Opt-Lbl noWrap inline-block ng-binding" hn-bind-html="displayData">Bed Size (2)</div>
        <div swatch-preview="" class="inline-block swatch-preview-cont ng-scope" style="width: 0px;">
            <!-- ngRepeat: img in swatches.images -->
        </div>
    </div>
    <span class="HN-Item-Opt-Ar bg-hn-background icon-down-open"></span>
</div>

<div class="form-error text-small ng-binding ng-hide" ng-show="hasCustomErrorCondition ? errorCondition() : (data.isCustomKitOption ? (dirty &amp;&amp; !data.valid &amp;&amp; !data.isPristine) : displayError)">
    Please Select<br>
    Your  - Bed Size
</div>
<div ng-transclude="" class="hn-select-content" ng-class="{'open-to-left':openToLeft, 'expand-to-left':expandToLeft}">

                    <ul hn-select-scroller="" scroll-lock="" ng-mouseleave="hideLargeSwatch()" ng-class="{'grid':option.isGridView}" class="whiteBackground border border-hn-secondary-lt text-small ng-scope ng-isolate-scope">

                            <div ng-show="option.selectedValue.optionValueID !== undefined" class="ng-hide">
                                <div hn-select-attr-clear="" on-option-select="clearSelected()" class="hn-select-attr-clear standard-style padding10px HN-Item-Opt borderBottom border-hn-secondary-lt hover-active ng-isolate-scope">
                                    <span class="icon-cancel" style="width: auto;"></span>
                                    &nbsp;<span class="clear-selection">Clear Selection</span>
                                </div>
                            </div>

                        <!-- ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Full</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $370.00<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $1,729.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Queen</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $390.00<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $1,749.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values -->
                    </ul>
                    <!-- ngIf: option.imgExists || !isAvailable -->
                </div>
</div></div>

            </div>

            <div hn-product-option="" ng-class="{'option-invalid': !option.valueSelected}" option="options[1]" class="ng-scope option-invalid">
                <div hn-select="" label="Configuration (9)" select-name=" - Configuration" on-collapse="getValueData(args)" class="marginTopOnly10px hn-option ng-isolate-scope" hn-input-disable="" hn-input-disable-exclude="lastSelectedOption == option" enable-on="hnProductOptions:updateComplete" disable-on="hnProductOptions:updating" content-width="654"><div class="HN-Select-Option">
<div ng-click="toggleContent()" style="height:100%;overflow: hidden;">
    <div class="standard-style text-small noWrap">
        <div class="HN-Opt-Lbl noWrap inline-block ng-binding" hn-bind-html="displayData">Configuration (9)</div>
        <div swatch-preview="" class="inline-block swatch-preview-cont ng-scope" style="width: 0px;">
            <!-- ngRepeat: img in swatches.images -->
        </div>
    </div>
    <span class="HN-Item-Opt-Ar bg-hn-background icon-down-open"></span>
</div>

<div class="form-error text-small ng-binding ng-hide" ng-show="hasCustomErrorCondition ? errorCondition() : (data.isCustomKitOption ? (dirty &amp;&amp; !data.valid &amp;&amp; !data.isPristine) : displayError)">
    Please Select<br>
    Your  - Configuration
</div>
<div ng-transclude="" class="hn-select-content" ng-class="{'open-to-left':openToLeft, 'expand-to-left':expandToLeft}">

                    <ul hn-select-scroller="" scroll-lock="" ng-mouseleave="hideLargeSwatch()" ng-class="{'grid':option.isGridView}" class="whiteBackground border border-hn-secondary-lt text-small ng-scope ng-isolate-scope">

                            <div ng-show="option.selectedValue.optionValueID !== undefined" class="ng-hide">
                                <div hn-select-attr-clear="" on-option-select="clearSelected()" class="hn-select-attr-clear standard-style padding10px HN-Item-Opt borderBottom border-hn-secondary-lt hover-active ng-isolate-scope">
                                    <span class="icon-cancel" style="width: auto;"></span>
                                    &nbsp;<span class="clear-selection">Clear Selection</span>
                                </div>
                            </div>

                        <!-- ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Bed Only</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $370.00<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $390.00</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Bed + Nightstand</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $569.99<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $589.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Bed + 2 Nightstands</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $759.99<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $779.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Bed + Dresser + MIrror</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $869.99<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $889.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Bed + Chest</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $829.99<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $849.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Bed + Nightstand + Dresser + Mirror</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $1,069.99<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $1,089.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Bed + Nightstand + Chest</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $1,029.99<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $1,049.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Bed + Nightstand + Dresser + Mirror + Chest</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $1,529.99<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $1,549.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values --><li hn-product-option-value="" item="optionData" ng-repeat="optionData in option.values" ng-class="{grid:option.isGridView}" class="ng-scope">
                            <div hn-select-attr="" option="item" on-option-select="selectValue()" on-hover="getValueData(args)" grid="option.isGridView" ng-class="{'borderBottom border-hn-secondary-lt':(!option.isGridView), grid:(option.isGridView)}" class="ng-isolate-scope hover-active borderBottom border-hn-secondary-lt"><div lazy-load-html="getTemplate()"><div ng-click="selectThis($event)" class="standard-style padding10px HN-Item-Opt clearfix ng-scope" ng-class="{'HN-Item-Opt-Sel':optionData.data.selectedFlag,'opt-deactive':!optionData.data.availableFlag, 'touch-hover':onHover().thisValue ==optionData.value}">
<!-- ngIf: option.optionImgExists && !option.swatchImgExists -->
<!-- ngIf: option.swatchImgExists -->
<span class="text-small HN-Item-Opt-Name ng-binding" hn-bind-html="optionData.data.text || optionData.data.name" hn-bind-html-filter="boolToCF">Bed + 2 Nightstands + Dresser + Mirror + Chest</span><br>
<!-- ngIf: optionData.data.availableFlag && option.isPriceRangeSku --><span ng-if="optionData.data.availableFlag &amp;&amp; option.isPriceRangeSku" class="text-tiny text-hn-red ng-scope">
    <span ng-switch="option.isCustomKitOption">
        <!-- ngSwitchWhen: true -->
        <!-- ngSwitchDefault:  --><span ng-switch-default="" class="ng-scope ng-binding">
            $1,729.99<!-- ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice --><span ng-if="optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice" class="ng-scope ng-binding"> - $1,749.99</span><!-- end ngIf: optionData.data.minDisplayPrice !== optionData.data.maxDisplayPrice -->
        </span>
    </span>
</span><!-- end ngIf: optionData.data.availableFlag && option.isPriceRangeSku -->
<!-- ngIf: !optionData.data.availableFlag -->
</div></div></div>
                        </li><!-- end ngRepeat: optionData in option.values -->
                    </ul>
                    <!-- ngIf: option.imgExists || !isAvailable -->
                </div>
</div></div>

            </div>

    </div>

</div>

Answer 1

问题出在以下几行：

@browser.div(:class, 'standard-style padding10px HN-Item-Opt clearfix ng-scope').when_present.click

这等待HTML中第一次出现这个div出现。换句话说，它始终在等待＆＃34; Full＆＃34;床选项出现。这在更新床类型时有效，但在更新配置类型时永远不会出现。

您需要确定适用项目的检查范围。有很多方法可以做到这一点。但是，需要最少量更改的方法可能使用带有类＆＃34; hn-select-content＆＃34;的div。它似乎每下拉一次存在。

numOfOptions.times do |n|
  @browser.spans(:class, 'HN-Item-Opt-Ar bg-hn-background icon-down-open')[n].when_present.click

  if @browser.div(:class, 'standard-style HN-Item-Opt relativePosition ng-scope').exists?
    @browser.div(:class, 'standard-style HN-Item-Opt relativePosition ng-scope').when_present.click
  else
    list = @browser.div(:class => 'hn-select-content', :index => n)
    list.div(:class, 'standard-style padding10px HN-Item-Opt clearfix ng-scope').when_present.click
  end
end