我尝试使用赛普拉斯在下拉列表中选择一个值。我尝试了几种方法，但是没有一个起作用。它总是选择已经选择的值。
在赛普拉斯文档中，我发现了这一点：
cy.get('select').select('apples').should('have.value', '456')
当我将其应用于我的代码...时：
cy.get('select').select('FR').should('have.value', 'FR')
...我收到此错误：CypressError：超时重试：cy.select（）失败，因为此元素不可见：
<select class="ng-tns-c16-2" aria-hidden="true" tabindex="-1" aria-label="Nederlands">...</select>
该元素“”不可见，因为其内容被其父元素之一裁剪，该元素的CSS属性为“ hidden”，“ scroll”或“ auto”
解决此问题，或使用{force：true}禁用错误检查。
https://on.cypress.io/element-cannot-be-interacted-with
当我使用force：true时，将跳过该错误，但仍然无法使用。
cy.get('select').select('FR',{force:true}).should('have.value', 'FR')
我也尝试了不使用select而是使用click的方法。这也只是选择选定的一个，而不是第三个选定的。
cy.get('option').eq(2).click({force: true});
使用.type（{downarrow}）也会失败，因为它不是文本输入字段。
所以我现在真的没有主意。
我想测试多重下拉列表，这是其中之一：
<span class="eco-form-component__control">
<p-dropdown formControlName="sector"
[options]="sectors"
[style]="{'width':'100%'}">
</p-dropdown>
</span>
编辑：
我还尝试了以下方法，在这里我得到了正确的值（法国），但他无法单击它。
cy.get('p-dropdown[formControlName="provenanceCountry"]').click();
cy.get('p-dropdown[formControlName="provenanceCountry"]').get('select').then(option => {
cy.wrap(option).get('p-dropdown[formControlName="provenanceCountry"]').contains('FRANCE').click();
});
错误：
CypressError：超时重试：cy.click（）失败，因为此元素不可见：
<option class="ng-tns-c9-15 ng-star-inserted" value="[object
Object]">FRANCE</option>
该元素
'<option.ng-tns-c9-15.ng-star-inserted>'不可见，因为它的有效宽度和高度为：“ 0 x 0”像素。解决此问题，或使用{force：true}禁用错误检查。
当我在单击中使用{force：true}时，错误仅不显示。
确切的HTML：
<div _ngcontent-c11="" class="eco-form-component"><label _ngcontent-c11="" class="eco-form-component__label" ng-reflect-ng-class="eco-form-component__label"> Geïmporteerd uit </label><span _ngcontent-c11="" class="eco-form-component__control"><p-dropdown _ngcontent-c11="" formcontrolname="provenanceCountry" class="ng-tns-c14-7 ui-inputwrapper-filled ng-untouched ng-pristine ng-invalid" ng-reflect-style="[object Object]" ng-reflect-options="[object Object],[object Object" ng-reflect-name="provenanceCountry"><div class="ng-tns-c14-7 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix" ng-reflect-ng-class="[object Object]" ng-reflect-ng-style="[object Object]" style="width: 100%;"><!--bindings={
"ng-reflect-ng-if": "true"
}--><div class="ui-helper-hidden-accessible ng-tns-c14-7 ng-star-inserted"><select class="ng-tns-c14-7" aria-hidden="true" tabindex="-1" aria-label=" "><!--bindings={}--><!--bindings={}--><!--bindings={
"ng-reflect-ng-if": "true"
}--><!----><!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><option class="ng-tns-c14-7 ng-star-inserted" value=" "> </option><option class="ng-tns-c14-7 ng-star-inserted" value="BELGIUM">BELGIUM</option><option class="ng-tns-c14-7 ng-star-inserted" value="FRANCE">FRANCE</option><!----></select></div><div class="ui-helper-hidden-accessible"><input class="ng-tns-c14-7" readonly="" role="listbox" type="text" aria-label=" "></div><!--bindings={
"ng-reflect-ng-if": "true"
}--><label class="ng-tns-c14-7 ui-dropdown-label ui-inputtext ui-corner-all ng-star-inserted" ng-reflect-ng-class="[object Object]"><!--bindings={
"ng-reflect-ng-if": "true"
}--><!----> <!--bindings={
"ng-reflect-ng-template-outlet-context": "[object Object]"
}--></label><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={}--><!--bindings={}--><div class="ui-dropdown-trigger ui-state-default ui-corner-right"><span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down" ng-reflect-klass="ui-dropdown-trigger-icon ui-cl" ng-reflect-ng-class="pi pi-caret-down"></span></div><!--bindings={}--></div></p-dropdown></span><!--bindings={
"ng-reflect-ng-if": "false"
}--></div>
在PrimeNG网站上，这是p-dropdown-tag的输出：
<p-dropdown optionlabel="name" placeholder="Select a City" class="ng-tns-c3-1 ng-pristine ng-valid ng-touched">
<div class="ng-tns-c3-1 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix ui-dropdown-clearable" style="width: 129px;">
<div class="ui-helper-hidden-accessible ng-tns-c3-1 ng-star-inserted">
<select class="ng-tns-c3-1" aria-hidden="true" tabindex="-1" aria-label=" ">
<option class="ng-tns-c3-1 ng-star-inserted">Select a City</option>
<option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">New York</option>
<option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">Rome</option>
<option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">London</option>
<option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">Istanbul</option>
<option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">Paris</option>
</select>
</div>
<div class="ui-helper-hidden-accessible">
<input class="ng-tns-c3-1" readonly="" role="listbox" type="text" aria-label=" ">
</div>
<label class="ng-tns-c3-1 ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder ng-star-inserted">Select a City</label>
<div class="ui-dropdown-trigger ui-state-default ui-corner-right">
<span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down"></span>
</div>
</div>
</p-dropdown>
但是，如果我们采用诸如“ Ultima”主题之类的PrimeNG主题风格更强的主题，则会得到以下信息：
<p-dropdown class="ng-tns-c4-30 ui-inputwrapper-filled ng-pristine ng-valid ng-touched">
<div class="ng-tns-c4-30 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix ui-dropdown-open">
<div class="ui-helper-hidden-accessible">
<input class="ng-tns-c4-30" readonly="" role="listbox" type="text" aria-label="Select City">
</div>
<label class="ng-tns-c4-30 ui-dropdown-label ui-inputtext ui-corner-all ng-star-inserted">
Select City
</label>
<div class="ui-dropdown-trigger ui-state-default ui-corner-right">
<span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down"></span>
</div>
<div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c4-30 ui-dropdown-panel ui-widget ui-widget-content ui-corner-all ui-shadow ng-star-inserted" style="z-index: 1002; top: 23px; left: 0px; transform: translateY(0px); opacity: 1;">
<div class="ui-dropdown-items-wrapper" style="max-height: 200px;">
<ul class="ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
<li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ui-state-highlight ng-star-inserted" style="">
<span class="ng-tns-c4-30 ng-star-inserted">Select City</span>
</li>
<li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
<span class="ng-tns-c4-30 ng-star-inserted">New York</span>
</li>
<li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
<span class="ng-tns-c4-30 ng-star-inserted">Rome</span>
</li>
<li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
<span class="ng-tns-c4-30 ng-star-inserted">London</span>
</li>
<li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
<span class="ng-tns-c4-30 ng-star-inserted">Istanbul</span>
</li>
<li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
<span class="ng-tns-c4-30 ng-star-inserted">Paris</span>
</li>
</ul>
</div>
</div>
</div>
</p-dropdown>
在第一种情况下，柏树不应该遇到那么多麻烦。但是在第二种情况下，我相信您有柏树，柏树会遇到一些麻烦。
在第一种情况下，这可能会毫无问题地起作用，因为它<select>会在<option>-tags（.select（）搜索-tags）之后进行搜索<option>：
cy.get('select').select('London')
在第二种情况下，我们没有任何<select>或<option>-tags。因此，我们必须找到另一个解决方案。我目前无法在本地运行，但这是我对您的问题的猜测：
cy.get('p-dropdown[formControlName="provenanceCountry"]').click().find('ul li > span').contains('France').click();
cy.get('p-dropdown[formControlName="provenanceCountry"]').click().contains('ul li > span', 'France').click();
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句