CODEWITHSUNDEEP
domcypress
Fah
Fah

Reputation: 203

Enter on cypress after type is not input the value

I just did a cypress curse on Udemy and I am trying to learn a bit more. I am using this simple code line to get a box and enter a value inside using type and enter, however I am getting no error and the value is not showing inside the box. here is the code line cy.get('[class="multiselect__tags"]').eq('10').type('2,000,000{enter}') how I am new I am using index to get the box since in the page there is more than 18 boxes with the attributes.

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

Here is the DOM

here is how it shows in the test enter image description here

enter image description here

it is the same for the other 2 boxes as well

Upvotes: 0

Views: 3218

Answers (1)

user9622173
user9622173

Reputation:

The Vue-multiselect control allows the user to select items from a list, or type a value and press enter to select it.

The result is a "tag" for each of the selected items is added to the input box.

To select by typing, this is how it can be done on the demo page

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

To select by clicking the dropdown list

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

In your web page, the multiselect has a data-vv-name attribute which should pinpoint the particular control we want,

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

})

I'm not sure if you can select two values on this particular control, it does not make sense to do so since there could be only one liability limit.

Upvotes: 1

Related Questions