[BUG] Select all bug when migrating from Puppeteer to Playwright (affects Firefox)

I’m running the current version of Playwright, that would be 0.10, and I’m running on a Mac 10.14.6 and running Playright via Yarn/Jest.

As I’m experienced with Puppeteer, I thought I needed to do something like this:

		// https://github.com/puppeteer/puppeteer/issues/1313
		await page.evaluate(() => document.execCommand("selectall", false, null))
		await page.keyboard.press("Backspace")

In order to select all and delete an editable region.

When doing so, I get the following (only concerning firefox – chrome and webkit appear to be unaffected):

    Evaluation failed: {}

      12 | 		await page.focus("[contenteditable]")
      13 | 		// https://github.com/puppeteer/puppeteer/issues/1313
    > 14 | 		await page.evaluate(() => document.execCommand("selectall", false, null))
         | 		^
      15 | 		await page.keyboard.press("Backspace")
      16 | 		await page.keyboard.type("Hello, world! 😀", { delay: 50 })
      17 | 		await browser.close()

      at checkException (node_modules/playwright-core/lib/firefox/ffExecutionContext.js:155:19)
      at FFExecutionContext.evaluate (node_modules/playwright-core/lib/firefox/ffExecutionContext.js:92:9)
      at Object.<anonymous> (src/components/Editor/__tests/playwright.test.js:14:3)

It turns out, to my surprise, that Meta does work in Playwright, so the following code does work:

		page.keyboard.down("Meta")
		page.keyboard.down("a")
		page.keyboard.down("Meta")
		page.keyboard.down("Backspace")

I don’t know if this is a regression, but I was definitely surprised and perceived Playwright as not working the first time around.

I also wanted to mention that firefox opens in the background, which is unlike chrome and webkit. ~Also, the webkit binary renders without anti-aliasing, so it’s very fuzzy,~ and the monkey emoji 🙊 at the top UI is a bit disconcerting.

I hope this helps – thanks.

[jperl]

For anyone looking at this issue in the future, in case it is helpful. We changed the logic from clearing then typing, to just selecting all then typing. Since if you select all first, it will replace the content. This has been tested across all browsers for content editables, text inputs, date inputs, number inputs, time inputs.

import { logger } from "@qawolf/logger";
import { ElementHandle } from "playwright";

export const selectElementContent = async (
  elementHandle: ElementHandle
): Promise<void> => {
  // Select the element's content
  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
  // https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
  // https://stackoverflow.com/a/3806004/230462
  logger.verbose(`selectElementContent`);

  await elementHandle.evaluate((element: HTMLInputElement) => {
    // When element.select() is supported by browsers we can use that instead
    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
    if (element.setSelectionRange) {
      try {
        element.setSelectionRange(0, element.value.length);
      } catch (e) {
        // setSelectionRange throws an error for inputs: number/date/time/etc
        // we can just focus them and the content will be selected
        element.focus();
      }
    } else if (window.getSelection && document.createRange) {
      const range = document.createRange();
      range.selectNodeContents(element);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  });
};

[zaydek]

Thanks @jperl! I’ll try integrating something like this later. If it helps, this is my playwright e2e test suite.

And these are my helper functions for interfacing with playwright.