Menu
in very top of my page I have call of iframe:
<iframe ng-if="webpadUrl" id="webPadIframe" ng-src="http://Path/To/iFrame?sessionId=9bc9989441c8c9cfb9ff5bdc381a72ea" seamless="seamless" class="fullscreen ng-scope" src="http://Path/To/iFrame?sessionId=9bc9989441c8c9cfb9ff5bdc381a72ea">
</iframe>
Inside of iframe I have something like:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 5845 3897">
and below that multiple <g> with different ID and so on..
<g id="30_0_80" transform="translate(420,754)" class="">
<path class="fp x80 xab active" d="M307 0 L293 15 L155 120 L87 181 L47 220 L0 277 L0 282 L14 341 L27 379 L32 386 L32 386 L74 425 L123 461 L153 480 L188 500 L238 525 L303 551 L337 563 L340 563 L381 561 L490 560 L492 557 L522 526 L591 473 L662 430 L745 383 L770 368 L785 358 L796 350 L802 343 L806 335 L809 321 L809 318 L810 295 L808 293 L806 293 L763 292 L680 277 L643 269 L590 253 L555 239 L555 239 L508 214 L452 179 L397 138 L369 115 L339 79 L325 56 L310 28 L308 23 L308 19 L310 1 L307 0 Z"></path>
<path class="p x88 xc7" d="M796 296 L792 300 L736 324 L595 391 L486 455 L413 505 L349 559"></path>
<path class="p x88 xc7" d="M33 372 L57 324 L82 284 L128 228 L133 222 L134 221 L164 188 L222 131 L252 102 L281 69"></path><path class="p x88 xc7" d="M9 283 L24 261 L52 221 L79 190 L88 182"></path><path class="p x88 xc7" d="M169 175 L251 97 L284 60 L295 40 L303 25"></path><path class="p x88 xc7" d="M132 214 L119 229 L88 266"></path>
<path class="p x88 xc7" d="M72 287 L54 315"></path><path class="p x88 xc7" d="M47 326 L44 331 L29 360"></path>
</g>
What I do is trying to click <g>
As it is in iframe I try something like:
browser.driver.switchTo().frame(element(by.id('30_0_80')));
Unfortunately doesn't work, is there any other way how to work with this iframes?
Error: NoSuchElementError: No element found using locator: By.id("30_0_80")
849
Xpath for 1st iFrame : //iframe [@src='first.html'] Xpath for 2nd iFrame : //iframe [@class='second'] When you create a frame in Protractor, it assigns an index in an increment way to every frame on the web page. These indexes can be used to find the frames or iframes.
If the element is inside a frame, then we have to switch into the frame to access the element. 1. Right-click on the page (not on the element) which part you want to check. 2. On the right-click options, you can find This Frame Option; if this option is present, then there is an iframe else there is no iframe 3. Webpage without a frame.
Frames are used along with framesets, the < frame > tag in a web page defines each of the frames inside the frameset file tag and so we can say that the framesets include several frames. In Protractor, you can handle iFrames and Frames in Selenium in the same way. The frame requires the presence of a frameset, but iframes do not need a frameset.
And you won't be able to interact with it via the DOM. We have to switch into the frame to see the elements present in the frame. Both Frame and iFrame are treated similar manner with the protractor; Protractor does not differentiate them so that we can handle both of them in the same way.
After sometime I find a solution how to switch to right frame, hope it help someone.
browser.switchTo().frame('webPadIframe');
browser.findElement(by.id('30_0_80')).click();
How to deal with non-angular iframes using control-flow.
let flow = protractor.promise.controlFlow();
flow.execute(function(){
browser.ignoreSynchronization = true; //allows you to handle non angular page
browser.switchTo().frame('webPadIframe'); //switches to iframe
browser.findElement(by.id('30_0_80')).click(); //action within iframe
browser.switchTo().defaultContent(); //switches back to main page
browser.ignoreSynchronization = false; //lets you resume handling angular
)};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
