- Cypress Tutorial
- Cypress - Home
- Cypress - Introduction
- Cypress - Architecture and Environment Setup
- Cypress - Test Runner
- Cypress - Build First Test
- Cypress - Supported Browsers
- Cypress - Basic Commands
- Cypress - Variables
- Cypress - Aliases
- Cypress - Locators
- Cypress - Assertions
- Cypress - Text Verification
- Cypress - Asynchronous Behavior
- Cypress - Working with XHR
- Cypress - jQuery
- Cypress - Checkbox
- Cypress - Tabs
- Cypress - Dropdown
- Cypress - Alerts
- Cypress - Child Windows
- Cypress - Hidden Elements
- Cypress - Frames
- Cypress - Web Tables
- Cypress - Mouse Actions
- Cypress - Cookies
- Cypress - Get and Post
- Cypress - File Upload
- Cypress - Data Driven Testing
- Cypress - Prompt Pop-up Window
- Cypress - Dashboards
- Cypress - Screenshots and Videos
- Cypress - Debugging
- Cypress - Custom Commands
- Cypress - Fixtures
- Cypress - Environment Variables
- Cypress - Hooks
- Cypress - Configuration of JSON File
- Cypress - Reports
- Cypress - Plugins
- Cypress - GitHub
- Cypress Useful Resources
- Cypress - Quick Guide
- Cypress - Useful Resources
- Cypress - Discussion
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 −
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 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 −
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.
To Continue Learning Please Login
Login with Google