使用賽普拉斯從 PrimeNG 中選擇 p-dropdown 中的值

Question

我嘗試使用賽普拉斯在我的下拉列表中選擇一個值。 我嘗試了幾種方法來做到這一點，但都沒有奏效。 它總是選擇已經選擇的值。

在賽普拉斯文檔中，我發現了這一點：

cy.get('select').select('apples').should('have.value', '456')

當我將其應用於我的代碼時...：

cy.get('select').select('FR').should('have.value', 'FR')

...我收到此錯誤： CypressError: Timed out retrying: cy.select() failed 因為此元素不可見：

<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')

我也嘗試過不使用選擇，而是使用點擊。 這也只是選擇了選定的一個，而不是第三個選定的。

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

我不熟悉角度，但似乎為<option>生成的 HTML 的value attr 設置為[object Object]這意味着您將對象傳遞給它，而不是可以通過其.toString()序列化的原始值.toString()方法。

另請注意，如果由於某種原因（例如，它不存在）不能使用<options>的value屬性，則 cypress' .select()還會考慮 textContent 值（ <option>標簽之間的文本）：

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
    });
});

編輯：從您發布的 HTML 代碼來看，您似乎沒有在<select>元素上調用cy.select() ，您應該這樣做：

cy.get('[formcontrolname="provenanceCountry"]').find('select').select('FRANCE');

Answer 2

我已經使用了問題中給出的上述HTML 。 使用 cypress invoke文本方法，接收所有下拉列表框text並作為參數傳遞給getCityText(text)函數。 然后我將收到的文本分配到一個名為listText的數組中。 此外，我刪除了在數組中發現的所有額外內容，例如newlines, commas, carriage returns等。然后返回正確的數組值，然后用actual vs expected assert它。 現在測試成功通過了。

我必須選擇一個額外的js function的原因是為了處理 cypress 拋出的以下斷言錯誤 .. 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 -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>

但是，如果我們采用 PrimeNG 風格的主題，例如“Ultima”主題，我們會得到：

<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>

在第一種情況下，柏樹不應該遇到那么大的麻煩。 然而，在第二種情況下，我相信你所擁有的，cypress 會遇到一些麻煩。

在第一種情況下，這可能沒有任何問題，因為它搜索<select>並且之后<option> -tags( .select() 搜索<option> -tags)：

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

在第二種情況下，我們沒有任何<select>或<option> -tags。所以我們必須找到另一個解決方案。 我目前無法在本地運行，但這是我對您的問題的猜測：

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();

Answer 4

我找到了一個解決方案，這條指令選擇了第一個選項。 版本“柏樹”：“^9.1.0”

 cy.get('p-dropdown[formControlName="category"]') .find('.p-dropdown') .click({ force: true }) .find('.p-dropdown-items-wrapper > .p-dropdown-items') .click({ force: true }) .get('.p-dropdown-item') .children() .first() .click({ force: true });

Answer 5

這對我有用...您需要在點擊事件中提供強制選項 true

cy.get('p-dropdown[formControlName="countryName"]').click().contains('ul li > span', 'France').parent('li').click({force: true});