CODEWITHSUNDEEP
typescriptcypress
CCC
CCC

Reputation: 51

How to select cypress autocomplete field

How can i select a autocomplete field in cypress.

This is what the field looks like:

enter image description here

and here is the HTML code:

<div class="mui-select"><span style="color: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;; font-size: 14px; font-weight: 600;">Select a Venue</span><div style="font-size: 16px; line-height: 24px; width: 100%; display: inline-block; position: relative; background-color: transparent; font-family: Helvetica, &quot;Open Sans&quot;; transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; cursor: text; border-radius: 4px; border: 1px solid rgb(255, 96, 102); margin-bottom: 36px; padding-bottom: 8px; margin-top: 8px;"><div><div style="margin-top: 0px;"></div></div><div style="display: flex; position: relative; width: 256px; padding: 0px 8px; margin: 0px; font: inherit; height: 32px; border: none; outline: none; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); float: left; min-height: 32px; flex-wrap: nowrap;"><div style="font-size: 16px; line-height: 24px; width: 256px; height: 48px; display: inline-block; position: relative; background-color: transparent; font-family: Helvetica, &quot;Open Sans&quot;; transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; cursor: auto;"><input type="text" autocomplete="off" id="b0d75317-769e-4d22-aa71-8ab86304b6d5" value="" style="padding: 0px; position: relative; width: 100%; border: none; outline: none; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: inherit; font: inherit; opacity: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 100%;"></div><div style="display: none;"></div></div><div><hr aria-hidden="true" style="border-top: none rgb(224, 224, 224); border-left: none rgb(224, 224, 224); border-right: none rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); bottom: 8px; box-sizing: content-box; margin: 0px; position: absolute; width: 100%; display: none;"><hr aria-hidden="true" style="border-top: none rgb(244, 67, 54); border-left: none rgb(244, 67, 54); border-right: none rgb(244, 67, 54); border-bottom: 2px solid rgb(244, 67, 54); bottom: 8px; box-sizing: content-box; margin: 0px; position: absolute; width: 100%; display: none; transform: scaleX(1); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"></div><div style="position: absolute; bottom: -24px; font-size: 12px; line-height: 12px; color: rgb(244, 67, 54); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; margin-top: 16px;">This field is required</div></div></div>

Upvotes: 5

Views: 12023

Answers (2)

J.Orlando
J.Orlando

Reputation: 91

Thanks for this idea. For me it worked by typing enter instead of click. Like this

this.elements.someAutocompleteField()
    .type(Cypress.env('TEXT TO FIND'))
    .type('{downarrow}')
    .type('{enter}');

Upvotes: 1

soccerway
soccerway

Reputation: 11991

One method is to pass downarrow keys in the type command and use the click command to get the values. I have used the 'jquery' site to test the behaviour; Try similar way in your test 

it('Test to grab the autoselect values', ()=> {
    cy.visit('https://jqueryui.com/autocomplete/');
    cy.get('iframe').then(($iframe)=>{
      const $input = $iframe.contents().find('body').find('div').find('input');
      let data = cy.wrap($input)
      data.type('JavaS');
      data.type('{downarrow}');
      data.type('{downarrow}').click();
    })
})

Upvotes: 6

Related Questions