0

I have tried the many examples already on stack overflow for switching to iframe using protractorjs, none of them have worked for me so far. I was hoping someone else has encountered this issue who may be able to give me some insight.

My Problem: I am able to fill in all the fields on the WorldPay iframe and click submit, but i am unable to find any elements when switching back to the angular application.

See my example code sample below that returns a No Element Found Exception on the last line of code...

browser.waitForAngular();
browser.ignoreSynchronization=true;
browser.switchTo().frame(element(by.tagName('iframe')).getWebElement());
element(by.css("input[data-worldpay='name']")).sendKeys("MR TEST ACCOUNT");
element(by.css("input[data-worldpay='number']")).sendKeys("5555555555554444");
element(by.css("input[data-worldpay='exp-month']")).sendKeys("02");
element(by.css("input[data-worldpay='exp-year']")).sendKeys("2022");
element(by.css("input[data-worldpay='cvc']")).sendKeys("123");
element(by.id("_el_button_save")).click();
browser.switchTo().defaultContent();

browser.waitForAngular();
browser.ignoreSynchronization=false;
element(by.id("button_confirm")).click();

Other things I've tried

  • I have also tried using browser.waitForAngularEnabled(false) and then browser.waitForAngularEnabled(true) which resulted in the same issue
  • I have tried switching to defaultContent AFTER waiting for angular to be enabled again/ setting ignoreSynchronization to false
  • Instead of using "browser.switchTo().defaultContent();" using "browser.switchTo().frame(element(by.tagName('button_confirm')).getWebElement());" which yields the same result
Taran
  • 491
  • 2
  • 8
  • 22
  • [this](https://stackoverflow.com/questions/20425909/protractor-testing-angular-app-in-an-iframe) may help you. – Murthi Jul 16 '18 at 09:21
  • @Murthi I got this exception "protractor.getInstance is not a function" when i tried to start using that solution – Taran Jul 16 '18 at 09:31
  • if you watch the browser as the script runs, does the "dialog" representing this iframe actually go away? Just wondering if that test account information is actually accepted. Is the application actually in the state you expect with the data that you've passed in? – Breaks Software Jul 16 '18 at 11:52
  • @BreaksSoftware yup it indeed does, I have debugged through and the button it's supposed to click is in full visibility and the iframe has indeed disappeared (since it's on the last screen) – Taran Jul 16 '18 at 12:45
  • For some reason protractor is putting a '\' at the front of the selector. This may be the issue: "No element found using locator: By(css selector, *[id="\#button_confirm"])" – Taran Jul 16 '18 at 13:00
  • [UPDATE] even though using another selector didn't cause a '/' it still caused the same exception – Taran Jul 16 '18 at 13:18

2 Answers2

0

The problem was resolved by waiting for the staleness of the iframe. Perhaps the iframe was still ontop of the element even when the page changed. In any case this code was the fix...

// 4) Check for example with Protractor expectedConditions if the iframe is gone
var EC = protractor.ExpectedConditions;
// Waits for the ifram to be no longer present on the dom.
browser.wait(EC.stalenessOf($('iframe')), 5000);

Credit due to this post answer... Detecting Whether An Iframe Is Angular Or Not With Protractor

Taran
  • 491
  • 2
  • 8
  • 22
0

Try with

browser.driver.switchTo().defaultContent();

instead of 

browser.switchTo().defaultContent();

I don't think that you are successfully switching back to default content.

Sanja Paskova
  • 1,110
  • 8
  • 15