About Testing Rich-text Fields with Playwright

Playwright allows testing not only the common input fields, but also rich-text fields (the ones with contenteditable="true" attribute).

rich-text field using Quill editor

For example, you can simulate typing, selecting all text, and making it bold as follows:

from playwright.sync_api import sync_playwright

playwright = sync_playwright().start()
browser = playwright.chromium.launch(headless=False)
context = browser.new_context(viewport={"width": 1200, "height": 800})
page = context.new_page()

page.goto("https://example.com/message-form/")
content_editor = self.page.locator("#quill-id_content .ql-editor")
content_editor.type("Hello, World!")
# Select All on MacOS. Use "Control+A" on Linux or Windows
content_editor.press("Meta+A")
# Make it bold on MacOS. Use "Control+B" on Linux or Windows
content_editor.press("Meta+B")

browser.close()
playwright.stop()