Skip to content

[Question] Is any of page.$('#tiny_editor_ifr') or page.locator('#tiny_editor_ifr').elementHandle() preffered? #19132

@mk654321

Description

@mk654321

I am trying to interact with tinymce in an iframe. Based on comments in #8943 I was able to work around it by following code

const tinymce_text = "Lorem Ipsum";
let frameElement = await page.$('#tiny_editor_ifr');
let frame = await frameElement.contentFrame();
for (const c of tinymce_text) { await frame.press('#tinymce', c); }

It works but I am not entirely satisfied as https://playwright.dev/docs/api/class-page#page-query-selector reads:
The use of [ElementHandle](https://playwright.dev/docs/api/class-elementhandle) is discouraged, use [Locator](https://playwright.dev/docs/api/class-locator) objects and web-first assertions instead.
I then figured that I could do:

const tinymce_text = "Lorem Ipsum";
let frameElement = await page.locator('#tiny_editor_ifr').elementHandle();
let frame = await frameElement.contentFrame();
for (const c of tinymce_text) { await frame.press('#tinymce', c); }

I wonder if any of the above is preferred or they essentially the same. Also why is page.$(...) discouraged, is it because it does not give all the advantages of using Locators such as auto-waits and assertions?

Thank you and best regards,
mk

PS
HTML below

<!DOCTYPE html>
    <html>
    <head>
        <title>Tiny MCE demo</title>
   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.0/tinymce.min.js"></script>
        <script>
        window.addEventListener(
            'DOMContentLoaded',
            () => {
            convertToTinyMce('#tiny_editor');
            },
            true
        );

        function convertToTinyMce(selector) {
            window.tinyMCE.init({
            selector: selector,
            height: 500
            });
        }
        </script>
    </head>
    <body>
      <form>
        <label>Here is a basic iframe awaiting tiny mce</label><br>
        <textarea name='some_name' id="tiny_editor"></textarea>
        <button>Save</button>
      </form>  
    </body>
    </html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions