Cypress - Frames

The earlier versions of Cypress were unable to access the elements inside frames. But, the recent versions have a solution for 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 −

Cypress Plugin

For the frame implementation in Cypress, we have to add the statement import 'cypressiframe'in the code. A tagname called frame/iframe is used to represent frames in the html code.

The following screen will appear on your computer −

Cypress Iframe

Cypress command frameload 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('Tutorialspoint 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 −

Draggable

The execution logs show the accessing elements inside a frame and the text grabbed within it.

Cypress cannot handle more than one frame in a page.

Also, for frame Intellisense to Cypress, we can add /// <reference types = "Cypressiframe"/> to the code.

Advertisements