feat(api): add getAttribute, innerText, innerHTML, textContent (#1717)

docs/api.md

@@ -2494,13 +2494,17 @@ ElementHandle instances can be used as an argument in [`page.$eval()`](#pageeval
 - [elementHandle.dblclick([options])](#elementhandledblclickoptions)
 - [elementHandle.fill(value[, options])](#elementhandlefillvalue-options)
 - [elementHandle.focus()](#elementhandlefocus)
+- [elementHandle.getAttribute(name)](#elementhandlegetattributename)
 - [elementHandle.hover([options])](#elementhandlehoveroptions)
+- [elementHandle.innerHTML()](#elementhandleinnerhtml)
+- [elementHandle.innerText()](#elementhandleinnertext)
 - [elementHandle.ownerFrame()](#elementhandleownerframe)
 - [elementHandle.press(key[, options])](#elementhandlepresskey-options)
 - [elementHandle.screenshot([options])](#elementhandlescreenshotoptions)
 - [elementHandle.scrollIntoViewIfNeeded()](#elementhandlescrollintoviewifneeded)
 - [elementHandle.selectOption(values[, options])](#elementhandleselectoptionvalues-options)
 - [elementHandle.setInputFiles(files[, options])](#elementhandlesetinputfilesfiles-options)
+- [elementHandle.textContent()](#elementhandletextcontent)
 - [elementHandle.toString()](#elementhandletostring)
 - [elementHandle.type(text[, options])](#elementhandletypetext-options)
 - [elementHandle.uncheck([options])](#elementhandleuncheckoptions)
@@ -2671,6 +2675,12 @@ If element is not a text `<input>`, `<textarea>` or `[contenteditable]` element,
 
 Calls [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the element.
 
+#### elementHandle.getAttribute(name)
+- `name` <[string]> Attribute name to get the value for.
+- returns: <[Promise]<null|[string]>> Resolves to the attribute value.
+
+Returns element attribute value.
+
 #### elementHandle.hover([options])
 - `options` <[Object]>
   - `position` <[Object]> A point to hover relative to the top-left corner of element padding box. If not specified, hovers over some visible point of the element.
@@ -2688,6 +2698,12 @@ Calls [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
 This method scrolls element into view if needed, and then uses [page.mouse](#pagemouse) to hover over the center of the element.
 If the element is detached from DOM, the method throws an error.
 
+#### elementHandle.innerHTML()
+- returns: <[Promise]<null|[string]>> Resolves to the `element.innerHTML`.
+
+#### elementHandle.innerText()
+- returns: <[Promise]<null|[string]>> Resolves to the `element.innerText`.
+
 #### elementHandle.ownerFrame()
 - returns: <[Promise]<?[Frame]>> Returns the frame containing the given element.
 
@@ -2780,6 +2796,9 @@ This method expects `elementHandle` to point to an [input element](https://devel
 
 Sets the value of the file input to these file paths or files. If some of the  `filePaths` are relative paths, then they are resolved relative to the [current working directory](https://nodejs.org/api/process.html#process_process_cwd). For empty array, clears the selected files.
 
+#### elementHandle.textContent()
+- returns: <[Promise]<null|[string]>> Resolves to the `node.textContent`.
+
 #### elementHandle.toString()
 - returns: <[string]>
 

src/dom.ts

@@ -114,6 +114,37 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     return this._page._delegate.getContentFrame(this);
   }
 
+  async getAttribute(name: string): Promise<string | null> {
+    return this._evaluateInUtility(({node}, name: string) => {
+      if (node.nodeType !== Node.ELEMENT_NODE)
+        throw new Error('Not an element');
+      const element = node as unknown as Element;
+      return element.getAttribute(name);
+    }, name);
+  }
+
+  async textContent(): Promise<string | null> {
+    return this._evaluateInUtility(({node}) => node.textContent, {});
+  }
+
+  async innerText(): Promise<string | null> {
+    return this._evaluateInUtility(({node}) => {
+      if (node.nodeType !== Node.ELEMENT_NODE)
+        throw new Error('Not an element');
+      const element = node as unknown as HTMLElement;
+      return element.innerText;
+    }, {});
+  }
+
+  async innerHTML(): Promise<string | null> {
+    return this._evaluateInUtility(({node}) => {
+      if (node.nodeType !== Node.ELEMENT_NODE)
+        throw new Error('Not an element');
+      const element = node as unknown as Element;
+      return element.innerHTML;
+    }, {});
+  }
+
   async _scrollRectIntoViewIfNeeded(rect?: types.Rect): Promise<void> {
     debugInput('scrolling into veiw if needed...');
     await this._page._delegate.scrollRectIntoViewIfNeeded(this, rect);

test/assets/dom.html

@@ -0,0 +1,2 @@
+<div id="outer" name="value"><div id="inner">Text,
+more text</div></div>

test/elementhandle.spec.js

@@ -326,3 +326,26 @@ describe('ElementHandle.fill', function() {
     expect(await page.evaluate(() => result)).toBe('some value');
   });
 });
+
+describe('ElementHandle convenience API', function() {
+  it('getAttribute should work', async({page, server}) => {
+    await page.goto(`${server.PREFIX}/dom.html`);
+    const handle = await page.$('#outer');
+    expect(await handle.getAttribute('name')).toBe('value');
+  });
+  it('innerHTML should work', async({page, server}) => {
+    await page.goto(`${server.PREFIX}/dom.html`);
+    const handle = await page.$('#outer');
+    expect(await handle.innerHTML()).toBe('<div id="inner">Text,\nmore text</div>');
+  });
+  it('innerText should work', async({page, server}) => {
+    await page.goto(`${server.PREFIX}/dom.html`);
+    const handle = await page.$('#inner');
+    expect(await handle.innerText()).toBe('Text, more text');
+  });
+  it('textContent should work', async({page, server}) => {
+    await page.goto(`${server.PREFIX}/dom.html`);
+    const handle = await page.$('#inner');
+    expect(await handle.textContent()).toBe('Text,\nmore text');
+  });
+});