fix: isEditable/toBeEditable throw for elements that cannot be editable/readonly (#33713)

docs/src/actionability.md

@@ -93,11 +93,20 @@ Element is considered stable when it has maintained the same bounding box for at
 
 ## Enabled
 
-Element is considered enabled unless it is a `<button>`, `<select>`, `<input>` or `<textarea>` with a `disabled` property.
+Element is considered enabled when it is **not disabled**.
+
+Element is **disabled** when:
+- it is a `<button>`, `<select>`, `<input>`, `<textarea>`, `<option>` or `<optgroup>` with a `[disabled]` attribute;
+- it is a `<button>`, `<select>`, `<input>`, `<textarea>`, `<option>` or `<optgroup>` that is a part of a `<fieldset>` with a `[disabled]` attribute;
+- it is a descendant of an element with `[aria-disabled=true]` attribute.
 
 ## Editable
 
-Element is considered editable when it is [enabled] and does not have `readonly` property set.
+Element is considered editable when it is [enabled] and is **not readonly**.
+
+Element is **readonly** when:
+- it is a `<select>`, `<input>` or `<textarea>` with a `[readonly]` attribute;
+- it has an `[aria-readonly=true]` attribute and an aria role that [supports it](https://w3c.github.io/aria/#aria-readonly).
 
 ## Receives Events
 

docs/src/api/class-locator.md

@@ -1483,7 +1483,7 @@ Boolean disabled = await page.GetByRole(AriaRole.Button).IsDisabledAsync();
 * since: v1.14
 - returns: <[boolean]>
 
-Returns whether the element is [editable](../actionability.md#editable).
+Returns whether the element is [editable](../actionability.md#editable). If the target element is not an `<input>`, `<textarea>`, `<select>`, `[contenteditable]` and does not have a role allowing `[aria-readonly]`, this method throws an error.
 
 :::warning[Asserting editable state]
 If you need to assert that an element is editable, prefer [`method: LocatorAssertions.toBeEditable`] to avoid flakiness. See [assertions guide](../test-assertions.md) for more details.

packages/playwright-core/src/server/injected/injectedScript.ts

@@ -29,7 +29,7 @@ import type { CSSComplexSelectorList } from '../../utils/isomorphic/cssParser';
 import { generateSelector, type GenerateSelectorOptions } from './selectorGenerator';
 import type * as channels from '@protocol/channels';
 import { Highlight } from './highlight';
-import { getChecked, getAriaDisabled, getAriaRole, getElementAccessibleName, getElementAccessibleDescription } from './roleUtils';
+import { getChecked, getAriaDisabled, getAriaRole, getElementAccessibleName, getElementAccessibleDescription, getReadonly } from './roleUtils';
 import { kLayoutSelectorNames, type LayoutSelectorName, layoutSelectorScore } from './layoutSelectorUtils';
 import { asLocator } from '../../utils/isomorphic/locatorGenerators';
 import type { Language } from '../../utils/isomorphic/locatorGenerators';
@@ -626,9 +626,12 @@ export class InjectedScript {
     if (state === 'enabled')
       return !disabled;
 
-    const editable = !(['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) && element.hasAttribute('readonly'));
-    if (state === 'editable')
-      return !disabled && editable;
+    if (state === 'editable') {
+      const readonly = getReadonly(element);
+      if (readonly === 'error')
+        throw this.createStacklessError('Element is not an <input>, <textarea>, <select> or [contenteditable] and does not have a role allowing [aria-readonly]');
+      return !disabled && !readonly;
+    }
 
     if (state === 'checked' || state === 'unchecked') {
       const need = state === 'checked';

packages/playwright-core/src/server/injected/roleUtils.ts

@@ -860,6 +860,21 @@ export function getChecked(element: Element, allowMixed: boolean): boolean | 'mi
   return 'error';
 }
 
+// https://w3c.github.io/aria/#aria-readonly
+const kAriaReadonlyRoles = ['checkbox', 'combobox', 'grid', 'gridcell', 'listbox', 'radiogroup', 'slider', 'spinbutton', 'textbox', 'columnheader', 'rowheader', 'searchbox', 'switch', 'treegrid'];
+export function getReadonly(element: Element): boolean | 'error' {
+  const tagName = elementSafeTagName(element);
+  // https://www.w3.org/TR/wai-aria-1.2/#aria-checked
+  // https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings
+  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(tagName))
+    return element.hasAttribute('readonly');
+  if (kAriaReadonlyRoles.includes(getAriaRole(element) || ''))
+    return element.getAttribute('aria-readonly') === 'true';
+  if ((element as HTMLElement).isContentEditable)
+    return false;
+  return 'error';
+}
+
 export const kAriaPressedRoles = ['button'];
 export function getAriaPressed(element: Element): boolean | 'mixed' {
   // https://www.w3.org/TR/wai-aria-1.2/#aria-pressed

packages/playwright-core/types/types.d.ts

@@ -13680,7 +13680,9 @@ export interface Locator {
   }): Promise<boolean>;
 
   /**
-   * Returns whether the element is [editable](https://playwright.dev/docs/actionability#editable).
+   * Returns whether the element is [editable](https://playwright.dev/docs/actionability#editable). If the target element is not an `<input>`,
+   * `<textarea>`, `<select>`, `[contenteditable]` and does not have a role allowing `[aria-readonly]`, this method
+   * throws an error.
    *
    * **NOTE** If you need to assert that an element is editable, prefer
    * [expect(locator).toBeEditable([options])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-editable)

tests/page/expect-boolean.spec.ts

@@ -138,6 +138,13 @@ test.describe('toBeEditable', () => {
     const locator = page.locator('input');
     await expect(locator).not.toBeEditable({ editable: false });
   });
+
+  test('throws', async ({ page }) => {
+    await page.setContent('<button>');
+    const locator = page.locator('button');
+    const error = await expect(locator).toBeEditable().catch(e => e);
+    expect(error.message).toContain('Element is not an <input>, <textarea>, <select> or [contenteditable] and does not have a role allowing [aria-readonly]');
+  });
 });
 
 test.describe('toBeEnabled', () => {

tests/page/locator-convenience.spec.ts

@@ -119,7 +119,15 @@ it('isEnabled and isDisabled should work', async ({ page }) => {
 });
 
 it('isEditable should work', async ({ page }) => {
-  await page.setContent(`<input id=input1 disabled><textarea></textarea><input id=input2>`);
+  await page.setContent(`
+    <input id=input1 disabled>
+    <textarea></textarea>
+    <input id=input2>
+    <div contenteditable="true"></div>
+    <span id=span1 role=textbox aria-readonly=true></span>
+    <span id=span2 role=textbox></span>
+    <button>button</button>
+  `);
   await page.$eval('textarea', t => t.readOnly = true);
   const input1 = page.locator('#input1');
   expect(await input1.isEditable()).toBe(false);
@@ -130,6 +138,11 @@ it('isEditable should work', async ({ page }) => {
   const textarea = page.locator('textarea');
   expect(await textarea.isEditable()).toBe(false);
   expect(await page.isEditable('textarea')).toBe(false);
+  expect(await page.locator('div').isEditable()).toBe(true);
+  expect(await page.locator('#span1').isEditable()).toBe(false);
+  expect(await page.locator('#span2').isEditable()).toBe(true);
+  const error = await page.locator('button').isEditable().catch(e => e);
+  expect(error.message).toContain('Element is not an <input>, <textarea>, <select> or [contenteditable] and does not have a role allowing [aria-readonly]');
 });
 
 it('isChecked should work', async ({ page }) => {

tests/page/page-fill.spec.ts

@@ -238,8 +238,8 @@ it('should fill elements with existing value and selection', async ({ page, serv
 
 it('should throw nice error without injected script stack when element is not an <input>', async ({ page, server }) => {
   let error = null;
-  await page.goto(server.PREFIX + '/input/textarea.html');
-  await page.fill('body', '').catch(e => error = e);
+  await page.setContent(`<select><option>value1</option></select>`);
+  await page.fill('select', '').catch(e => error = e);
   expect(error.message).toContain('page.fill: Error: Element is not an <input>, <textarea> or [contenteditable] element\nCall log:');
 });