Ras Capybara填写有角的形式，字段上没有ID和名称

Question

对于非常特定的用例，在交易之后，我需要登录另一个系统（使用Angular构建）以填写表格。登录工作正常，导航到正确的链接以创建显示模式表单工作的新记录。现在我需要输入一个字段，该字段会自动以[

样式填充列表

<ul>
  <li><a class="ng-scope ng-binding"><strong>AAA</strong></a></li> 
  <li><a class="ng-scope ng-binding"><strong>BBB</strong></a></li>
</ul>

UL，LI或A元素均没有ID或名称。如何从LI中选择第一个选项？

rails 5.2水豚硒

页面的html代码段

<form id="addedit-transfer_form" class="form-horizontal form-condensed ng-scope ng-invalid ng-invalid-required ng-dirty" ng-controller="RepeaterCtrl">

    <!-- ngRepeat: line in repeaterLines --><table class="table table-striped table-condensed ng-scope" ng-repeat="line in repeaterLines">

<tr class="offset1">
    <td>
        <input name="model[0][Destinations][0][ShipmentLicenseType]" type="hidden" value="Licensed">
        <div class="control-group">
            <label class="control-label"><strong class="ng-binding">Destination 1</strong></label>
            <div class="controls">
                <div class="input-append">
                    <input autocomplete="off" class="js-validated-element validate[required] ng-dirty ng-invalid ng-invalid-required" placeholder="Type part of the License Number..." required="" spellcheck="false" type="text" ng-model="destination.RecipientId" typeahead="facility.Id as facility.LicenseNumber + ' | ' + facility.FacilityName for facility in preload.repeaterData.DestinationFacilities | orderBy:'LicenseNumber' | filter:$viewValue | limitTo:10" typeahead-editable="true" ng-blur="globalMethods.typeaheadValidator(preload.repeaterData.DestinationFacilities, 'Id', destination, 'RecipientId');" typeahead-input-formatter="globalMethods.typeaheadFormatter(preload.repeaterData.DestinationFacilities, destination.RecipientId, 'Id', 'LicenseNumber');" typeahead-on-select="validateSelection(preload.repeaterData.DestinationFacilities, [[$parent.$index, 'Destinations', 'Transfer'], $index], ['Id', 'RecipientId'], 'LicenseNumber', false, false, preload.defaults.destinationLine);" id="form-validation-field-0">
<ul class="typeahead dropdown-menu ng-isolate-scope" ng-style="{display: isOpen()&amp;&amp;'block' || 'none', top: position.top+'px', left: position.left+'px'}" typeahead-popup="" matches="matches" active="activeIdx" select="select(activeIdx)" query="query" position="position" style="display: block; top: 57px; left: 182px;">

<!-- ngRepeat: match in matches --><li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" class="ng-scope active">
                    <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query" class="ng-scope ng-binding"><strong>020-100815612A0</strong> | 12/12 INDO</a>
                </li><!-- end ngRepeat: match in matches -->
                </ul>
                    <button class="js-destinationsearch-0-0 btn js-destinationsearch" data-id-field="Id,RecipientId" data-index="0" data-sublists="0,Destinations" data-sibling-validator="typeahead-on-select" data-popover-updater="" type="button" data-original-title="" title="">
                        <span class="icon-search"></span>
                    </button>
                    <input name="model[0][Destinations][0][RecipientId]" type="hidden" value="">
                </div>
                <button class="btn btn-info btn-mini" type="button" ng-click="removeLine($index, line.Destinations, true, preload.defaults.destinationLine); preload.methods.createNewControls();">
                    <span class="icon-minus-sign ng-hide" ng-hide="line.Destinations.length === 1"></span><span ng-show="line.Destinations.length === 1" class="">(clear)</span>
                </button>
            </div>
        </div>

使用占位符placeholder =“在许可证编号中键入类型...在字段中输入正确的信息，然后显示ul / li部分，需要进行选择才能设置隐藏字段

Answer 1

您没有提到您需要如何从该列表中进行选择，但是如果您只需要单击它，则可以这样做

click_link('AAA')

如果您需要的更具体，可以做的>]

find('li > a', text: 'AAA').click
等

这假设您已经将相关的击键发送到输入以显示列表。