The earlier versions of Cypress were unable to access the elements inside frames. But, the recent versions have a solution for the frame.
To work with frames, first, we have to install a Cypress plugin with the command given below −
npm install –D cypress-iframe
The screen which will be displayed is given below −
For the frame implementation in Cypress, we have to add the statement import ‘cypressiframe’ in the code. A tag name called frame/iframe is used to represent frames in the Html code.
The following screen will appear on your computer −
Cypress command frame load is used to move the focus from the main page to the frame. Once the focus is shifted, we can interact with the elements inside the frame.
This is done with the cy.iframe method.
Implementation
Given below is the implementation of the Cypress command for frames, by using the cy.iframe method −
import 'cypress-iframe'
describe('Adglob Test', function () {
// test case
it('Test Case6', function (){
// launch URL
cy.visit("https://jqueryui.com/draggable/");
// frame loading
cy.frameLoaded('.demo-frame');
//shifting focus
cy.iframe().find("#draggable").then(function(t){
const frmtxt = t.text()
//assertion to verify text
expect(frmtxt).to.contains('Drag me around');
cy.log(frmtxt);
})
});
});
Execution Results
The output is as follows −
The execution logs show the accessing elements inside a frame and the text grabbed within it.
Cypress cannot handle more than one frame on a page.
Also, for frame Intellisense to Cypress, we can add /// <reference types = “Cypressiframe”/> to the code.