KaneAI - World’s First E2E Software Testing Agent.Book a Demo 
How to use switchToParentFrame method in Webdriverio
Best JavaScript code snippet using webdriverio-monorepo
pattern.js
Source:pattern.js 
...12 await (await $('.sg-pop[data-patternpartial="viewall"]')).click();13 await browser.switchToFrame(sgViewport);14 await (await $('#sg-pattern-toggle-annotations-components-region')).click();15 await browser.pause(700);16 await browser.switchToParentFrame();17 expect((await sgVpWrap.getCSSProperty('padding-bottom')).value).to.equal('322px');18 expect((await sgViewContainer.getCSSProperty('bottom')).value).to.equal('0px');19 expect(await sgAnnotations.getHTML(false)).to.equal(`<div id="annotation-1" class="sg-annotation">20<h2>1. Navigation</h2>21<div><p>Navigation for responsive web experiences can be tricky. Large navigation menus 22are typical on desktop sites, but mobile screen sizes don't give us the luxury 23of space. We're dealing with this situation by creating a simple menu anchor 24that toggles the main navigation on small screens. Once the screen size is large 25enough to accommodate the nav, we show the main navigation links and hide the 26menu anchor.</p>27</div>28</div>`);29 await browser.switchToFrame(sgViewport);30 await (await $('#sg-pattern-toggle-annotations-components-region')).click();31 await browser.pause(700);32 await browser.switchToParentFrame();33 expect((await sgVpWrap.getCSSProperty('padding-bottom')).value).to.equal('0px');34 expect((await sgViewContainer.getCSSProperty('bottom')).value).to.equal('636px');35 });36 });37 describe('Mousetrap', () => {38 before(async () => {39 await browser.setWindowSize(1024, 768);40 });41 it('"ctrl+shift+a" toggles annotations viewer', async () => {42 const sgViewport = await $('#sg-viewport');43 const sgVpWrap = await $('#sg-vp-wrap');44 const sgViewContainer = await $('#sg-view-container');45 const sgAnnotations = await $('#sg-annotations');46 await browser.switchToFrame(sgViewport);47 await browser.keys(['Control', 'Shift', 'a']);48 await browser.pause(700);49 await browser.switchToParentFrame();50 expect((await sgVpWrap.getCSSProperty('padding-bottom')).value).to.equal('322px');51 expect((await sgViewContainer.getCSSProperty('bottom')).value).to.equal('0px');52 expect(await sgAnnotations.getHTML(false)).to.equal(`<div id="annotation-1" class="sg-annotation">53<h2>1. Navigation</h2>54<div><p>Navigation for responsive web experiences can be tricky. Large navigation menus 55are typical on desktop sites, but mobile screen sizes don't give us the luxury 56of space. We're dealing with this situation by creating a simple menu anchor 57that toggles the main navigation on small screens. Once the screen size is large 58enough to accommodate the nav, we show the main navigation links and hide the 59menu anchor.</p>60</div>61</div>`);62 await browser.switchToFrame(sgViewport);63 await browser.keys(['Control', 'Shift', 'a']);64 await browser.pause(700);65 await browser.switchToParentFrame();66 expect((await sgVpWrap.getCSSProperty('padding-bottom')).value).to.equal('0px');67 expect((await sgViewContainer.getCSSProperty('bottom')).value).to.equal('636px');68 });69 });70 });71 describe('code-viewer.js', () => {72 describe('click', () => {73 before(async () => {74 await browser.setWindowSize(1024, 768);75 });76 it('viewall code viewer button toggles code viewer', async () => {77 const sgViewport = await $('#sg-viewport');78 const sgVpWrap = await $('#sg-vp-wrap');79 const sgViewContainer = await $('#sg-view-container');80 const sgPatternToggleCodeComponentsRegion = await $('#sg-pattern-toggle-code-components-region');81 await (await $('.sg-pop[data-patternpartial="viewall"]')).click();82 await browser.switchToFrame(sgViewport);83 await sgPatternToggleCodeComponentsRegion.click();84 await browser.pause(700);85 await browser.switchToParentFrame();86 expect((await sgVpWrap.getCSSProperty('padding-bottom')).value).to.equal('322px');87 expect((await sgViewContainer.getCSSProperty('bottom')).value).to.equal('0px');88 expect(await sgViewContainer.getAttribute('class')).to.have.string('anim-ready');89 await browser.switchToFrame(sgViewport);90 await sgPatternToggleCodeComponentsRegion.click();91 await browser.pause(700);92 await browser.switchToParentFrame();93 expect((await sgVpWrap.getCSSProperty('padding-bottom')).value).to.equal('0px');94 expect((await sgViewContainer.getCSSProperty('bottom')).value).to.equal('636px');95 expect(await sgViewContainer.getAttribute('class')).to.not.have.string('anim-ready');96 });97 });98 describe('Mousetrap', () => {99 before(async () => {100 browser.setWindowSize(1024, 768);101 });102 it('"ctrl+shift+c" toggles code viewer', async () => {103 const sgViewport = await $('#sg-viewport');104 const sgVpWrap = await $('#sg-vp-wrap');105 const sgViewContainer = await $('#sg-view-container');106 await browser.switchToFrame(sgViewport);107 await browser.keys(['Control', 'Shift', 'c']);108 await browser.pause(700);109 await browser.switchToParentFrame();110 expect((await sgVpWrap.getCSSProperty('padding-bottom')).value).to.equal('322px');111 expect((await sgViewContainer.getCSSProperty('bottom')).value).to.equal('0px');112 expect(await sgViewContainer.getAttribute('class')).to.have.string('anim-ready');113 await browser.switchToFrame(sgViewport);114 await browser.keys(['Control', 'Shift', 'c']);115 await browser.pause(700);116 await browser.switchToParentFrame();117 expect((await sgVpWrap.getCSSProperty('padding-bottom')).value).to.equal('0px');118 expect((await sgViewContainer.getCSSProperty('bottom')).value).to.equal('636px');119 expect(await sgViewContainer.getAttribute('class')).to.not.have.string('anim-ready');120 });121 });122 });123 /* eslint-disable max-len */124 /* eslint-disable no-useless-escape */125 describe('html-scraper-ajax.js', () => {126 before(async () => {127 await browser.setWindowSize(1024, 768);128 });129 it('pre-import submit button posts correctly', async () => {130 const sgNavScrape = await $('.sg-nav-scrape');131 const sgViewport = await $('#sg-viewport');132 const nameUrl = await $('[name="url"]');133 const nameSelectorRaw = await $('[name="selector_raw"]');134 await (await sgNavScrape.$('.sg-acc-handle')).click();135 await browser.pause(100);136 await (await sgNavScrape.$('.sg-pop')).click();137 await browser.switchToFrame(sgViewport);138 await nameUrl.click();139 await nameUrl.setValue('/patterns/04-pages-00-homepage/04-pages-00-homepage.html');140 await nameSelectorRaw.click();141 await nameSelectorRaw.setValue('p');142 await (await $('[name="submit_targeter"]')).click();143 await browser.pause(100);144 expect(await (await $('html')).getHTML(false)).to.equal(`<head>145 <title id="title">Fepper HTML Scraper</title>146 <meta charset="utf-8">147 <!-- Disable cache -->148 <meta http-equiv="cache-control" content="max-age=0">149 <meta http-equiv="cache-control" content="no-cache">150 <meta http-equiv="expires" content="0">151 <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">152 <meta http-equiv="pragma" content="no-cache">153 154 <link rel="stylesheet" href="/webserved/pattern.css">155 <link rel="stylesheet" href="/_styles/bld/style.css">156 <link rel="stylesheet" href="/webserved/html-scraper.css">157 <script src="/node_modules/mousetrap/mousetrap.min.js"></script>158 <script src="/annotations/annotations.js"></script>159 <script src="/_scripts/src/variables.styl" type="text/javascript"></script>160 </head>161 <body class="text ">162 <main id="fepper-html-scraper" class="">163 <div id="message" class="message "></div>164 <div id="load-anim">165 <div></div><div></div><div></div><div></div>166 </div>167 <h1 id="scraper__heading">Fepper HTML Scraper</h1>168 <div id="scraper__reviewer"><p>Fepper Base</p><br>169 </div>170 <h3>Does this HTML look right?</h3>171 <form id="scraper__importer" action="/html-scraper" method="post" name="importer">172 <div>Yes, import into Fepper.</div>173 <label for="filename">Enter a filename to save this under (extension not necessary):</label>174 <input name="filename" type="text" value="">175 <input name="url" type="hidden" value="/patterns/04-pages-00-homepage/04-pages-00-homepage.html">176 <input name="selector_raw" type="hidden" value="p">177 <textarea name="html2json"></textarea>178 <textarea name="mustache"><p>{{ p }}</p>179 </textarea>180 <textarea name="json">{181 "p": "Fepper Base"182}183 </textarea>184 <input id="scraper__importer__submit" name="submit_importer" type="submit" value="Submit">185 </form>186 <h3>Otherwise, correct the URL and selector and submit again.</h3>187 <form id="scraper__targeter" action="/html-scraper" method="post" name="targeter">188 <div>189 <label for="url">URL:</label>190 <input name="url" type="text" value="/patterns/04-pages-00-homepage/04-pages-00-homepage.html">191 </div>192 <div>193 <label for="selector_raw">Selector:</label>194 <input name="selector_raw" type="text" value="p">195 <input name="selector" type="hidden" value="p">196 <input name="index" type="hidden" value="">197 </div>198 <textarea name="html2json"></textarea>199 <input id="scraper__targeter__submit" name="submit_targeter" type="submit" value="Submit">200 <button id="help-hide">Hide</button><button id="help-show">Help</button>201 </form>202 <div id="help-text">203 <p></p>204 <p>Use this tool to scrape and import .mustache templates and .json data files from actual web pages, preferably the actual backend CMS that Fepper is prototyping for. Simply enter the URL of the page you wish to scrape. Then, enter the CSS selector you wish to target (prepended with "#" for IDs and "." for classes). Classnames and tagnames may be appended with array index notation ([n]). Otherwise, the Scraper will scrape all elements of that class or tag sequentially. Such a loosely targeted scrape will save many of the targeted fields to the .json file, but will only save the first instance of the target to a .mustache template.</p>205 <p>Upon submit, you should be able to review the scraped output on the subsequent page. If the output looks correct, enter a filename and submit again. The Scraper will save .mustache and .json files by that name in your patterns\' scrape directory, also viewable under the Scrape menu of the toolbar.</p>206 </div>207 <iframe id="scraper__stage" sandbox="allow-same-origin allow-scripts"></iframe>208 <script src="/webserved/html-scraper-dhtml.js"></script>209 </main>210 211 212</body>`);213 });214 it('import-form submit button posts correctly', async () => {215 const sgNavScrape = await $('.sg-nav-scrape');216 const sgViewport = await $('#sg-viewport');217 const nameUrl = await $('[name="url"]');218 const nameSelectorRaw = await $('[name="selector_raw"]');219 const nameFilename = await $('[name="filename"]');220 await (await sgNavScrape.$('.sg-acc-handle')).click();221 await browser.pause(100);222 await (await sgNavScrape.$('.sg-pop')).click();223 await browser.switchToFrame(sgViewport);224 await nameUrl.click();225 await nameUrl.setValue('/patterns/04-pages-00-homepage/04-pages-00-homepage.html');226 await nameSelectorRaw.click();227 await nameSelectorRaw.setValue('p');228 await (await $('[name="submit_targeter"]')).click();229 await browser.pause(100);230 await nameFilename.click();231 await nameFilename.setValue('test');232 await (await $('[name="submit_importer"]')).click();233 await browser.pause(100);234 expect(await (await $('html')).getHTML(false)).to.equal(`<head>235 <title id="title">Fepper HTML Scraper</title>236 <meta charset="utf-8">237 <!-- Disable cache -->238 <meta http-equiv="cache-control" content="max-age=0">239 <meta http-equiv="cache-control" content="no-cache">240 <meta http-equiv="expires" content="0">241 <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">242 <meta http-equiv="pragma" content="no-cache">243 244 <link rel="stylesheet" href="/webserved/pattern.css">245 <link rel="stylesheet" href="/_styles/bld/style.css">246 <script src="/node_modules/mousetrap/mousetrap.min.js"></script>247 <script src="/annotations/annotations.js"></script>248 <script src="/_scripts/src/variables.styl" type="text/javascript"></script>249 <link rel="stylesheet" href="/webserved/html-scraper.css"></head>250 <body class="text ">251 <main id="fepper-html-scraper" class="">252 <div id="message" class="message success">SUCCESS! Refresh the browser to check that your template appears under the "Scrape" menu.</div>253 <script src="/webserved/html-scraper-ajax.js"></script>254 <div id="load-anim">255 <div></div><div></div><div></div><div></div>256 </div><h1 id="scraper__heading">Fepper HTML Scraper</h1><form id="scraper__targeter" action="/html-scraper" method="post" name="targeter">257 <div>258 <label for="url">URL:</label>259 <input name="url" type="text" value="">260 </div>261 <div>262 <label for="selector_raw">Selector:</label>263 <input name="selector_raw" type="text" value="">264 <input name="selector" type="hidden" value="">265 <input name="index" type="hidden" value="">266 </div>267 <textarea name="html2json"></textarea>268 <input id="scraper__targeter__submit" name="submit_targeter" type="submit" value="Submit">269 <button id="help-hide">Hide</button><button id="help-show">Help</button>270 </form><script src="/webserved/html-scraper-dhtml.js"></script><div id="help-text">271 <p></p>272 <p>Use this tool to scrape and import .mustache templates and .json data files from actual web pages, preferably the actual backend CMS that Fepper is prototyping for. Simply enter the URL of the page you wish to scrape. Then, enter the CSS selector you wish to target (prepended with "#" for IDs and "." for classes). Classnames and tagnames may be appended with array index notation ([n]). Otherwise, the Scraper will scrape all elements of that class or tag sequentially. Such a loosely targeted scrape will save many of the targeted fields to the .json file, but will only save the first instance of the target to a .mustache template.</p>273 <p>Upon submit, you should be able to review the scraped output on the subsequent page. If the output looks correct, enter a filename and submit again. The Scraper will save .mustache and .json files by that name in your patterns\' scrape directory, also viewable under the Scrape menu of the toolbar.</p>274 </div><iframe id="scraper__stage" sandbox="allow-same-origin allow-scripts"></iframe></main>275 276 277</body>`);278 });279 it('post-import targeter submit button posts correctly', async () => {280 const sgNavScrape = await $('.sg-nav-scrape');281 const sgViewport = await $('#sg-viewport');282 const nameUrl = await $('[name="url"]');283 const nameSelectorRaw = await $('[name="selector_raw"]');284 const scraperTargeter = await $('#scraper__targeter');285 await (await sgNavScrape.$('.sg-acc-handle')).click();286 await browser.pause(100);287 await (await sgNavScrape.$('.sg-pop')).click();288 await browser.switchToFrame(sgViewport);289 await nameUrl.click();290 await nameUrl.setValue('/patterns/04-pages-00-homepage/04-pages-00-homepage.html');291 await nameSelectorRaw.click();292 await nameSelectorRaw.setValue('p');293 await (await $('[name="submit_targeter"]')).click();294 await browser.pause(100);295 await (await scraperTargeter.$('[name="selector_raw"]')).setValue('h1');296 await (await scraperTargeter.$('[name="submit_targeter"]')).click();297 await browser.pause(100);298 expect(await (await $('html')).getHTML(false)).to.equal(`<head>299 <title id="title">Fepper HTML Scraper</title>300 <meta charset="utf-8">301 <!-- Disable cache -->302 <meta http-equiv="cache-control" content="max-age=0">303 <meta http-equiv="cache-control" content="no-cache">304 <meta http-equiv="expires" content="0">305 <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">306 <meta http-equiv="pragma" content="no-cache">307 308 <link rel="stylesheet" href="/webserved/pattern.css">309 <link rel="stylesheet" href="/_styles/bld/style.css">310 <link rel="stylesheet" href="/webserved/html-scraper.css">311 <script src="/node_modules/mousetrap/mousetrap.min.js"></script>312 <script src="/annotations/annotations.js"></script>313 <script src="/_scripts/src/variables.styl" type="text/javascript"></script>314 </head>315 <body class="text ">316 <main id="fepper-html-scraper" class="">317 <div id="message" class="message "></div>318 <div id="load-anim">319 <div></div><div></div><div></div><div></div>320 </div>321 <h1 id="scraper__heading">Fepper HTML Scraper</h1>322 <div id="scraper__reviewer"><p>Fepper Base</p><br>323 </div>324 <h3>Does this HTML look right?</h3>325 <form id="scraper__importer" action="/html-scraper" method="post" name="importer">326 <div>Yes, import into Fepper.</div>327 <label for="filename">Enter a filename to save this under (extension not necessary):</label>328 <input name="filename" type="text" value="">329 <input name="url" type="hidden" value="/patterns/04-pages-00-homepage/04-pages-00-homepage.html">330 <input name="selector_raw" type="hidden" value="h1">331 <textarea name="html2json"></textarea>332 <textarea name="mustache"><h1>{{ h1 }}</h1>333 </textarea>334 <textarea name="json">{335 "p": "Fepper Base"336}337 </textarea>338 <input id="scraper__importer__submit" name="submit_importer" type="submit" value="Submit">339 </form>340 <h3>Otherwise, correct the URL and selector and submit again.</h3>341 <form id="scraper__targeter" action="/html-scraper" method="post" name="targeter">342 <div>343 <label for="url">URL:</label>344 <input name="url" type="text" value="/patterns/04-pages-00-homepage/04-pages-00-homepage.html">345 </div>346 <div>347 <label for="selector_raw">Selector:</label>348 <input name="selector_raw" type="text" value="h1">349 <input name="selector" type="hidden" value="h1">350 <input name="index" type="hidden" value="">351 </div>352 <textarea name="html2json"></textarea>353 <input id="scraper__targeter__submit" name="submit_targeter" type="submit" value="Submit">354 <button id="help-hide">Hide</button><button id="help-show">Help</button>355 </form>356 <div id="help-text">357 <p></p>358 <p>Use this tool to scrape and import .mustache templates and .json data files from actual web pages, preferably the actual backend CMS that Fepper is prototyping for. Simply enter the URL of the page you wish to scrape. Then, enter the CSS selector you wish to target (prepended with "#" for IDs and "." for classes). Classnames and tagnames may be appended with array index notation ([n]). Otherwise, the Scraper will scrape all elements of that class or tag sequentially. Such a loosely targeted scrape will save many of the targeted fields to the .json file, but will only save the first instance of the target to a .mustache template.</p>359 <p>Upon submit, you should be able to review the scraped output on the subsequent page. If the output looks correct, enter a filename and submit again. The Scraper will save .mustache and .json files by that name in your patterns\' scrape directory, also viewable under the Scrape menu of the toolbar.</p>360 </div>361 <iframe id="scraper__stage" sandbox="allow-same-origin allow-scripts"></iframe>362 <script src="/webserved/html-scraper-dhtml.js"></script>363 </main>364 365 366</body>`);367 });368 });369 /* eslint-enable max-len */370 /* eslint-enable no-useless-escape */371 describe('html-scraper-dhtml.js', () => {372 before(async () => {373 await browser.setWindowSize(1024, 768);374 });375 it('help button shows and hides help text correctly', async () => {376 const sgNavScrape = await $('.sg-nav-scrape');377 const helpShow = await $('#help-show');378 const helpText = await $('#help-text');379 const helpHide = await $('#help-hide');380 await (await sgNavScrape.$('.sg-acc-handle')).click();381 await browser.pause(100);382 await (await sgNavScrape.$('.sg-pop')).click();383 await browser.switchToFrame(await $('#sg-viewport'));384 expect((await helpShow.getCSSProperty('display')).value).to.equal('block');385 expect((await helpText.getCSSProperty('visibility')).value).to.equal('hidden');386 expect((await helpHide.getCSSProperty('display')).value).to.equal('none');387 await helpShow.click();388 expect((await helpShow.getCSSProperty('display')).value).to.equal('none');389 expect((await helpText.getCSSProperty('visibility')).value).to.equal('visible');390 expect((await helpHide.getCSSProperty('display')).value).to.equal('block');391 await helpHide.click();392 await browser.pause(100);393 expect((await helpShow.getCSSProperty('display')).value).to.equal('block');394 expect((await helpText.getCSSProperty('visibility')).value).to.equal('hidden');395 expect((await helpHide.getCSSProperty('display')).value).to.equal('none');396 });397 it('importer submit button errors on filename with invalid characters', async () => {398 const sgNavScrape = await $('.sg-nav-scrape');399 const nameUrl = await $('[name="url"]');400 const nameSelectorRaw = await $('[name="selector_raw"]');401 const message = await $('#message');402 // Just testing error case because that is the only client-side JS logic driven by the listener.403 // A success case will request the Express app which will respond independent of client-side JS.404 await (await sgNavScrape.$('.sg-acc-handle')).click();405 await browser.pause(100);406 await (await sgNavScrape.$('.sg-pop')).click();407 await browser.switchToFrame(await $('#sg-viewport'));408 await nameUrl.click();409 await nameUrl.setValue('/patterns/04-pages-00-homepage/04-pages-00-homepage.html');410 await nameSelectorRaw.click();411 await nameSelectorRaw.setValue('p');412 await (await $('[name="submit_targeter"]')).click();413 await browser.pause(100);414 await (await $('[name="submit_importer"]')).click();415 await browser.pause(100);416 expect(await message.getAttribute('class')).to.equal('message error');417 expect(await message.getText()).to.equal('ERROR! Please enter a valid filename.');418 });419 it('importer submit button errors on filename named "00-html-scraper"', async () => {420 const sgNavScrape = await $('.sg-nav-scrape');421 const nameUrl = await $('[name="url"]');422 const nameSelectorRaw = await $('[name="selector_raw"]');423 const nameFilename = await $('[name="filename"]');424 const message = await $('#message');425 // Just testing error case because that is the only client-side JS logic driven by the listener.426 // A success case will request the Express app which will respond independent of client-side JS.427 await (await sgNavScrape.$('.sg-acc-handle')).click();428 await browser.pause(100);429 await (await sgNavScrape.$('.sg-pop')).click();430 await browser.switchToFrame(await $('#sg-viewport'));431 await nameUrl.click();432 await nameUrl.setValue('/patterns/04-pages-00-homepage/04-pages-00-homepage.html');433 await nameSelectorRaw.click();434 await nameSelectorRaw.setValue('p');435 await (await $('[name="submit_targeter"]')).click();436 await browser.pause(100);437 await nameFilename.click();438 await nameFilename.setValue('00-html-scraper');439 await (await $('[name="submit_importer"]')).click();440 await browser.pause(100);441 expect(await message.getAttribute('class')).to.equal('message error');442 expect(await message.getText()).to.equal('ERROR! Please enter a valid filename.');443 });444 });445 describe('pattern-finder.js', () => {446 describe('Mousetrap', () => {447 before(async () => {448 await browser.setWindowSize(1024, 768);449 });450 it('"ctrl+shift+f" toggles Pattern Finder', async () => {451 const sgNavElements = await $('.sg-nav-elements');452 const sgAccHandle = await sgNavElements.$('.sg-acc-handle');453 const sgAccPanel = await sgNavElements.$('.sg-acc-panel');454 const sgViewport = await $('#sg-viewport');455 const sgFToggle = await $('#sg-f-toggle');456 const sgFind = await $('#sg-find');457 await sgAccHandle.click();458 expect(await sgAccHandle.getAttribute('class')).to.have.string('active');459 expect(await sgAccPanel.getAttribute('class')).to.have.string('active');460 await browser.switchToFrame(sgViewport);461 await browser.keys(['Control', 'Shift', 'f']);462 await browser.switchToParentFrame();463 expect(await sgAccHandle.getAttribute('class')).to.not.have.string('active');464 expect(await sgAccPanel.getAttribute('class')).to.not.have.string('active');465 expect(await sgFToggle.getAttribute('class')).to.have.string('active');466 expect(await sgFind.getAttribute('class')).to.have.string('active');467 await browser.switchToFrame(sgViewport);468 await browser.keys(['Control', 'Shift', 'f']);469 await browser.switchToParentFrame();470 expect(await sgFToggle.getAttribute('class')).to.not.have.string('active');471 expect(await sgFind.getAttribute('class')).to.not.have.string('active');472 });473 });474 });475 describe('pattern-viewport.js', () => {476 describe('click', () => {477 before(async () => {478 await browser.setWindowSize(1024, 768);479 });480 it('bodyClick closes nav panels', async () => {481 const sgNavElements = await $('.sg-nav-elements');482 const sgAccHandle = await sgNavElements.$('.sg-acc-handle');483 const sgAccPanel = await sgNavElements.$('.sg-acc-panel');484 await sgAccHandle.click();485 expect(await sgAccHandle.getAttribute('class')).to.have.string('active');486 expect(await sgAccPanel.getAttribute('class')).to.have.string('active');487 await browser.switchToFrame(await $('#sg-viewport'));488 await (await $('body')).click();489 await browser.switchToParentFrame();490 expect(await sgAccHandle.getAttribute('class')).to.not.have.string('active');491 expect(await sgAccPanel.getAttribute('class')).to.not.have.string('active');492 });493 it('bodyClick closes size panel', async () => {494 const sgFormLabel = await $('#sg-form-label');495 await sgFormLabel.click();496 expect(await sgFormLabel.getAttribute('class')).to.have.string('active');497 await browser.switchToFrame(await $('#sg-viewport'));498 await (await $('body')).click();499 await browser.switchToParentFrame();500 expect(await sgFormLabel.getAttribute('class')).to.not.have.string('active');501 });502 it('pattern anchor clicks switch the pattern in the iframe', async () => {503 const sgNavPages = await $('.sg-nav-pages');504 const sgAccHandle = await sgNavPages.$('.sg-acc-handle');505 const sgRaw = await $('#sg-raw');506 await sgAccHandle.click();507 await browser.pause(100);508 await (await sgNavPages.$('.sg-pop')).click();509 await browser.pause(100);510 expect(await sgRaw.getAttribute('href'))511 .to.equal('patterns/04-pages-00-homepage/04-pages-00-homepage.html');512 await browser.switchToFrame(await $('#sg-viewport'));513 await (await $('a')).click();514 await browser.pause(100);515 await browser.switchToParentFrame();516 expect(await sgRaw.getAttribute('href'))517 .to.equal('patterns/02-components-region/02-components-region.html');518 });519 });520 describe('Mousetrap', () => {521 before(async () => {522 await browser.setWindowSize(1024, 768);523 });524 it('"ctrl+alt+w" resizes to whole width', async () => {525 const sgViewport = await $('#sg-viewport');526 await browser.switchToFrame(sgViewport);527 await browser.keys(['Control', 'Alt', 'w']);528 await browser.pause(1000);529 await browser.switchToParentFrame();530 expect((await sgViewport.getSize()).width).to.equal(1024);531 });532 it('"ctrl+alt+r" resizes to a random width', async () => {533 const sgViewport = await $('#sg-viewport');534 const sgViewportWidthBefore = (await sgViewport.getSize()).width;535 await browser.switchToFrame(sgViewport);536 await browser.keys(['Control', 'Alt', 'r']);537 await browser.switchToParentFrame();538 await browser.pause(1000);539 const sgViewportWidthAfter = (await sgViewport.getSize()).width;540 expect(sgViewportWidthBefore).to.not.equal(sgViewportWidthAfter);541 expect(sgViewportWidthAfter).to.be.a('number');542 expect(sgViewportWidthAfter).to.be.at.least(240);543 expect(sgViewportWidthAfter).to.be.below(1300);544 });545 it('"ctrl+alt+g" toggles grow mode on and off', async () => {546 const sgViewport = await $('#sg-viewport');547 const sgViewportWidth0 = (await sgViewport.getSize()).width;548 await browser.switchToFrame(sgViewport);549 await browser.keys(['Control', 'Alt', 'g']);550 await browser.switchToParentFrame();551 await browser.pause(1000);552 const sgViewportWidth1 = (await sgViewport.getSize()).width;553 expect(sgViewportWidth0).to.not.equal(sgViewportWidth1);554 await browser.pause(1000);555 await browser.switchToFrame(sgViewport);556 await browser.keys(['Control', 'Alt', 'g']);557 await browser.switchToParentFrame();558 const sgViewportWidth2 = (await sgViewport.getSize()).width;559 expect(sgViewportWidth1).to.not.equal(sgViewportWidth2);560 await browser.pause(1000);561 const sgViewportWidth3 = (await sgViewport.getSize()).width;562 expect(sgViewportWidth2).to.equal(sgViewportWidth3);563 });564 it('"ctrl+alt+0" resizes to XXSmall', async () => {565 const sgViewport = await $('#sg-viewport');566 await browser.switchToFrame(sgViewport);567 await browser.keys(['Control', 'Alt', '0']);568 await browser.switchToParentFrame();569 await browser.pause(1000);570 expect((await sgViewport.getSize()).width).to.equal(320);571 });572 it('"ctrl+shift+x" resizes to XSmall', async () => {573 const sgViewport = await $('#sg-viewport');574 await browser.switchToFrame(sgViewport);575 await browser.keys(['Control', 'Shift', 'x']);576 await browser.switchToParentFrame();577 await browser.pause(1000);578 expect((await sgViewport.getSize()).width).to.equal(480);579 });580 it('"ctrl+alt+w" resizes to whole width', async () => {581 const sgViewport = await $('#sg-viewport');582 await browser.switchToFrame(sgViewport);583 await browser.keys(['Control', 'Shift', 'w']);584 await browser.switchToParentFrame();585 await browser.pause(1000);586 expect((await sgViewport.getSize()).width).to.equal(1024);587 });588 it('"ctrl+shift+s" resizes to Small', async () => {589 const sgViewport = await $('#sg-viewport');590 await browser.switchToFrame(sgViewport);591 await browser.keys(['Control', 'Shift', 's']);592 await browser.switchToParentFrame();593 await browser.pause(1000);594 expect((await sgViewport.getSize()).width).to.equal(767);595 });596 it('"ctrl+shift+m" resizes to Medium', async () => {597 const sgViewport = await $('#sg-viewport');598 await browser.switchToFrame(sgViewport);599 await browser.keys(['Control', 'Shift', 'm']);600 await browser.switchToParentFrame();601 await browser.pause(1000);602 expect((await sgViewport.getSize()).width).to.equal(1024);603 });604 it('"ctrl+shift+l" resizes to Large', async () => {605 const sgViewport = await $('#sg-viewport');606 await browser.switchToFrame(sgViewport);607 await browser.keys(['Control', 'Shift', 'l']);608 await browser.switchToParentFrame();609 await browser.pause(1000);610 expect((await sgViewport.getSize()).width).to.equal(1280);611 });612 it('"ctrl+shift+d" toggles disco mode on and off', async () => {613 const sgViewport = await $('#sg-viewport');614 const sgViewportWidth0 = (await sgViewport.getSize()).width;615 await browser.switchToFrame(sgViewport);616 await browser.keys(['Control', 'Shift', 'd']);617 await browser.switchToParentFrame();618 await browser.pause(1000);619 const sgViewportWidth1 = (await sgViewport.getSize()).width;620 expect(sgViewportWidth0).to.not.equal(sgViewportWidth1);621 await browser.switchToFrame(sgViewport);622 await browser.keys(['Control', 'Shift', 'd']);623 await browser.switchToParentFrame();624 await browser.pause(1000);625 const sgViewportWidth2 = (await sgViewport.getSize()).width;626 expect(sgViewportWidth1).to.not.equal(sgViewportWidth2);627 await browser.pause(1000);628 const sgViewportWidth3 = (await sgViewport.getSize()).width;629 expect(sgViewportWidth2).to.equal(sgViewportWidth3);630 });631 it('"ctrl+shift+0" resizes to XXSmall', async () => {632 const sgViewport = await $('#sg-viewport');633 await browser.switchToFrame(sgViewport);634 await browser.keys(['Control', 'Shift', '0']);635 await browser.switchToParentFrame();636 await browser.pause(1000);637 expect((await sgViewport.getSize()).width).to.equal(320);638 });639 });640 });...
frames.js
Source:frames.js
...91 test.assertTitle('CasperJS frame 1');92 casper.then(function() {93 // Same frame in next step94 test.assertTitle('CasperJS frame 1');95 casper.switchToParentFrame();96 test.assertTitle("CasperJS test frames");97 casper.switchToFrame("frame2");98 test.assertTitle('CasperJS frame 2');99 casper.switchToMainFrame();100 test.assertTitle("CasperJS test frames");101 this.removeAllListeners('frame.changed');102 });103 });104 casper.thenOpen("tests/site/frames.html", function(){105 var expected = ['frame4','frame5', 'frame5','frame4'];106 casper.page.switchToMainFrame();107 casper.on('frame.changed', function (name , status) {108 test.assertEquals(name, expected.shift());109 });110 casper.switchToFrame("frame4");111 test.assertTitle('CasperJS frame 4');112 casper.switchToFrame("frame5");113 test.assertTitle('CasperJS frame 1');114 casper.clickLabel('_top');115 });116 117 casper.then(function() {118 casper.switchToParentFrame();119 casper.switchToParentFrame();120 casper.waitForText("three",function(){121 test.assertMatches( this.getHTML(),/three/,'go on top frame');122 });123 casper.switchToParentFrame();124 casper.switchToParentFrame();125 casper.switchToParentFrame();126 casper.switchToParentFrame();127 casper.switchToParentFrame();128 this.removeAllListeners('frame.changed');129 });130 casper.run(function() {131 test.assertTitle('CasperJS test index');132 test.done();133 });...
Payment_Page.js
Source:Payment_Page.js
...76 this.creditCardOption.waitForExist();77 this.creditCardOption.scrollIntoView();78 this.creditCardOption.click();79 browser.pause(1000);80 browser.switchToParentFrame();81 browser.switchToFrame(0);82 this.creditCardNumberField.waitForExist();83 this.creditCardNumberField.click();84 this.creditCardNumberField.setValue(data.creditCardNumber);85 browser.switchToParentFrame();86 browser.switchToFrame(1);87 this.creditCardExpiryDate.setValue(data.creditCardExpiryDate);88 browser.switchToParentFrame();89 browser.switchToFrame(2);90 this.creditCardCVV.setValue(data.creditCardCVV);91 browser.switchToParentFrame();92 this.cardHolderName.setValue(data.cardHolderName);93 this.placeOrderButton.scrollIntoView();94 this.placeOrderButton.click();95 }96 placeOrderUsingPaypal() {97 this.payPalOption.waitForExist();98 this.payPalOption.scrollIntoView();99 this.payPalOption.click();100 this.payPalButton.waitForExist();101 this.payPalButton.scrollIntoView();102 this.payPalButton.click();103 browser.pause(10000);104 ///////// handel the windows /////////105 var parentGUID = browser.getWindowHandle();106 browser.switchWindow(data.payPalURL);107 this.paypalEmail.waitForExist();108 this.paypalEmail.clearValue();109 this.paypalEmail.setValue(data.payPallUserEmail);110 this.paypalPassword.setValue(data.payPallUserPassword);111 this.paypalLoginButton.click();112 browser.pause(10000);113 /// Handel paypal cokies //////////114 var cookies = this.acceptPaypalCookiesLink.getText();115 if (cookies == "Accept Cookies") {116 this.acceptPaypalCookiesLink.waitForExist();117 this.acceptPaypalCookiesLink.click();118 }119 this.paypalSubmitButton.waitForExist();120 this.paypalSubmitButton.scrollIntoView();121 this.paypalSubmitButton.click();122 browser.switchToWindow(parentGUID);123 browser.pause(10000);124 }125 placeOrderUsingklarna() {126 this.klranaoption.waitForExist();127 this.klranaoption.scrollIntoView();128 this.klranaoption.click();129 130 //////////// changed ******** The frame and cockoies popup has removed ******* 29012021 *************/////////////////////131 this.klarnaFrame.waitForExist();132 browser.switchToFrame(this.klarnaFrame);133 this.klarnaInvoiceAgeRestriction.waitForExist();134 browser.switchToParentFrame();135 this.klranaPlaceOrder.waitForExist();136 var cookies = this.cookiesaAccepta.getText();137 if (cookies == "Accept All Cookies") {138 this.cookiesaAccepta.waitForExist();139 this.cookiesaAccepta.click();140 }141 /////////////////////////******************* /////////////////////142 this.klranaPlaceOrder.scrollIntoView();143 this.klranaPlaceOrder.click();144 }145}...
embedded-content-consumer-spec.js
Source:embedded-content-consumer-spec.js
...12 it('Provider triggers EventA message', () => {13 const myFrame = $('iframe[src="/raw/provider/terra-embedded-content-consumer/embedded-content-consumer/providers/custom-event-provider"]');14 browser.switchToFrame(myFrame);15 $('#EventA').click();16 browser.switchToParentFrame();17 $('#root').moveTo(0, 0);18 Terra.validates.element('EventA for custom-event');19 });20 });21 describe('custom-events', () => {22 it('displays with custom event', () => {23 browser.url('/raw/tests/terra-embedded-content-consumer/embedded-content-consumer/consumers/custom-events-consumer');24 $('#CustomEvents').waitForDisplayed();25 Terra.validates.element('custom events');26 });27 it('Provider triggers EventA message', () => {28 const myFrame = $('iframe[src="/raw/provider/terra-embedded-content-consumer/embedded-content-consumer/providers/custom-events-provider"]');29 browser.switchToFrame(myFrame);30 $('#EventA').click();31 browser.switchToParentFrame();32 $('#root').moveTo(0, 0);33 Terra.validates.element('EventA for custom-events');34 });35 it('successfully replied with EventA message', () => {36 const myFrame = $('iframe[src="/raw/provider/terra-embedded-content-consumer/embedded-content-consumer/providers/custom-events-provider"]');37 browser.switchToFrame(myFrame);38 expect($('#embedded-content-consumer-reply')).toHaveTextContaining('eventA');39 browser.switchToParentFrame();40 });41 it('Provider triggers EventB message', () => {42 const myFrame = $('iframe[src="/raw/provider/terra-embedded-content-consumer/embedded-content-consumer/providers/custom-events-provider"]');43 browser.switchToFrame(myFrame);44 $('#EventB').click();45 browser.switchToParentFrame();46 $('#root').moveTo(0, 0);47 Terra.validates.element('EventB');48 });49 it('successfully replied with EventB message', () => {50 const myFrame = $('iframe[src="/raw/provider/terra-embedded-content-consumer/embedded-content-consumer/providers/custom-events-provider"]');51 browser.switchToFrame(myFrame);52 expect($('#embedded-content-consumer-reply')).toHaveTextContaining('eventB');53 });54 });55 describe('data-status', () => {56 it('has mounted, launched, and authorized elements', () => {57 browser.url('/raw/tests/terra-embedded-content-consumer/embedded-content-consumer/consumers/data-status-consumer');58 const timeout = browser.options.waitforTimeout + 5000;59 $('iframe[src="/raw/provider/terra-embedded-content-consumer/embedded-content-consumer/providers/data-status-provider"]').waitForDisplayed({ timeout });...
fishingbooker_choose_payment_method_page.js
Source:fishingbooker_choose_payment_method_page.js
...23 strictEqual(this.getText(this.finalStep_Checkmark), '3')24 let numberFrame= browser.$('#braintree-hosted-field-number');25 browser.switchToFrame(numberFrame);26 this.setValue(this.cardNumber_Field, cardNumber)27 browser.switchToParentFrame()28 let expiryFrame= browser.$('#braintree-hosted-field-expirationDate');29 browser.switchToFrame(expiryFrame);30 this.setValue(this.expiryDate_Field, expiryDate)31 browser.switchToParentFrame()32 let cvvFrame= browser.$('#braintree-hosted-field-cvv');33 browser.switchToFrame(cvvFrame);34 this.setValue(this.securityCode_Field, securityCode)35 browser.switchToParentFrame()36 let nameFrame= browser.$('#braintree-hosted-field-cardholderName');37 browser.switchToFrame(nameFrame);38 this.setValue(this.nameOnCard_Field, nameOnCard)39 browser.switchToParentFrame()40 let postalFrame= browser.$('#braintree-hosted-field-postalCode');41 browser.switchToFrame(postalFrame);42 this.setValue(this.postalCode_Field, postalCode)43 browser.switchToParentFrame()44 }45 submitPayment() { 46 this.click(this.submitPayment_Button)47 }48 49 50}...
safetylearnmore.page.js
Source:safetylearnmore.page.js
...30 expect(this.playPauseButton).toBeClickable()31 this.playPauseButton.click()32 expect(this.player).toHaveElementClass('paused-mode') 33 expect(this.verifyVideoTimeframe).toHaveTextContaining('0:0') 34 browser.switchToParentFrame();35 }36 verifyVideoPausing(){37 browser.switchToFrame(this.videoIframe) 38 expect(this.playPauseButton).toBeClickable()39 this.playPauseButton.click()40 expect(this.player).toHaveElementClass('paused-mode') 41 browser.switchToParentFrame();42 }43 verifyVideoTimeframe(){44 browser.switchToFrame(this.videoIframe);45 expect(this.verifyVideoTimeframe).toHaveTextContaining('0:0')46 browser.switchToParentFrame();47 }48}...
paymentPage.js
Source:paymentPage.js
...12 enterCreditCardDetails() {13 this.iFrameInCC.waitForDisplayed({ timeout: 5000 })14 browser.switchToFrame(this.iFrameInCC);15 this.enterCCNumber.setValue("4005519200000004")16 browser.switchToParentFrame()17 browser.switchToFrame(this.iFrameInCVV)18 this.enterCVV.setValue("123")19 browser.switchToParentFrame()20 browser.switchToFrame(this.iFrameInExpMonth)21 this.enterExpMonth.setValue("12")22 browser.switchToParentFrame()23 browser.switchToFrame(this.iFrameInExpYear)24 this.enterExpYear.setValue("2024");25 browser.switchToParentFrame()26 }27}...
reply-spec.js
Source:reply-spec.js
...4 });5 it("should only publish to targeted domains and print reply", () => {6 browser.switchToFrame(2);7 $("#polo-text").setValue("polo");8 browser.switchToParentFrame();9 browser.switchToFrame(0);10 browser.switchToFrame(0);11 $("#marco-button").click();12 browser.waitUntil(13 () => {14 return $("p").getText() === "polo";15 },16 {17 timeout: 1000,18 timeoutMsg: "expected p tag to have text",19 }20 );21 browser.switchToParentFrame();22 browser.switchToParentFrame();23 const indexReceived = $$("p").length;24 browser.switchToFrame(0);25 const frame1Received = $$("p").length;26 browser.switchToParentFrame();27 browser.switchToFrame(1);28 const frame2Received = $$("p").length;29 browser.switchToParentFrame();30 browser.switchToFrame(2);31 const frame3ReceivedQuestion = $("p").getText();32 expect(indexReceived).toBe(0);33 expect(frame1Received).toBe(0);34 expect(frame2Received).toBe(0);35 expect(frame3ReceivedQuestion).toBe("are you there?");36 });...
Using AI Code Generation
1var webdriverio = require('webdriverio');2var options = {3 desiredCapabilities: {4 }5};6 .remote(options)7 .init()8 .click('#tryhome')9 .switchToParentFrame()10 .click('#tryhome')11 .end();
Using AI Code Generation
1const webdriverio = require('webdriverio');2const options = {3 desiredCapabilities: {4 },5};6(async () => {7 const browser = await webdriverio.remote(options);8 await browser.pause(2000);9 await browser.switchToParentFrame();10 await browser.pause(2000);11 await browser.switchToFrame(0);12 await browser.pause(2000);13 await browser.switchToFrame('myframe');14 await browser.pause(2000);15 await browser.switchToFrame(null);16 await browser.pause(2000);17 await browser.switchToFrame(0);18 await browser.pause(2000);19 await browser.switchToFrame('myframe');20 await browser.pause(2000);21 await browser.switchToFrame(null);22 await browser.pause(2000);23 await browser.switchToFrame(0);24 await browser.pause(2000);25 await browser.switchToFrame('myframe');26 await browser.pause(2000);27 await browser.switchToFrame(null);28 await browser.pause(2000);29 await browser.switchToFrame(0);30 await browser.pause(2000);31 await browser.switchToFrame('myframe');32 await browser.pause(2000);33 await browser.switchToFrame(null);34 await browser.pause(2000);35 await browser.switchToFrame(0);36 await browser.pause(2000);37 await browser.switchToFrame('myframe');38 await browser.pause(2000);39 await browser.switchToFrame(null);40 await browser.pause(2000);41 await browser.switchToFrame(0);42 await browser.pause(2000);43 await browser.switchToFrame('myframe');44 await browser.pause(2000);45 await browser.switchToFrame(null);46 await browser.pause(2000);47 await browser.switchToFrame(0);48 await browser.pause(2000);49 await browser.switchToFrame('myframe');50 await browser.pause(2000);51 await browser.switchToFrame(null);52 await browser.pause(2000);53 await browser.switchToFrame(0);
Using AI Code Generation
1describe('Switch to Parent Frame', () => {2 it('Switch to Parent Frame', async () => {3 await browser.switchToFrame(0);4 await browser.pause(3000);5 await browser.switchToParentFrame();6 await browser.pause(3000);7 });8});
Using AI Code Generation
1module.exports = {2 'Test Switch To Parent Frame' : function (browser) {3 .frame('iframeResult')4 .click('#myAnchor')5 .switchToParentFrame()6 .end();7 }8};9{10 "selenium" : {
Using AI Code Generation
1const webdriverio = require('webdriverio');2const assert = require('assert');3const mocha = require('mocha');4const chai = require('chai');5const expect = chai.expect;6const chaiAsPromised = require('chai-as-promised');7chai.use(chaiAsPromised);8const selenium = require('selenium-standalone');
Using AI Code Generation
1exports.config = {2 capabilities: {3 chromeOptions: {4 }5 },6 onPrepare: function () {7 browser.ignoreSynchronization = true;8 }9};10describe('Test', function () {11 it('Switch to Parent Frame', function () {12 browser.switchToFrame(browser.findElement(By.id('iframeResult')));13 browser.findElement(By.tagName('button')).click();14 browser.getAllWindowHandles().then(function (handles) {15 browser.switchTo().window(handles[1]);16 browser.sleep(3000);17 browser.switchToParentFrame();18 browser.sleep(3000);19 });20 });21});
Using AI Code Generation
1var webdriverio = require('webdriverio');2var options = {3 desiredCapabilities: {4 }5};6var client = webdriverio.remote(options);7client.init();8client.frame('iframeResult');9client.switchToParentFrame();10client.end();
Using AI Code Generation
1describe("Test to switch to parent frame", function() {2 it("should switch to parent frame", function() {3 browser.switchToFrame(0);4 browser.setValue("#tinymce", "Hello World");5 browser.switchToParentFrame();6 expect(browser.getTitle()).toBe("The Internet");7 });8});
WebdriverIO Tutorial
Wondering what could be a next-gen browser and mobile test automation framework that is also simple and concise? Yes, that’s right, it's WebdriverIO. Since the setup is very easy to follow compared to Selenium testing configuration, you can configure the features manually thereby being the center of attraction for automation testing. Therefore the testers adopt WedriverIO to fulfill their needs of browser testing.
Learn to run automation testing with WebdriverIO tutorial. Go from a beginner to a professional automation test expert with LambdaTest WebdriverIO tutorial.
Chapters
-
Running Your First Automation Script - Learn the steps involved to execute your first Test Automation Script using WebdriverIO since the setup is very easy to follow and the features can be configured manually.
-
Selenium Automation With WebdriverIO - Read more about automation testing with WebdriverIO and how it supports both browsers and mobile devices.
-
Browser Commands For Selenium Testing - Understand more about the barriers faced while working on your Selenium Automation Scripts in WebdriverIO, the ‘browser’ object and how to use them?
-
Handling Alerts & Overlay In Selenium - Learn different types of alerts faced during automation, how to handle these alerts and pops and also overlay modal in WebdriverIO.
-
How To Use Selenium Locators? - Understand how Webdriver uses selenium locators in a most unique way since having to choose web elements very carefully for script execution is very important to get stable test results.
-
Deep Selectors In Selenium WebdriverIO - The most popular automation testing framework that is extensively adopted by all the testers at a global level is WebdriverIO. Learn how you can use Deep Selectors in Selenium WebdriverIO.
-
Handling Dropdown In Selenium - Learn more about handling dropdowns and how it's important while performing automated browser testing.
-
Automated Monkey Testing with Selenium & WebdriverIO - Understand how you can leverage the amazing quality of WebdriverIO along with selenium framework to automate monkey testing of your website or web applications.
-
JavaScript Testing with Selenium and WebdriverIO - Speed up your Javascript testing with Selenium and WebdriverIO.
-
Cross Browser Testing With WebdriverIO - Learn more with this step-by-step tutorial about WebdriverIO framework and how cross-browser testing is done with WebdriverIO.
Run Webdriverio 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?
