Protractor - find element in iframe

Question

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")

Answer 1

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();

Answer 2

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
)};