feat(text selector): match button input by value (#1657)

Inputs of type button and submit are rendered with their value as text,
so we match them by text.

Fixes #1427.

Author: dgozman

docs/selectors.md

@@ -78,6 +78,8 @@ Text engine finds an element that contains a text node with passed text. Example
 
 > **NOTE** Text engine searches for elements inside open shadow roots, but not inside closed shadow roots or iframes.
 
+> **NOTE** Input elements of the type `button` and `submit` are rendered with their value as text, and text engine finds them. For example, `text=Login` matches `<input type=button value="Login">`.
+
 > **NOTE** Malformed selector starting with `"` is automatically transformed to text selector. For example, Playwright converts `page.click('"Login"')` to `page.click('text="Login"')`.
 
 ### id, data-testid, data-test-id, data-test

src/injected/textSelectorEngine.ts

@@ -68,6 +68,8 @@ function queryInternal(root: SelectorRoot, matcher: Matcher): Element | undefine
     const node = walker.currentNode;
     if (node.nodeType === Node.ELEMENT_NODE) {
       const element = node as Element;
+      if ((element instanceof HTMLInputElement) && (element.type === 'submit' || element.type === 'button') && matcher(element.value))
+        return element;
       if (element.shadowRoot)
         shadowRoots.push(element.shadowRoot);
     } else {
@@ -92,6 +94,8 @@ function queryAllInternal(root: SelectorRoot, matcher: Matcher, result: Element[
     const node = walker.currentNode;
     if (node.nodeType === Node.ELEMENT_NODE) {
       const element = node as Element;
+      if ((element instanceof HTMLInputElement) && (element.type === 'submit' || element.type === 'button') && matcher(element.value))
+        result.push(element);
       if (element.shadowRoot)
         shadowRoots.push(element.shadowRoot);
     } else {

test/queryselector.spec.js

@@ -541,6 +541,12 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROMI
       expect(await page.$(`text="with"`)).toBe(null);
     });
 
+    it('should match input[type=button|submit]', async({page}) => {
+      await page.setContent(`<input type="submit" value="hello"><input type="button" value="world">`);
+      expect(await page.$eval(`text=hello`, e => e.outerHTML)).toBe('<input type="submit" value="hello">');
+      expect(await page.$eval(`text=world`, e => e.outerHTML)).toBe('<input type="button" value="world">');
+    });
+
     it('should work for open shadow roots', async({page, server}) => {
       await page.goto(server.PREFIX + '/deep-shadow.html');
       expect(await page.$eval(`text=root1`, e => e.outerHTML)).toBe('<span>Hello from root1</span>');