ruby-on-rails - Rails Capybara 填写 Angular 表单,字段上没有 id 和 name
问题描述
对于一个非常具体的用例,交易后我需要登录另一个系统(使用 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()&&'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="Type part of the License Number..." 在字段中输入正确的信息,然后显示需要选择以设置隐藏字段的 ul/li 部分
解决方案
您没有提到您需要如何从该列表中进行选择,但如果您只需要单击它,您可以这样做
click_link('AAA')
如果你需要比你能做的更具体
find('li > a', text: 'AAA').click
等等
这假设您已经将相关的击键发送到输入以使列表出现。
推荐阅读
- nginx - Nginx 将位置重写到新的 API 端点
- javascript - 正则表达式从缩小中排除 npm 库
- node.js - 在节点 js 中创建 API 以使用我的 sql 获取具有多个查询的数据
- python - 熊猫时间序列重新采样,分箱似乎关闭
- ssl-certificate - 如何查看 Truststore 的到期日期
- google-cloud-platform - Google 登录 URI
- php - 扩展控制器 mvc 结构中的 PHP 覆盖构造错误
- kubernetes - 在 K8S 集群中使用 KeyCloak 网关
- php - Wordpress 联系表 7 前端确认
- asp.net - Chart.js - 定义自定义 y 轴刻度