KaneAI - World’s First E2E Software Testing Agent.Book a Demo 
How to use outerIframe method in wpt
Best JavaScript code snippet using wpt
switch.js
Source:switch.js 
1import {docCookies, createCssClass} from "./helper.js";2class Switch {3 constructor(bannerObj, bigObj, mode) {4 this.bannerObj = bannerObj;5 this.bigObj = bigObj;6 7 let innerIframeId = "";8 let outerIframeId = "";9 if(window.parent && window.parent.parent) {10 if(mode != "prod") {11 mode = "dev";12 innerIframeId = "banner0Inner";13 outerIframeId = "banner0";14 } else {15 innerIframeId = window.parent.innerFrameId;16 outerIframeId = window.parent.parentId;17 }18 var innerIframe = window.parent.document.getElementById(innerIframeId);19 var outerIframe = window.parent.parent.document.getElementById(outerIframeId);20 if(innerIframe && outerIframe) {21 this.innerIframeId = innerIframeId;22 this.outerIframeId = outerIframeId;23 this.innerIframe = innerIframe;24 this.outerIframe = outerIframe;25 this.innerIframe.style.height ="90px";26 this.outerIframe.style.height ="90px";27 //注å
¥parentåparent.parentæéçcss28 this.injectCssToParents();29 //å¤çouterIframeçancestorå
ç´ 30 this.dealwithAncestors();31 }32 33 }34 35 this.pushDownToOpen = this.pushDownToOpen.bind(this);36 this.pullUpToClose = this.pullUpToClose.bind(this);37 this.autoOpen();38 this.clickToOpen();39 this.clickToClose();40 }41 injectCssToParents() {42 if(!(window.parent && window.parent.parent)){43 return;44 }45 const innerIframeWindowHead = window.parent.document.getElementsByTagName("head")[0];46 console.log(innerIframeWindowHead);47 const outerIframeWindowHead = window.parent.parent.document.getElementsByTagName("head")[0];48 console.log(outerIframeWindowHead);49 const switchStyle = document.createElement("style");50 switchStyle.innerHTML = ".pullup-close{-webkit-animation:shrinkToClose 1s linear;-moz-animation:shrinkToClose 1s linear;-o-animation:shrinkToClose 1s linear;animation:shrinkToClose 1s linear}.pushdown-open{-webkit-animation:pushdownToOpen 1s linear;-moz-animation:pushdownToOpen 1s linear;-o-animation:pushdownToOpen 1s linear;animation:pushdownToOpen 1s linear}@-webkit-keyframes shrinkToClose{from{width:969px;height:auto}to{width:969px;height:90px}}@-moz-keyframes shrinkToClose{from{width:969px;height:auto}to{width:969px;height:90px}}@-o-keyframes shrinkToClose{from{width:969px;height:auto}to{width:969px;height:90px}}@keyframes shrinkToClose{from{width:969px;height:auto}to{width:969px;height:90px}}@-webkit-keyframes pushdownToOpen{from{width:969px;height:90px}to{width:969px;height:auto}}@-moz-keyframes pushdownToOpen{from{width:969px;height:90px}to{width:969px;height:auto}}@-o-keyframes pushdownToOpen{from{width:969px;height:90px}to{width:969px;height:auto}}@keyframes pushdownToOpen{from{width:969px;height:90px}to{width:969px;height:auto}}";51 const switchStyleCopy = switchStyle.cloneNode(true);52 innerIframeWindowHead.appendChild(switchStyle);53 outerIframeWindowHead.appendChild(switchStyleCopy);54 console.log(innerIframeWindowHead);55 console.log(outerIframeWindowHead);56 }57 58 dealwithAncestors() {59 if(!(this.outerIframeId && this.outerIframe && this.outerIframe.parentNode )) {60 return;61 }62 63 // å°ä½äºouterIframeçç¶å
ç´ ä¸çâ广åâåæ ·ç§»å¨å°å·¦ä¸è§64 const contentDivId = this.outerIframeId+'content';65 const contentDiv = this.outerIframe.parentNode;//outerIframeçç¶å
ç´ class="banner-content" 66 contentDiv.id = contentDivId;67 if(window.parent.parent.document.styleSheets[0]) {68 window.parent.parent.document.styleSheets[0].insertRule('#' + contentDivId + ':before { right: auto; left:0;}', 0);69 }70 //å°outerIframeçä¸ç³»åå±çº§çç¥å
å
ç´ é«åº¦é½è®¾ç½®ä¸º"auto"71 let ancestorDiv = contentDiv;72 const ancestorBody = window.parent.parent.document.body;73 while(ancestorDiv!=ancestorBody) {74 ancestorDiv.style.height = "auto";75 if(ancestorDiv.parentNode) {76 ancestorDiv = ancestorDiv.parentNode;77 }78 }79 }80 pushDownToOpen() {81 console.log("pushDown");82 const bigPicSection = this.bigObj.root;83 const bannerPicSection = this.bannerObj.root;84 bigPicSection.classList.remove("pullup-close");85 bigPicSection.classList.add("pushdown-open");86 bigPicSection.style.height ="90px";87 bigPicSection.style.display="block";88 bigPicSection.style.display="block";89 90 if(this.innerIframe && this.outerIframe) {91 this.innerIframe.style.height ="90px";92 this.outerIframe.style.height ="90px";93 this.innerIframe.classList.remove("pullup-close");94 this.innerIframe.classList.add("pushdown-open");95 this.outerIframe.classList.remove("pullup-close");96 this.outerIframe.classList.add("pushdown-open");97 }98 99 bannerPicSection.style.display="none";100 101 setTimeout(() => {102 // bigPicSection.style.display="none";103 bigPicSection.classList.remove("pushdown-open");104 bigPicSection.style.height= "400px";105 106 if(this.innerIframe && this.outerIframe) {107 this.innerIframe.style.height = "400px";108 this.outerIframe.style.height = "400px";109 this.innerIframe.classList.remove("pushdown-open");110 this.outerIframe.classList.remove("pushdown-open");111 }112 113 }, 1000);114 115 }116 117 pullUpToClose() {118 this.bigObj.root.classList.add("pullup-close");119 if(this.innerIframe && this.outerIframe) {120 this.innerIframe.style.height = "400px";121 this.outerIframe.style.height = "400px";122 this.innerIframe.classList.remove("pushdown-open");123 this.innerIframe.classList.add("pullup-close");124 this.outerIframe.classList.remove("pushdown-open");125 this.outerIframe.classList.add("pullup-close");126 }127 128 setTimeout(()=>{129 this.bigObj.root.style.display="none";130 this.bigObj.root.classList.remove("pullup-close");131 132 this.bannerObj.root.style.display="block";133 if(this.innerIframe && this.outerIframe) {134 this.innerIframe.style.height ="90px";135 this.outerIframe.style.height ="90px";136 this.innerIframe.classList.remove("pullup-close");137 this.outerIframe.classList.remove("pullup-close");138 }139 140 },1000);141 142}143 144 autoOpen() {145 let userCookie = docCookies.getItem("pushdownAd");146 console.log("pushdownAd="+userCookie);147 if(!userCookie) {148 window.addEventListener("load", this.pushDownToOpen, false);149 //èªå¨ä¸æ¨æ©å±å设置cookie150 let expiredTime = new Date();151 expiredTime.setTime(expiredTime.getTime()+24*60*60*1000);152 docCookies.setItem("pushdownAd","hasLoaded",expiredTime);153 }154 }155 clickToOpen() {156 this.bannerObj.open.addEventListener("click",this.pushDownToOpen,false);157 }158 clickToClose() {159 const close = this.bigObj.close;160 161 close.addEventListener("click", this.pullUpToClose, false)162 }163 164}...
commands.js
Source:commands.js
1// ***********************************************2// This example commands.js shows you how to3// create various custom commands and overwrite4// existing commands.5//6// For more comprehensive examples of custom7// commands please read more here:8// https://on.cypress.io/custom-commands9// ***********************************************10//11//12// -- This is a parent command --13// Cypress.Commands.add("login", (email, password) => { ... })14//15//16// -- This is a child command --17// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })18//19//20// -- This is a dual command --21// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })22//23//24// -- This will overwrite an existing command --25// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })26//import 'cypress-wait-until';27//import 'cypress-iframe'28//import 'cypress-mailosaur'29//require('cypress-downloadfile/lib/downloadFileCommand')30//require('@4tw/cypress-drag-drop')31Cypress.Commands.add('waitForStripeIdealIframe', callback => {32 const outerIframe = cy33 .get('iframe[name*="__privateStripeFrame"]')34 .its("0.contentDocument.body")35 .should("not.be.empty")36 .then(cy.wrap).click()37 38 // const innerIframe = outerIframe39 // .find('iframe[name*="__privateStripeFrame"]')40 // .its("0.contentDocument.body")41 // .should("not.be.empty")42 // .then(cy.wrap)43 // return innerIframe44});45Cypress.Commands.add('getBySel', (selector, ...args) => {46 return cy.get(`[data-test=${selector}]`, ...args)47})48Cypress.Commands.add('getBySelLike', (selector, ...args) => {49 return cy.get(`[data-test*=${selector}]`, ...args)50})51Cypress.Commands.add('waitForStripe3dIframeMember', callback => {52 const outerIframe = cy53 .get('iframe[name*="__privateStripeFrame"]')54 .its("0.contentDocument.body")55 .should("not.be.empty")56 .then(cy.wrap)57 const innerIframe = outerIframe58 .find('iframe[id=challengeFrame]')59 .its("0.contentDocument.body")60 .should("not.be.empty")61 .and('include.text','Politicalnetworks')62 .then(cy.wrap)63 return innerIframe64});65Cypress.Commands.add('waitForStripe3dIframe', callback => {66 const outerIframe = cy67 .get('iframe[name*="__privateStripeFrame"]')68 .its("0.contentDocument.body")69 .should("not.be.empty")70 .then(cy.wrap)71 72 const innerIframe = outerIframe73 .find('iframe[id*="challengeFrame"]')74 .its("0.contentDocument.body")75 .should("not.be.empty")76 .then(cy.wrap)77 78 return innerIframe79 });80 Cypress.Commands.add('failForStripe3dIframe', callback => {81 const outerIframe = cy82 .get('iframe[name*="__privateStripeFrame"]')83 .its("0.contentDocument.body")84 .should("not.be.empty")85 .then(cy.wrap)86 87 const innerIframe = outerIframe88 .find('iframe[id=challengeFrame]')89 .its("0.contentDocument.body")90 .should("not.be.empty")91 .then(cy.wrap)92 93 return innerIframe94 });95 Cypress.Commands.add('waitForStripe3DIframe', callback => {96 const outerIframe = cy97 .get('iframe[name*="__privateStripeFrame"]')98 .its("0.contentDocument.body")99 .should("not.be.empty")100 .then(cy.wrap)101 102 const innerIframe = outerIframe103 .find('iframe[id=challengeFrame]')104 .its("0.contentDocument.body")105 .should("not.be.empty")106 .then(cy.wrap)107 108 return innerIframe109 .find("iframe[name=acsFrame]")110 .its("0.contentDocument.body")111 .should("not.be.empty")112 .then(cy.wrap)113 });114 Cypress.Commands.add('failForStripe3DIframe', callback => {115 const outerIframe = cy116 .get('iframe[name*="__privateStripeFrame"]')117 .its("0.contentDocument.body")118 .should("not.be.empty")119 .then(cy.wrap)120 121 const innerIframe = outerIframe122 .find('iframe[id=challengeFrame]')123 .its("0.contentDocument.body")124 .should("not.be.empty")125 .then(cy.wrap)126 127 return innerIframe128 .find("iframe[name=acsFrame]")129 .its("0.contentDocument.body")130 .should("not.be.empty")131 .then(cy.wrap)132 });133const getStripeSCAIframe = () => {134 const outerIframe = cy135 .get('iframe[src*="https://js.stripe.com/v3/authorize"]')136 .its("0.contentDocument.body")137 .should("not.be.empty")138 .then(cy.wrap)139 140 const innerIframe = outerIframe141 .find('iframe[src*="https://hooks.stripe.com"]')142 .its("0.contentDocument.body")143 .should("not.be.empty")144 .then(cy.wrap)145 146 return innerIframe147 .find('button', 'Complete').click()148 // .its("0.contentDocument.body")149 // .should("not.be.empty")150 // .then(cy.wrap)151 }152Cypress.Commands.add(153 'iframeLoaded',154 {prevSubject: 'element'},155 ($iframe) => {156 const contentWindow = $iframe.prop('contentWindow');157 return new Promise(resolve => {158 if (159 contentWindow &&160 contentWindow.document.readyState === 'complete'161 ) {162 resolve(contentWindow)163 } else {164 $iframe.on('load', () => {165 resolve(contentWindow)166 })167 }168 })169 });170Cypress.Commands.add(171 'getInDocument',172 {prevSubject: 'document'},173 (document, selector) => Cypress.$(selector, document)174)175Cypress.Commands.add(176 'getWithinIframe',177 (targetElement) => cy.get('iframe').iframeLoaded().its('document').getInDocument(targetElement)178)179Cypress.Commands.add('getIframeBody', () => {180 // get the iframe > document > body181 // and retry until the body element is not empty182 cy.log('getIframeBody')183 return cy184 .get('iframe[data-cy="the-frame"]', { log: false })185 .its('0.contentDocument.body', { log: false }).should('not.be.empty')186 // wraps "body" DOM element to allow187 // chaining more Cypress commands, like ".find(...)"188 // https://on.cypress.io/wrap189 .then((body) => cy.wrap(body, { log: false }))190 })191 Cypress.Commands.add('isIFrameReady', () => {192 return cy.window().then({ timeout: 10 * 1000 }, window => {193 return new Cypress.Promise(resolve => {194 window.addEventListener('message', e => {195 const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data196 197 if (data.code === 'Ready') {198 resolve()199 }200 })201 })202 })203 })204 Cypress.Commands.add('iframe', { prevSubject: 'element' }, $iframe => {205 return new Cypress.Promise(resolve => {206 $iframe.on('load', () => {207 resolve($iframe.contents().find('body'));208 });209 });210});211Cypress.Commands.add(212 'selectNth',213 { prevSubject: 'element' },214 (subject, pos) => {215 cy.wrap(subject)216 .children('option')217 .eq(pos)218 .then(e => {219 cy.wrap(subject).select(e.val())220 })221 }222)223Cypress.Commands.add("clickRecaptcha", () => {224 cy.window().then(win => {225 win.document226 .querySelector("iframe[src*='recaptcha']")227 .contentDocument.getElementById("recaptcha-token")228 .click();229 });...
burst.js
Source:burst.js
1var QMBurst = function () {2 this.waitForAWhile(5);3 // Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.4 var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";5 var eventer = window[eventMethod];6 // Now...7 // if8 // "attachEvent", then we need to select "onmessage" as the event.9 // if10 // "addEventListener", then we need to select "message" as the event11 var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";12 var self = this;13 eventer(messageEvent, function (e, origin) {14 if (e.origin == 'https://quickmit.net' || e.origin == 'http://dev.quickmit.net') {15 try {16 //Some clients other than ours may17 //fire this event. It should be ignored.18 var params = JSON.parse(e.data);19 } catch (e) {}20 if (params) {21 if (params.method == "resizeOuterIframe") {22 self.resizeOuterIframe(params.height);23 //self.breakout();24 } else if (params.method == "initialize") {25 self.waitForAWhile(0);26 //If this initialized first and quickmit lags.27 self.initQuickmitFrame();28 } else if (params.method == "relocate") {29 window.location.href = params.url30 } else if (params.method == "breakout") {31 self.breakout(params.height, params.heightOfTargetNode);32 }33 //Use for login.34 // if(params.method = "reload") {35 // location.reload();36 // }37 }38 }39 }, false);40 this.initQuickmitFrame();41};42QMBurst.prototype.getQuickmitFrame = function () {43 var outerIFrame = document.getElementById("quickMitOuterIFrame");44 return outerIFrame;45};46QMBurst.prototype.resizeOuterIframe = function (height) {47 var outerIFrame = this.getQuickmitFrame();48 outerIFrame.style.height = (height) + "px";49 //console.log("Resizing " + height);50};51QMBurst.prototype.breakout = function (height, heightOfTargetNode) {52 var parent = this.getQuickmitFrame();53 for (var j = 0; j < height; j++) {54 var parent = parent.parentNode;55 if(parent) {56 console.log("Crawling up nodes. id: '" + parent.id + ": " + j);57 }58 }59 if(heightOfTargetNode) {60 var target = this.getQuickmitFrame();61 for (var j = 0; j < heightOfTargetNode; j++) {62 var target = parent.parentNode;63 }64 }65 this.animateFullWidth(parent, target);66};67QMBurst.prototype.animateFullWidth = function (node, targetNode) {68 if(node.parentNode) {69 var targetWidth = node.parentNode.clientWidth;70 var clientWidth = node.clientWidth;71 var newWidth = clientWidth;72 function doGrow() {73 newWidth += 20;74 newWidth = Math.min(targetWidth, newWidth);75 var nodeToResize = targetNode || node;76 node.style.width = newWidth + 'px';77 if (newWidth < targetWidth) {78 setTimeout(doGrow, 20);79 }80 }81 doGrow();82 }83};84// Listen to message from child IFrame window85QMBurst.prototype.initQuickmitFrame = function () {86 var outerIFrame = this.getQuickmitFrame();87 var params = {88 method: "initialize",89 data: {90 queryString: window.location.search91 }92 };93 outerIFrame.contentWindow.postMessage(JSON.stringify(params), "*");94 var xhr = new XMLHttpRequest();95 setInterval(function(){96 xhr.onload = function(){97 // console.log(this.responseText + " == " + QMBurst.version);98 if(!QMBurst.pendingReload && this.responseText > QMBurst.version) {99 //console.log("Version is out of date");100 var result = confirm("A new version of the application system has been installed. " +101 "If you have any unsaved changes, click Cancel to dismiss this dialog. " +102 "Then save any unsaved changes and refresh your browser. " +103 "This application will refresh automatically 3 minutes after you click Cancel. Click OK to refresh now.");104 if (result == true) {105 window.location.href = window.location.href106 } else {107 QMBurst.pendingReload = true; //avoid notifying the users more than once.108 setTimeout(function(){window.location.href = window.location.href}, 3 * 60 * 1000);109 }110 }111 };112 xhr.open("GET", "https://quickmit.net/clients/installation/development/php/services/versionService.php?polling=", false);113 xhr.send();114 }, 3 * 60 * 1000);//every 3 minutes.115};116QMBurst.prototype.waitForAWhile = function (duration) {117 var xhr = new XMLHttpRequest();118 //xhr.open("GET", "http://quickmit.net/wait.php?duration=" + duration, false);119 //xhr.send();120};121var quickmitBurst = new QMBurst();122//If quickmit initialized first123//this is late to the game.124//This is the cache busting mechanism.125//Deploy this file first with the newest version.126//Then, change the SERVER_VERSION in config.php to match.127//All users will then have 3 minutes to reload their browser or it will be done for them....
Using AI Code Generation
1});2}, function() {3});4outerIframe(url, width, height, callback, errorCallback)5}, function() {6});7outerIframeReset(callback, errorCallback)8outerIframeReset(function() {9}, function() {10});11innerIframe(url, width, height, callback, errorCallback)12}, function() {13});14innerIframeReset(callback, errorCallback)
Using AI Code Generation
1var wptDriver = require('wptdriver');2wptDriver.outerIframe(0, function() {3 console.log("I am now in the outer iframe");4});5var wptDriver = require('wptdriver');6wptDriver.innerIframe(0, function() {7 console.log("I am now in the inner iframe");8});9var wptDriver = require('wptdriver');10wptDriver.switchToDefault(function() {11 console.log("I am now in the default content");12});13var wptDriver = require('wptdriver');14wptDriver.switchToFrame(0, function() {15 console.log("I am now in the frame");16});17var wptDriver = require('wptdriver');18wptDriver.switchToWindow(0, function() {19 console.log("I am now in the window");20});21var wptDriver = require('wptdriver');22wptDriver.switchToParentWindow(function() {23 console.log("I am now in the parent window");24});25var wptDriver = require('wptdriver');26wptDriver.switchToAlert(function() {27 console.log("I am now in the alert window");28});29var wptDriver = require('wptdriver');30wptDriver.switchToDefaultWindow(function() {31 console.log("I am now in the default window");32});33var wptDriver = require('wptdriver');34wptDriver.switchToDefaultContent(function() {35 console.log("I am now in the default content");36});37var wptDriver = require('wptdriver');
Using AI Code Generation
1var wpt = require('webpagetest');2var test = wpt('www.webpagetest.org');3}, function(err, data) {4 if (err) {5 console.error(err);6 } else {7 console.log(data);8 }9});10- data: (object) The test results11- statusCode: (number) The HTTP status code12- statusText: (string) The HTTP status text13- data: (object) The test results14- statusCode: (number) The HTTP status code15- statusText: (string) The HTTP status text16- statusCode: (number) The HTTP status code17- statusText: (string) The HTTP status text18- data: (object) The test results19- statusCode: (number) The HTTP status code20- statusText: (string) The HTTP status text21- data: (object) The test results22- statusCode: (number) The HTTP status code23- statusText: (string) The HTTP status text24- data: (object) The test results25- statusCode: (number) The HTTP status code26- statusText: (string) The HTTP status text27- data: (object) The test results28- statusCode: (number) The HTTP status code29- statusText: (string) The HTTP status text30- data: (object) The test results31- statusCode: (number) The HTTP status code32- statusText: (string) The HTTP status text33- data: (object) The test results34- statusCode: (number) The HTTP status code35- statusText: (string) The HTTP status text36- data: (object) The test results
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 wpt 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?
