How to use getFrameElement method in Testcafe
Best JavaScript code snippet using testcafe
util.get-frame-element.test.js
Source:util.get-frame-element.test.js 
...7 var TestFrame = require('../helper/test-frame');8 var getFrameElement = require('ally/util/get-frame-element');9 bdd.describe('util/get-frame-element', function() {10 bdd.it('should not resolve elements from the current browsing context', function() {11 var frameElement = getFrameElement(document.body);12 expect(frameElement).to.equal(null);13 });14 bdd.describe('for <iframe> elements', function() {15 var frame;16 bdd.before(function() {17 frame = new TestFrame([18 /* eslint-disable indent */19 '<!DOCTYPE html>',20 '<html lang="en">',21 '<head>',22 '<meta charset="utf-8" />',23 '<title>Framed Content</title>',24 '</head>',25 '<body>',26 '<p id="target">Hello World</p>',27 '</body>',28 '</html>',29 /*eslint-enable indent */30 ].join(''));31 return frame.initialize(document.body);32 });33 bdd.after(function() {34 frame.terminate();35 frame = null;36 });37 bdd.it('should resolve the element hosting the contentDocument', function() {38 var element = frame.document.getElementById('target');39 var frameElement = getFrameElement(element);40 expect(frameElement).to.equal(frame.element);41 });42 });43 bdd.describe('for parsed <object> elements', function() {44 var fixture;45 var object;46 bdd.before(function() {47 var dfd = new Promise.Deferred();48 fixture = customFixture([49 /* eslint-disable indent */50 '<object type="image/svg+xml" typemustmatch="false" id="object-svg" data="../../tests/media/test.svg" width="200" height="50"></object>',51 /*eslint-enable indent */52 ]);53 object = document.getElementById('object-svg');54 object.onload = function() {55 dfd.resolve();56 };57 object.onerror = function() {58 dfd.reject('error while loading <object>');59 };60 return dfd.promise;61 });62 bdd.after(function() {63 fixture.remove();64 fixture = null;65 });66 bdd.it('should resolve the element hosting the contentDocument', function() {67 var objectDocument = object.contentDocument;68 var element = objectDocument.querySelector('a');69 var frameElement = getFrameElement(element);70 expect(frameElement).to.equal(object);71 });72 bdd.it('should resolve the element hosting the contentDocument from cache', function() {73 var objectDocument = object.contentDocument;74 var element = objectDocument.querySelector('a');75 var cachedFrameElement = getFrameElement(element);76 expect(cachedFrameElement).to.equal(object);77 });78 });79 bdd.describe('for injected <object> elements', function() {80 var fixture;81 var object;82 bdd.before(function() {83 var dfd = new Promise.Deferred();84 fixture = customFixture('<div></div>');85 object = document.createElement('object');86 object.setAttribute('type', 'image/svg+xml');87 object.setAttribute('typemustmatch', 'false');88 object.setAttribute('id', 'object-svg-created');89 object.setAttribute('width', '200');90 object.setAttribute('height', '50');91 object.setAttribute('data', '../../tests/media/test.svg');92 fixture.root.appendChild(object);93 object.onload = function() {94 dfd.resolve();95 };96 object.onerror = function() {97 dfd.reject('error while loading <object>');98 };99 return dfd.promise;100 });101 bdd.after(function() {102 fixture.remove();103 fixture = null;104 });105 bdd.it('should resolve the element hosting the contentDocument', function() {106 var objectDocument = object.contentDocument;107 var element = objectDocument.querySelector('a');108 var frameElement = getFrameElement(element);109 expect(frameElement).to.equal(object);110 });111 bdd.it('should resolve the element hosting the contentDocument from cache', function() {112 var objectDocument = object.contentDocument;113 var element = objectDocument.querySelector('a');114 var cachedFrameElement = getFrameElement(element);115 expect(cachedFrameElement).to.equal(object);116 });117 });118 });...
Gallery.js
Source:Gallery.js
...7}8scTGallery.prototype.onKeyUp = function (evt) {9 evt = (evt != null ? evt : event);10 if (evt.keyCode == 27) {11 var frame = scForm.browser.getFrameElement(window);12 frame.style.display = "none";13 }14}15scTGallery.prototype.onLoad = function () {16 var frame = scForm.browser.getFrameElement(window);17 // frame.style.display = "";18 scForm.focus(frame);19 var width = "";20 var height = "";21 if (!scForm.browser.isIE) {22 width = frame.offsetWidth;23 }24 if (frame.width != "") {25 width = frame.width;26 }27 if (frame.height != "") {28 height = frame.height;29 }30 if (width == "" || height == "") {31 var ctl = $(document.body.firstChild);32 var w = ctl.style.width;33 var h = ctl.style.height;34 if (scForm.browser.isIE) {35 ctl.style.width = "1px";36 ctl.style.height = "1px";37 }38 else {39 ctl.setStyle({ width: "auto", height: "auto" });40 }41 ctl.style.position = "absolute";42 width = ctl.scrollWidth;43 height = ctl.scrollHeight;44 ctl.style.position = "";45 ctl.style.width = w;46 ctl.style.height = h;47 }48 if (width == "" || width < this.minWidth) {49 width = this.minWidth;50 }51 if (height == "" || height < 24) {52 height = 24;53 }54 if (this.autoAdjustSize()) {55 frame.style.height = height + "px";56 var ieWordWrapFixWidth = 1;57 frame.style.width = (Number(width) + ieWordWrapFixWidth) + "px";58 }59 var viewport = frame.ownerDocument.body;60 if (viewport.clientHeight == 0) {61 var form = $(frame.ownerDocument.body).down("form");62 if (form && form.clientHeight > 0) {63 viewport = form;64 }65 }66 if (frame.offsetLeft + frame.offsetWidth > viewport.offsetWidth) {67 frame.style.left = (viewport.offsetWidth - frame.offsetWidth - 1) + "px";68 }69 if (frame.offsetTop + frame.offsetHeight > viewport.offsetHeight) {70 frame.style.top = (viewport.offsetHeight - frame.offsetHeight - 1) + "px";71 }72 if (frame.offsetLeft < 0) {73 frame.style.left = "0px";74 }75 if (frame.offsetTop + 16 > viewport.offsetHeight || frame.offsetTop < 0) {76 frame.style.top = "0px";77 }78 if (this.autoAdjustSize()) {79 if (frame.offsetLeft + frame.offsetWidth > viewport.offsetWidth) {80 frame.style.width = (viewport.offsetWidth - frame.offsetLeft - 1) + "px";81 }82 if (frame.offsetTop + frame.offsetHeight > viewport.offsetHeight) {83 frame.style.height = (viewport.offsetHeight - frame.offsetTop - 1) + "px";84 }85 }86 frame.style.zIndex = "10000";87}88scTGallery.prototype.mouseDown = function (tag, evt) {89 if (!this.dragging) {90 this.trackCursor = new scPoint();91 this.trackCursor.setPoint(evt.screenX, evt.screenY);92 this.dragging = true;93 this.delta = 0;94 scForm.browser.setCapture(tag);95 scForm.browser.clearEvent(evt, true, false);96 }97}98scTGallery.prototype.mouseMove = function (tag, evt) {99 if (this.dragging) {100 var dx = evt.screenX - this.trackCursor.x;101 var dy = evt.screenY - this.trackCursor.y;102 var frame = scForm.browser.getFrameElement(window);103 if (frame.offsetWidth + dx > this.minWidth) {104 frame.style.width = (frame.offsetWidth + dx) + "px";105 this.trackCursor.x = evt.screenX;106 }107 else {108 frame.style.width = "" + this.minWidth + "px";109 }110 if (frame.offsetHeight + dy > 24) {111 frame.style.height = (frame.offsetHeight + dy) + "px";112 this.trackCursor.y = evt.screenY;113 }114 else {115 frame.style.height = "24px";116 }117 scForm.browser.clearEvent(evt, true, false);118 }119}120scTGallery.prototype.mouseUp = function (tag, evt) {121 if (this.dragging) {122 this.dragging = false;123 scForm.browser.clearEvent(evt, true, false);124 scForm.browser.releaseCapture(tag);125 var frame = scForm.browser.getFrameElement(window);126 var scGalleries = window.parent.document.getElementById("scGalleries");127 var value = scGalleries.value;128 var p = value.toQueryParams();129 p[frame.id] = frame.style.width + "q" + frame.style.height;130 scGalleries.value = Object.toQueryString(p);131 }132}133scTGallery.prototype.onHide = function () {134}135var scGallery = new scTGallery();136scForm.browser.attachEvent(window, "onload", function () { scGallery.onLoad() });...
service.js
Source:service.js
1//cookies2function GetCookie(sName)3{4 var aCookie = document.cookie.split("; ");5 for (var i=0; i < aCookie.length; i++)6 {7 var aCrumb = aCookie[i].split("=");8 if (sName == aCrumb[0]) 9 return unescape(aCrumb[1]);10 }11 return null;12}13function SetCookie(sName, sValue)14{15 document.cookie = sName + "=" + escape(sValue) + "; "16}17function SetPermanentCookie(sName, sValue)18{19 var date = new Date();20 date.setTime(date.getTime()+(365*24*60*60*1000));21 document.cookie = sName + "=" + escape(sValue) + "; expires=" + date.toGMTString() + ";";22}23function DelCookie(sName)24{25 document.cookie = sName + "=" + escape(sValue) + "; expires=Fri, 31 Dec 1999 23:59:59 GMT;";26}27// elements28function GetElement(id, d){29 if (id){30 if (!d) {d = document;} 31 if (d.getElementById){32 return d.getElementById(id);33 } else if (d.all){34 return d.all[id];35 } else if (d.layers){36 return d.layers[id]; 37 }38 }39 return false;40}41//frames42var m_isrefresh = true;43var m_frameset = 'iFrame';44var m_leftFrame = 'contents';45var m_size = '210';46var m_bar_expanded = true;47function GetBarExpanded()48{49 var sbe=GetCookie('BarExpanded');50 if(sbe){51 return sbe=='True';52 }else{53 SetCookie('BarExpanded','True'); 54 }55 return true;56}57function FindFrame(id, f){58 var i = 0;59 for(i=0;i<f.frames.length;i++){60 if(f.frames[i].frameElement.id==id) {return f.frames[i];}61 var ff = FindFrame(id ,f.frames[i]);62 if(ff) {return ff;}63 }64 return false; 65}66function GetFrame(id){67 return FindFrame(id, top)68}69function GetFrameElement(id){70 var f = FindFrame(id, top);71 if(f && f.frameElement) {return f.frameElement }72 return false;73}74function GetCurrentX(){75 var frmset = GetElement(m_frameset, top.document); 76return (parseInt(frmset.cols));77 var frm = GetFrameElement(m_leftFrame);78 var x = 0;79 if (frm){80 x = frm.clientWidth;81 if(x==0) x = parseInt(m_size)82 }83 return x;84}85function FoldFrame(f){86 if(GetBarExpanded()!=f||(!f&&m_isrefresh)){87 if(f){88 ShowFrame();89 } else {90 HideFrame();91 }92 SetPermanentCookie('BarExpanded',f?'True':'False');93 m_isrefresh=false;94 }95}96function HideFrame(){97 ResizeMode(false);98 var x = GetCurrentX();99 var t = 0; 100 m_size = x;101 for(i=x;i>0;--i){102 t+=5;103 i-=Math.round(i/5);104 setTimeout('ResizeFrame("' + i + ',*")', (x - i) < t ? x - i : t);105 }106 setTimeout('ResizeMode(true)', t);107}108function ShowFrame(){109 ResizeMode(false);110 var x = parseInt(m_size);111 var t = 0;112 for(i=0;i<x;++i){113 t+=5;114 i+=Math.round(i/5);115 setTimeout('ResizeFrame("' + i + ',*")', i < t ? i : t);116 }117 setTimeout('ResizeMode(true)', t);118}119function ResizeFrame(s){120 var frmset = GetElement(m_frameset); 121 if (frmset){122 frmset.cols = s;123 }124}125function ResizeMode(mode){126 var frm = GetFrameElement (m_leftFrame);127 if (frm){128 frm.noResize = mode; 129 }...
windowUtil.js
Source:windowUtil.js
...58o2.getFrameTopToVisibleFrameTopOffset = function(win) {59 if (win === top.window) {60 return $(win.document).scrollTop();61 }62 var frameElm = o2.getFrameElement(win.document);63 return o2.getFrameTopToVisibleFrameTopOffset(win.parent) + $(win.document).scrollTop() - (frameElm.tagName.toLowerCase() === "frame" ? 0 : $(frameElm).offset().top);
...
resizer.js
Source:resizer.js
...48 return cb(false);49 });50 }51 function _doResize(message){52 var iframe = getFrameElement(message.source, window);53 if (iframe && iframe.style){54 iframe.style.width = message.data.width + 'px';55 iframe.style.height = message.data.height + 'px';56 }57 }58 function _init(){59 window.addEventListener('message', function(message){60 if (!message || !message.data || message.data.name !== 'mraid-resize') return;61 _checkOrigin(message, function(isAuthorized){62 if (isAuthorized){63 _doResize(message);64 }65 });66 });...
PageDesigner.js
Source:PageDesigner.js
...4 5 Sitecore.Dhtml.attachEvent(window, "onload", function() { Sitecore.PageDesigner.load() } );6}7Sitecore.PageDesigner.load = function() {8 var frame = Sitecore.Dhtml.getFrameElement(window);9 10 if (frame != null && frame.style.display != "none") {11 scUpdateRibbonProxy("Ribbon", "Ribbon", window.location.href.indexOf("ar=1") >= 0);12 }13}14function scOnShowEditor() {15 scUpdateRibbonProxy("Ribbon", "Ribbon");16}17function scGetFrameValue(value, request) {18 var frame = scForm.browser.getFrameElement(window);19 if (frame == null || frame.style.display == "none") {20 return;21 }22 23 if (request.parameters == "contenteditor:save") {24 Sitecore.App.invoke("item:save");25 }26 return null;...
Preview.js
Source:Preview.js
...4 5 Sitecore.Dhtml.attachEvent(window, "onload", function() { Sitecore.Preview.load() } );6}7Sitecore.Preview.load = function() {8 var frame = Sitecore.Dhtml.getFrameElement(window);9}10function scGetFrameValue(value, request) {11 var frame = scForm.browser.getFrameElement(window);12 13 if (request.parameters == "contenteditor:save") {14 window.location.reload(false);15 }16 17 return null;18}19function scOnShowEditor() {20 scRefresh();21}22function scRefresh() {23 var ctl = scForm.browser.getControl("Editor");24 ctl.src = ctl.src;25}
Using AI Code Generation
1import { Selector } from 'testcafe';2test('My first test', async t => {3 .typeText('#developer-name', 'John Smith')4 .click('#submit-button');5 const articleHeader = await Selector('.result-content').find('h1');6 const iframeWindow = await Selector('#article-content').getFrameElement();7 const iframeBody = await Selector('body').with({ boundTestRun: t, iframeWindow: iframeWindow });8 const iframeHeader = await iframeBody.find('h1');9 const iframeHeaderText = await iframeHeader.innerText;10});11import { Selector } from 'testcafe';12test('My first test', async t => {13 .typeText('#developer-name', 'John Smith')14 .click('#submit-button');15 const articleHeader = await Selector('.result-content').find('h1');16 const iframeBody = await Selector('#article-content').find('body');17 const iframeHeader = await iframeBody.find('h1');18 const iframeHeaderText = await iframeHeader.innerText;19});
Using AI Code Generation
1import { Selector } from 'testcafe';2test('My test', async t => {3 .click('#btn')4 .switchToIframe('#iframe')5 .expect(Selector('#btn').getFrameElement().innerText).eql('My button');6});7import { Selector } from 'testcafe';8test('My test', async t => {9 .click('#btn')10 .switchToIframe(Selector('#btn').getFrameElement())11 .expect(Selector('#btn').innerText).eql('My button');12});
Using AI Code Generation
1import { ClientFunction } from 'testcafe';2const getFrameElement = ClientFunction(() => {3 return window.getFrameElement();4});5test('Get the iframe element', async t => {6 const iframeElement = await getFrameElement();7 .expect(iframeElement.id).eql('iframe');8});
Using AI Code Generation
1import { Selector } from 'testcafe';2test('Test', async t => {3 .click(Selector('button').withText('Click Me'))4 .switchToIframe(Selector('iframe'))5 .click(Selector('button').withText('Click Me'))6 .switchToMainWindow()7 .click(Selector('button').withText('Click Me'))8 .switchToIframe(Selector('iframe'))9 .click(Selector('button').withText('Click Me'));10});11 <button id="mainButton" onclick="alert('Clicked')">Click Me</button>12 <button id="iframeButton" onclick="alert('Clicked')">Click Me</button>13Selector('#iframe') is not a selector that will select the iframe element. It will select the element with the id "iframe" in the main window. You need to use iframeSelector as the first parameter of switchToIframe :14test('Test', async t => {15 .click(Selector('button').withText('Click Me'))16 .switchToIframe(Selector('#iframe'))17 .click(Selector('button').withText('Click Me'))18 .switchToMainWindow()19 .click(Selector('button').withText('Click Me'))20 .switchToIframe(Selector('#iframe'))21 .click(Selector
Using AI Code Generation
1import { Selector } from 'testcafe';2test('Test', async t => {3 .click(Selector('a').withText('Link'))4 .click(Selector('button').withText('Button'))5 .switchToMainWindow();6});7const {Builder, By, Key, until} = require('selenium-webdriver');8const driver = new Builder()9 .forBrowser('firefox')10 .build();11driver.findElement(By.linkText('Link')).click();12driver.findElement(By.linkText('Button')).click();13driver.switchTo().defaultContent();14const puppeteer = require('puppeteer');15const browser = await puppeteer.launch();16const page = await browser.newPage();17await page.click('a:has-text("Link")');18await frame.click('button:has-text("Button")');19await page.waitForSelector('button:has-text("Button")');20await browser.close();21const { chromium } = require('playwright');22const browser = await chromium.launch();23const page = await browser.newPage();24await page.click('a:has-text("Link")');25await frame.click('button:has-text("Button")');26await page.waitForSelector('button:has-text("Button")');27await browser.close();28describe('Test', () => {29 it('Test', () => {30 cy.get('a:contains("Link")').click();31 const $body = $iframe.contents().find('body');32 cy.wrap($body).find('button:contains("Button
Using AI Code Generation
1import { ClientFunction } from 'testcafe';2test('Test', async t => {3 console.log('frameElement:', await ClientFunction(() => window.getFrameElement())());4});5 <iframe src="test.html" style="display: none;"></iframe>6import { ClientFunction } from 'testcafe';7test('Test', async t => {8 console.log('frameElement:', await t.parent.getFrameElement());9});10 <iframe src="test.html" style="display: none;"></iframe>
Using AI Code Generation
1import { Selector } from 'testcafe';2const iframe = Selector('iframe').withAttribute('id', 'iframeID');3const iframeElement = iframe.getFrameElement();4test('Test', async t => {5 await t.click(iframeElement);6});7import { Selector } from 'testcafe';8const iframe = Selector('iframe').withAttribute('id', 'iframeID');9const iframeElement = iframe.getFrame();10test('Test', async t => {11 await t.click(iframeElement);12});
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run Testcafe automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
