0
569
ViewsUnable to select item in cypress inside a frame
I have managed to log into a laboratory results system but I can't progress any further. My long term intention is to grab lab results for local incorporation into a medical record.
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('frame[id="EclairMainFrame"]')
.its('0.contentDocument.body').should('not.be.empty')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
describe('Medlab Test', () => {
it('Visits Eclair', () => {
cy.visit('https://cdr.medlabcentral.co.nz/Eclair/mvc')
cy.get('.login-field').eq(0).type('userid')
cy.get('.login-field').eq(1).type('passphrase{enter}')
cy.location('pathname').should('eq', '/Eclair/ClinicalWorkstation.aspx')
getIframeBody().find('.search-form-form-textbox')
})
})
This gets me logged in, but Cypress fails to find the input field to enter the Patient ID. I see the following error message:
Timed out retrying after 6000ms: Expected to find element: .search-form-form-textbox, but never found it. Queried from element: <body>
The DOM at this point for that input field shows:
<input class="search-form-form-textbox Mandatory" id="PatAliasId" name="PatAliasId" type="text" value="" tabindex="4">
I've tried cy.get on the class cy.get('.search-form-form-textbox'), on the id cy.get('#PatAliasId'), and on class attribute cy.get('name=["PatAliasId"]') but all these attempts time out at 6 seconds.
What's the correct syntax for finding a dom element inside a frame?
2 answers
Answer question0
To work with frames in Cypress you have to install a cypress plugin with the following command, then you can interact with elements inside the frame
npm install -D cypress-iframe
Reference URL Cypress Frames
If you have done the above already, then load the frame first to find the required element
cy.frameLoaded(#frameId)
cy.iframe.find('#PatAliasId').type('abc')
0
In previous version of cypress, don't have any support for the iFrame. But in latest version cypress provided the support for iFrames.
Do work on cypress , we need to install cypress-iframe by using the below commands.
npm install -D cypress-iframe
Use this below code:
describe('Medlab Test', () => {
it('Visits Eclair', () => {
cy.visit('https://cdr.medlabcentral.co.nz/Eclair/mvc')
cy.frameLoaded('#frameId')
cy.iframe.find('#PatAliasId').type('Enter Your Input')
})
})