feat(cdk-experimental): method to get property value of test element

Most of the time harnesses are able to use `getAttribute` to retrieve data
from DOM elements, but there are edge-cases where it's not correct to
retrieve data through the attribute.

For example: Consider an `input` element which has a `value` attribute set to
the initial input value. Now when the value of the input changes through
interaction, the `value` attribute is not refreshed as it's a static attribute.

In that case, the harness should retrieve the value by reading the DOM element
property. This is needed in order to implement the `MatInputHarness`.

Author: devversion

src/cdk-experimental/testing/protractor/protractor-element.ts

@@ -51,6 +51,10 @@ export class ProtractorElement implements TestElement {
     return this.element.getAttribute(name);
   }
 
+  async getProperty(name: string): Promise<any> {
+    return browser.executeScript<any|undefined>(`return arguments[0]['${name}']`, this.element);
+  }
+
   async hasClass(name: string): Promise<boolean> {
     const classes = (await this.getAttribute('class')) || '';
     return new Set(classes.split(/\s+/).filter(c => c)).has(name);

src/cdk-experimental/testing/test-element.ts

@@ -44,6 +44,9 @@ export interface TestElement {
    */
   getAttribute(name: string): Promise<string | null>;
 
+  /** Gets the value of the given property from the element. */
+  getProperty(name: string): Promise<any | undefined>;
+
   /** Checks whether the element has the given class. */
   hasClass(name: string): Promise<boolean>;
 }

src/cdk-experimental/testing/testbed/unit-test-element.ts

@@ -101,6 +101,11 @@ export class UnitTestElement implements TestElement {
     return value;
   }
 
+  async getProperty(name: string): Promise<any|undefined> {
+    await this._stabilize();
+    return (this.element as any)[name];
+  }
+
   async hasClass(name: string): Promise<boolean> {
     await this._stabilize();
     return this.element.classList.contains(name);

src/cdk-experimental/testing/tests/protractor.e2e.spec.ts

@@ -215,6 +215,12 @@ describe('ProtractorHarnessEnvironment', () => {
       expect(await memo.getAttribute('value')).toBe(memoStr);
     });
 
+    it('should be able to getProperty', async () => {
+      const memo = await harness.memo();
+      await memo.sendKeys('new-value');
+      expect(await memo.getProperty('value')).toBe('new-value');
+    });
+
     it('should be able to getCssValue', async () => {
       const title = await harness.title();
       expect(await title.getCssValue('height')).toBe('50px');

src/cdk-experimental/testing/tests/testbed.spec.ts

@@ -234,6 +234,12 @@ describe('TestbedHarnessEnvironment', () => {
       expect(await memo.getAttribute('value')).toBe(memoStr);
     });
 
+    it('should be able to getProperty', async () => {
+      const memo = await harness.memo();
+      await memo.sendKeys('new-value');
+      expect(await memo.getProperty('value')).toBe('new-value');
+    });
+
     it('should be able to getCssValue', async () => {
       const title = await harness.title();
       expect(await title.getCssValue('height')).toBe('50px');