Блог

Я только что сделал кипарисовое проклятие на Удеми и пытаюсь узнать немного больше. Я использую эту простую строку кода, чтобы получить поле и ввести значение внутри с помощью type и enter, однако я не получаю никаких ошибок, и значение не отображается внутри поля. вот строка кода cy.get('[class="multiselect__tags"]').eq('10').type('2,000,000{enter}') , как я новичок, я использую индекс, чтобы получить поле, так как на странице более 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}')
 

Вот ДОМ

вот как это показано в тесте

Элемент управления Vue-множественный выбор позволяет пользователю выбирать элементы из списка или вводить значение и нажимать клавишу ввод, чтобы выбрать его.

В результате в поле ввода добавляется «тег» для каждого из выбранных элементов.

Чтобы выбрать, набрав, вот как это можно сделать на демонстрационной странице

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

На вашей веб-странице у множественного выбора есть 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
    })

})
 

Я не уверен, что вы можете выбрать два значения для этого конкретного элемента управления, это не имеет смысла делать, так как может быть только одно ограничение ответственности.