fix(material-experimental): unit tests getting wrong root element and add API for getting property value

Based on the discussion in #16697 (comment), these changes fix a couple of things that I ran into while doing the `mat-autocomplete` test harness in #16620.

* Fixes querying for elements outside the harness not working, because the wrong root node was set.
* Adds an API to retrieve the value of a property on a DOM node.

Author: crisbeto

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

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

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

@@ -94,4 +94,7 @@ export interface TestElement {
 
   /** Checks whether the element has the given class. */
   hasClass(name: string): Promise<boolean>;
+
+  /** Gets the value of a property of an element. */
+  getPropertyValue(name: string): Promise<any>;
 }

src/cdk-experimental/testing/testbed/testbed-harness-environment.ts

@@ -37,7 +37,7 @@ export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
   }
 
   protected getDocumentRoot(): Element {
-    return this._fixture.nativeElement;
+    return document.body;
   }
 
   protected createTestElement(element: Element): TestElement {

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

@@ -126,4 +126,9 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
     return this.element.classList.contains(name);
   }
+
+  async getPropertyValue(name: string): Promise<any> {
+    await this._stabilize();
+    return (this.element as any)[name];
+  }
 }

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

@@ -242,6 +242,12 @@ describe('ProtractorHarnessEnvironment', () => {
       expect(await (await browser.switchTo().activeElement()).getText())
           .not.toBe(await button.text());
     });
+
+    it('should be able to get the value of a property', async () => {
+      const input = await harness.input();
+      await input.sendKeys('Hello');
+      expect(await input.getPropertyValue('value')).toBe('Hello');
+    });
   });
 
   describe('HarnessPredicate', () => {

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

@@ -259,6 +259,12 @@ describe('TestbedHarnessEnvironment', () => {
       await button.blur();
       expect(activeElementText()).not.toBe(await button.text());
     });
+
+    it('should be able to get the value of a property', async () => {
+      const input = await harness.input();
+      await input.sendKeys('Hello');
+      expect(await input.getPropertyValue('value')).toBe('Hello');
+    });
   });
 
   describe('HarnessPredicate', () => {