Question

我尝试使用赛普拉斯在下拉列表中选择一个值。我尝试了几种方法，但没有一个起作用。它总是选择已经选择的值。

在赛普拉斯文档中，我发现了这一点：

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}禁用错误检查。

https://on.cypress.io/element-cannot-be-interacted-with

当我点击{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>

Answer 1

我对angular不熟悉，但是似乎为<option>生成的HTML已将value attr设置为[object Object]，这意味着您要向其传递对象而不是原始值，可以通过其.toString()方法进行序列化。

还要注意，如果由于某种原因（例如，不存在）而无法使用<options>的{{1}}属性，则cypress'value还将考虑textContent值（ .select()标签之间的文本）：

<option>

编辑：从您发布的HTML代码来看，似乎没有在describe('test', () => { it('test', () => { cy.window().then( win => { win.document.write(` <select> <option>empty</option> <option value="nyc">New York</option> <option>Paris</option> </select> `); }); cy.get('select').select('nyc'); // value attribute cy.get('select').select('Paris'); // textContent value }); });元素上调用cy.select()，您应该：

<select>

Answer 2

我已使用问题中给出的以上HTML。使用赛普拉斯invoke文本方法，接收了所有下拉列表框text，并将其作为参数传递给getCityText(text)函数。然后，我将接收到的文本分配到名为listText的数组中。此外，我删除了在数组中发现的所有多余内容，例如newlines, commas, carriage returns等。然后返回正确的数组值，然后在assert中使用actual vs expected返回它。现在测试已成功通过。

我必须选择一个额外的js function的原因是要处理以下赛普拉斯抛出.. expected **, , BELGIUM, FRANCE, ** to deeply equal [ BELGIUM, FRANCE ]的断言错误很高兴知道是否还有其他简单的方式来处理换行符，逗号等

describe('Verify the list box values are selected', function () {
        it.only('Test the drop down values', function () {
         cy.visit('urlgoeshere')
         cy.get('select[aria-hidden="true"]').parents('.ui-helper-clearfix').find('div').find('select').invoke('text')
            .then(text=>{
              var finalArr =  new Array();
              finalArr = getCityText(text);
              console.log(finalArr);
              expect(finalArr).to.contain(['BELGIUM', 'FRANCE'])
               })
            })
        })

//处理接收到的文本并在删除所有不必要的“新行，逗号等”之后返回值的功能

function getCityText(text){
  var listText = new Array();
  var trimText;
  listText = text;
  for(var i=0; i<=listText.length; i++){
    trimText = listText.replace(/\n|\r+/g, ' ');
    var nText = trimText.trim();
    var fText = nText.replace(" ", ",")
  }
  return fText;
}

Answer 3

在PrimeNG网站上，这是p-dropdown标签的输出：

<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>-tags（之后，<option>-tags（.select（）搜索<option>-tags）：

cy.get('select').select('London')

在第二种情况下，我们没有任何<select>或<option>标记。因此，我们必须找到另一个解决方案。我目前无法在本地运行，但这是我对您的问题的猜测：

cy.get('p-dropdown[formControlName="provenanceCountry"]').click().find('ul li > span').contains('France').click();

或者如果我正确阅读了文档并且`.contains（）`确实具有传递选择器的选项：

cy.get('p-dropdown[formControlName="provenanceCountry"]').click().contains('ul li > span', 'France').click();

使用赛普拉斯从PrimeNG中选择p下拉列表中的值

3 个答案: