the auto-select for auto complete field
it('Test to grab the autocomplete values', ()=> {
cy.visit('https://jqueryui.com/autocomplete/');
cy.get('#tags').type('c')
cy.get('#ui-id-2').first().click()
})
})
it shows that it was clicked but it does't get chosen
I could see there is an iframe, for dealing with iframe you have to use the code:
cy.get('iframe.demoframe').its('0.contentDocument').its('body')
So your code should look like:
cy.visit('https://jqueryui.com/autocomplete/')
cy.get('iframe.demo-frame')
.its('0.contentDocument')
.its('body')
.find('#tags')
.type('c')
cy.get('iframe.demo-frame')
.its('0.contentDocument')
.its('body')
.find('li')
.first()
.click()
Now if you want to further condense your script you can use Cypress Custom commands. Go to cypress/support/command.js and write:
Cypress.Commands.add('getIframe', (iframe) => {
return cy
.get(iframe)
.its('0.contentDocument.body')
.should('be.visible')
.then(cy.wrap)
})
And your test will be:
cy.visit('https://jqueryui.com/autocomplete/')
cy.getIframe('iframe.demo-frame').find('#tags').type('c')
cy.getIframe('iframe.demo-frame').find('li').first().click()
Your code is basically ok, but you need to execute within the iframe
cy.visit('https://jqueryui.com/autocomplete/')
cy.get('iframe.demo-frame')
.its('0.contentDocument.body')
.within(() => {
cy.get('#tags').type('c')
cy.get('#ui-id-2').first().click()
cy.get('#tags').should('have.value', 'ActionScript')
})