Our webpage includes an iframe that is dynamically generated using JavaScript. We are working on creating end-to-end tests for this page using Protractor. Our specific goal is to verify the presence of a div element inside the iframe. The issue we are encountering is that the test passes on Chrome on macOS Mojave, but fails on Safari 12.0.2. Interestingly, when the iframe is not generated using JS, the test successfully passes on Safari.
<html>
<head>
<script>
function domOnLoad() {
const rootElement = document.getElementById('root');
const iframeElement = document.createElement('iframe');
iframeElement.frameBorder = 0;
iframeElement.seamless = true;
iframeElement.scrolling = 'no';
rootElement.appendChild(iframeElement);
const divElement = document.createElement('div');
divElement.id = 'iframeRoot';
const textElement = document.createTextNode('Test Iframe');
divElement.appendChild(textElement);
iframeElement.contentDocument.body.appendChild(divElement);
console.log(rootElement);
}
</script>
</head>
<body onload="domOnLoad()">
<div id="root">
</div>
</body>
</html>
describe('Ensuring the presence of div inside iframe', function() {
browser.waitForAngularEnabled(false);
it('should contain a div with ID "iframeRoot" inside the iframe', () => {
browser.get('http://localhost:5000/examples/iframe.html/');
browser.switchTo().frame(0);
var divInsideIframe = $('#iframeRoot');
expect(divInsideIframe.isPresent()).toBeTruthy();
});
});