[BUG] Unable to automate a dynamically generated editor #8943
Description
Context:
- Playwright Version: playwright@1.14.0
- Operating System: Mac
- Node.js version: v14
- Browser: Chromium
Playwright is failing to perform any action on an iframe generated by tinymce :(
In this example, I'm just trying to click on the body. But any other action will fail.
const playwright = require('playwright');
(async () => {
const browser = await playwright.chromium.launch({headless: false});
let page = await browser.newPage();
await page.setContent(`
<!DOCTYPE html>
<html>
<head>
<title>Tiny MCE demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.0/tinymce.min.js"></script>
<script>
window.addEventListener(
'DOMContentLoaded',
() => {
convertToTinyMce('#textReady');
},
true
);
function convertToTinyMce(selector) {
window.tinyMCE.init({
selector: selector,
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code wordcount',
],
mobile: {
theme: 'mobile',
},
toolbar:
'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css',
],
});
}
</script>
</head>
<body>
<h3>Here is a basic iframe awaiting tiny mce</h3>
<textarea id="textReady">Initialized from the start</textarea>
</body>
</html>
`);
frameElement = await page.$('#textReady_ifr');
frame = await frameElement.contentFrame();
await frame.click('body');
console.log(await frame.content());
})();