protractor: CSS does not load properly if there are any assert statements related to iframe

I have to test drag and drop functionality in a iframe. We can generate forms using this functionality. The left side of the iframe holds the widgets and the empty container in the middile and a form to the right.

TestCase: Dropping a ‘Text Area’ or any widget should load a new form with radio buttons, few input fields and a unique string dynamically (using Jquery). This form varies from widget to widget.

This dynamic form is not loading properly in some cases. The radio buttons are displayed as input field of type text.

What I observed is that the rendering of this form fails if I am trying to perform any element presence or trying to use getText(), isPresent() or sendKeys() (on the elements inside the iframe) after switching into the iframe.

Scenario 1: OK Form is loading properly var widgets = element.all(by.css('css')); var emptyContainer = element.all(by.id('id')); widgets.each(function(widget){ browser.actions().mouseDown(widget).mouseMove(emptyContainer).mouseUp().perform(); });

Scenario 2: FAIL In this case, the form and it’s components(radio buttons, unique number) are loaded properly for the first iteration and for the rest(12) the radio buttons are loaded as input field of type text. You can see I am testing radio button presence for each widget. browser.driver.switchTo() .frame('frameName').then(function(){ var widgets = element.all(by.css('css')); var emptyContainer = element.all(by.id('id')); widgets.each(function(widget){ browser.actions() .mouseDown(widget) .mouseMove(emptyContainer) .mouseUp() .perform() then(function(){ var radioButton = element(by.css('css')); radioButton.isPresent().then(function(ispresent){ expect(ispresent).toBe(true); }); }); }) });

Scenario 3: FAIL In this case I am trying to find if a widget is present or not. I am doing this before performing drag&drop. browser.driver.switchTo() .frame('frameName').then(function(){ var widgets = element.all(by.css('css')); var textAreaWidget = element(by.id('id')); textAreaWidget .isPresent().then(function(ispresent){ expect(ispresent).toBe(true); }); var emptyContainer = element.all(by.id('id')); widgets.each(function(widget){ browser.actions() .mouseDown(widget) .mouseMove(emptyContainer) .mouseUp() .perform() then(function(){ var radioButton = element(by.css('css')); radioButton.isPresent().then(function(ispresent){ expect(ispresent).toBe(true); }); }); }) });

The jquery execution is terminated somehow if I am trying to do anything other than dropping the widgets. Is there any way to wait for jquery to complete it’s execution on iframe?

Bug report

• Node Version: 8.11.3
• Protractor Version: 5.3.2
• Browser(s): chrome 67.0.3396.99
• webdriver-manager: 12.1.0