输入类型未输入值后输入柏树

Question

我刚对乌德米做了一次柏树诅咒，我想学得更多一些。我使用这个简单的代码行来获取一个框，并在里面输入一个值，使用类型和输入，但是我没有得到错误，并且这个值没有显示在这个框中。下面是代码行“如何成为新的我”，我正在使用索引来获取该框，因为页面中有超过18个带有属性的框。

cy.get('[class="multiselect__tags"]').eq('10').type('2,000,000{enter}')
    cy.get('[class="multiselect__tags"]').eq('11').type('2,000,000{enter}')
    cy.get('[class="multiselect__tags"]').eq('12').type('1,500{enter}')

这是DOM

​

下面是它在测试中的表现

​

​

​

​

​

Answer 1

Vue-多重选择控件允许用户从列表中选择项，或者键入一个值并按enter键选择它。

结果是将每个选定项添加到输入框中的“标记”。

要通过键入进行选择，可以在演示页面上这样做

it('selects from vue-multiselect by typing', () => {

  cy.viewport(1000,1000)
  cy.visit('https://vue-multiselect.js.org/')

  cy.get('div.multiselect').eq(0)       // there is no id to work with so just get 1st
    .type('NO Dependencies{enter}');    // select an item

  cy.get('div.multiselect').eq(0)     // same parent as above 
    .within(() => {                   // now work within that select

      cy.get('span.multiselect__tag')          // check the tags
        .should('have.length', 1)              // only one selected
        .invoke('text')              
        .should('contain', 'NO Dependencies')  // has the expected text
    })

  cy.get('div.multiselect').eq(0)       // same select
    .type('GitHub Stars{enter}');       // select another item

  cy.get('div.multiselect').eq(0)
    .within(() => {
      cy.get('span.multiselect__tag')          // check the tags
        .should('have.length', 2)              // now two selected
        .invoke('text')              
        .should('contain', 'GitHub Stars')  // has the expected text
    })
})

单击下拉列表进行选择

it('selects from vue-multiselect by clicking', () => {

  cy.viewport(1000,1000)
  cy.visit('https://vue-multiselect.js.org/')

  cy.get('div.multiselect').eq(0)
    .within(() => {
      cy.get('div.multiselect__select').click()  // open the dropdown
      cy.get('li.multiselect__element')
        .contains('NO Dependencies')
        .click()                                 // select an item
    })

  cy.get('div.multiselect').eq(0)     // same parent as above
    .within(() => {                   // now work within that select

      cy.get('span.multiselect__tag')          // check the tags
        .should('have.length', 1)              // only one selected
        .invoke('text')              
        .should('contain', 'NO Dependencies')  // has the expected text
    })
})

在您的网页中，multiselect具有一个data-vv-name属性，该属性应该能够精确定位我们想要的特定控件，

const controlSelector = 'div.multiselect[data-vv-name="data.eoConditions.liability"]';

cy.get(controlSelector)      
  .type('2,000,000{enter}');    // select an item

cy.get(controlSelector)         // same parent as above
  .within(() => {               // work within that control

    cy.get('span.multiselect__tag')          // check the tags
      .should('have.length', 1)              // only one selected
      .invoke('text')              
      .should('contain', '2,000,000')        // has the expected text
    })

})

我不确定您是否可以在这个特定的控件上选择两个值，这样做是没有意义的，因为可能只有一个责任限制。