fix(cdk/testing): protractor element not extracting hidden text (#21540)

We use Protractor's `getText` method to extract text, but the problem is that it's likely based
on `HTMLElement.innerText` which excludes text from hidden elements.

These changes switch to using `textContent` to bring the behavior in-line with the `UnitTestElement`.

Author: crisbeto

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

@@ -183,7 +183,8 @@ export class ProtractorElement implements TestElement {
     if (options?.exclude) {
       return browser.executeScript(_getTextWithExcludedElements, this.element, options.exclude);
     }
-    return this.element.getText();
+    // We don't go through Protractor's `getText`, because it excludes text from hidden elements.
+    return browser.executeScript(`return (arguments[0].textContent || '').trim()`, this.element);
   }
 
   /** Gets the value for the given attribute from the element. */

src/cdk/testing/tests/cross-environment.spec.ts

@@ -617,6 +617,12 @@ export function crossEnvironmentSpecs(
       await button.blur();
       expect(await button.isFocused()).toBe(false);
     });
+
+    it('should be able to get the text of a hidden element', async () => {
+      const hiddenElement = await harness.hidden();
+      expect(await hiddenElement.text()).toBe('Hello');
+    });
+
   });
 }
 

src/cdk/testing/tests/harnesses/main-component-harness.ts

@@ -103,6 +103,7 @@ export class MainComponentHarness extends ComponentHarness {
   readonly hoverTest = this.locatorFor('#hover-box');
   readonly customEventBasic = this.locatorFor('#custom-event-basic');
   readonly customEventObject = this.locatorFor('#custom-event-object');
+  readonly hidden = this.locatorFor('.hidden-element');
 
   private _testTools = this.locatorFor(SubComponentHarness);
 

src/cdk/testing/tests/test-main-component.html

@@ -81,3 +81,4 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
   (mouseenter)="isHovering = true"
   (mouseleave)="isHovering = false"
   style="width: 50px; height: 50px; background: hotpink;"></div>
+<div class="hidden-element" style="display: none;">Hello</div>

src/material-experimental/mdc-card/testing/card-harness.e2e.spec.ts

@@ -14,15 +14,11 @@ describe('card harness', () => {
 
   it('should get card text', async () => {
     const card = await loader.getHarness(MatCardHarness);
-    expect(await card.getText()).toBe([
-      'Shiba Inu',
-      'Dog Breed',
-      'The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from' +
-      ' Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu' +
-      ' was originally bred for hunting.',
-      'LIKE',
-      'SHARE'
-    ].join('\n'));
+    expect(await card.getText()).toBe('Shiba InuDog Breed The Shiba Inu is the smallest of ' +
+                                      'the six original and distinct spitz breeds of dog from ' +
+                                      'Japan. A small, agile dog that copes very well with ' +
+                                      'mountainous terrain, the Shiba Inu was originally bred ' +
+                                      'for hunting. LIKESHARE');
   });
 
   it('should get title text', async () => {

src/material/card/testing/card-harness.e2e.spec.ts

@@ -14,15 +14,11 @@ describe('card harness', () => {
 
   it('should get card text', async () => {
     const card = await loader.getHarness(MatCardHarness);
-    expect(await card.getText()).toBe([
-      'Shiba Inu',
-      'Dog Breed',
-      'The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from' +
-      ' Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu' +
-      ' was originally bred for hunting.',
-      'LIKE',
-      'SHARE'
-    ].join('\n'));
+    expect(await card.getText()).toBe('Shiba InuDog Breed The Shiba Inu is the smallest of ' +
+                                      'the six original and distinct spitz breeds of dog from ' +
+                                      'Japan. A small, agile dog that copes very well with ' +
+                                      'mountainous terrain, the Shiba Inu was originally bred ' +
+                                      'for hunting. LIKESHARE');
   });
 
   it('should get title text', async () => {

src/material/toolbar/testing/toolbar-harness.e2e.spec.ts

@@ -16,7 +16,7 @@ describe('toolbar harness', () => {
     const toolbar = await loader.getHarness(MatToolbarHarness);
 
     expect(await toolbar.getRowsAsText())
-      .toEqual(['Custom Toolbar', 'Second Line\nverified_user', 'Third Line\nfavorite\ndelete']);
+      .toEqual(['Custom Toolbar', 'Second Lineverified_user', 'Third Linefavoritedelete']);
   });
 
   it('should have multiple rows', async () => {