diff --git a/src/cdk-experimental/testing/protractor/protractor-element.ts b/src/cdk-experimental/testing/protractor/protractor-element.ts index b3f4fd0a5766..8c61478b9b83 100644 --- a/src/cdk-experimental/testing/protractor/protractor-element.ts +++ b/src/cdk-experimental/testing/protractor/protractor-element.ts @@ -123,7 +123,7 @@ export class ProtractorElement implements TestElement { } async getAttribute(name: string): Promise { - return this.element.getAttribute(name); + return browser.executeScript(`return arguments[0].getAttribute('${name}')`, this.element); } async hasClass(name: string): Promise { @@ -136,4 +136,8 @@ export class ProtractorElement implements TestElement { const {x: left, y: top} = await this.element.getLocation(); return {width, height, left, top}; } + + async getPropertyValue(name: string): Promise { + return browser.executeScript(`return arguments[0]['${name}']`, this.element); + } } diff --git a/src/cdk-experimental/testing/test-element.ts b/src/cdk-experimental/testing/test-element.ts index 7711719a2eea..3e85b01014a3 100644 --- a/src/cdk-experimental/testing/test-element.ts +++ b/src/cdk-experimental/testing/test-element.ts @@ -101,4 +101,7 @@ export interface TestElement { /** Gets the dimensions of the element. */ getDimensions(): Promise; + + /** Gets the value of a property of an element. */ + getPropertyValue(name: string): Promise; } diff --git a/src/cdk-experimental/testing/testbed/unit-test-element.ts b/src/cdk-experimental/testing/testbed/unit-test-element.ts index 8cbcc8af497e..e9ee7b5ecba0 100644 --- a/src/cdk-experimental/testing/testbed/unit-test-element.ts +++ b/src/cdk-experimental/testing/testbed/unit-test-element.ts @@ -120,14 +120,7 @@ export class UnitTestElement implements TestElement { async getAttribute(name: string): Promise { await this._stabilize(); - let value = this.element.getAttribute(name); - // If cannot find attribute in the element, also try to find it in property, - // this is useful for input/textarea tags. - if (value === null && name in this.element) { - // We need to cast the element so we can access its properties via string indexing. - return (this.element as unknown as {[key: string]: string|null})[name]; - } - return value; + return this.element.getAttribute(name); } async hasClass(name: string): Promise { @@ -139,4 +132,9 @@ export class UnitTestElement implements TestElement { await this._stabilize(); return this.element.getBoundingClientRect(); } + + async getPropertyValue(name: string): Promise { + await this._stabilize(); + return (this.element as any)[name]; + } } diff --git a/src/cdk-experimental/testing/tests/protractor.e2e.spec.ts b/src/cdk-experimental/testing/tests/protractor.e2e.spec.ts index 7486ea22ea09..32d887368ea4 100644 --- a/src/cdk-experimental/testing/tests/protractor.e2e.spec.ts +++ b/src/cdk-experimental/testing/tests/protractor.e2e.spec.ts @@ -179,10 +179,10 @@ describe('ProtractorHarnessEnvironment', () => { it('should be able to clear', async () => { const input = await harness.input(); await input.sendKeys('Yi'); - expect(await input.getAttribute('value')).toBe('Yi'); + expect(await input.getPropertyValue('value')).toBe('Yi'); await input.clear(); - expect(await input.getAttribute('value')).toBe(''); + expect(await input.getPropertyValue('value')).toBe(''); }); it('should be able to click', async () => { @@ -204,7 +204,7 @@ describe('ProtractorHarnessEnvironment', () => { const value = await harness.value(); await input.sendKeys('Yi'); - expect(await input.getAttribute('value')).toBe('Yi'); + expect(await input.getPropertyValue('value')).toBe('Yi'); expect(await value.text()).toBe('Input: Yi'); }); @@ -236,7 +236,7 @@ describe('ProtractorHarnessEnvironment', () => { `; const memo = await harness.memo(); await memo.sendKeys(memoStr); - expect(await memo.getAttribute('value')).toBe(memoStr); + expect(await memo.getPropertyValue('value')).toBe(memoStr); }); it('should be able to getCssValue', async () => { @@ -254,6 +254,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', () => { diff --git a/src/cdk-experimental/testing/tests/testbed.spec.ts b/src/cdk-experimental/testing/tests/testbed.spec.ts index bfd77c8ec398..978d000b9db2 100644 --- a/src/cdk-experimental/testing/tests/testbed.spec.ts +++ b/src/cdk-experimental/testing/tests/testbed.spec.ts @@ -199,10 +199,10 @@ describe('TestbedHarnessEnvironment', () => { it('should be able to clear', async () => { const input = await harness.input(); await input.sendKeys('Yi'); - expect(await input.getAttribute('value')).toBe('Yi'); + expect(await input.getPropertyValue('value')).toBe('Yi'); await input.clear(); - expect(await input.getAttribute('value')).toBe(''); + expect(await input.getPropertyValue('value')).toBe(''); }); it('should be able to click', async () => { @@ -224,7 +224,7 @@ describe('TestbedHarnessEnvironment', () => { const value = await harness.value(); await input.sendKeys('Yi'); - expect(await input.getAttribute('value')).toBe('Yi'); + expect(await input.getPropertyValue('value')).toBe('Yi'); expect(await value.text()).toBe('Input: Yi'); }); @@ -255,7 +255,7 @@ describe('TestbedHarnessEnvironment', () => { `; const memo = await harness.memo(); await memo.sendKeys(memoStr); - expect(await memo.getAttribute('value')).toBe(memoStr); + expect(await memo.getPropertyValue('value')).toBe(memoStr); }); it('should be able to getCssValue', async () => { @@ -271,6 +271,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', () => { diff --git a/src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts b/src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts index 6a1eae494a66..fc9f43ad8bd9 100644 --- a/src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts +++ b/src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts @@ -41,7 +41,7 @@ export class MatCheckboxHarness extends ComponentHarness { /** Gets a boolean promise indicating if the checkbox is checked. */ async isChecked(): Promise { - const checked = (await this._input()).getAttribute('checked'); + const checked = (await this._input()).getPropertyValue('checked'); return coerceBooleanProperty(await checked); } @@ -59,7 +59,7 @@ export class MatCheckboxHarness extends ComponentHarness { /** Gets a boolean promise indicating if the checkbox is required. */ async isRequired(): Promise { - const required = (await this._input()).getAttribute('required'); + const required = (await this._input()).getPropertyValue('required'); return coerceBooleanProperty(await required); } @@ -76,7 +76,7 @@ export class MatCheckboxHarness extends ComponentHarness { /** Gets a promise for the checkbox's value. */ async getValue(): Promise { - return (await this._input()).getAttribute('value'); + return (await this._input()).getPropertyValue('value'); } /** Gets a promise for the checkbox's aria-label. */ diff --git a/src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts b/src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts index 03b040f3422e..add1eaeb8bb0 100644 --- a/src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts +++ b/src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts @@ -41,7 +41,7 @@ export class MatCheckboxHarness extends ComponentHarness { /** Gets a boolean promise indicating if the checkbox is checked. */ async isChecked(): Promise { - const checked = (await this._input()).getAttribute('checked'); + const checked = (await this._input()).getPropertyValue('checked'); return coerceBooleanProperty(await checked); } @@ -76,7 +76,7 @@ export class MatCheckboxHarness extends ComponentHarness { /** Gets a promise for the checkbox's value. */ async getValue(): Promise { - return (await this._input()).getAttribute('value'); + return (await this._input()).getPropertyValue('value'); } /** Gets a promise for the checkbox's aria-label. */ diff --git a/src/material-experimental/mdc-radio/harness/radio-harness.ts b/src/material-experimental/mdc-radio/harness/radio-harness.ts index 325749ac2653..300a818c0219 100644 --- a/src/material-experimental/mdc-radio/harness/radio-harness.ts +++ b/src/material-experimental/mdc-radio/harness/radio-harness.ts @@ -174,7 +174,7 @@ export class MatRadioButtonHarness extends ComponentHarness { /** Whether the radio-button is checked. */ async isChecked(): Promise { - const checked = (await this._input()).getAttribute('checked'); + const checked = (await this._input()).getPropertyValue('checked'); return coerceBooleanProperty(await checked); } @@ -208,7 +208,7 @@ export class MatRadioButtonHarness extends ComponentHarness { * intentionally have the `[object Object]` as return value. */ async getValue(): Promise { - return (await this._input()).getAttribute('value'); + return (await this._input()).getPropertyValue('value'); } /** Gets a promise for the radio-button's label text. */ diff --git a/src/material-experimental/mdc-slide-toggle/harness/mdc-slide-toggle-harness.ts b/src/material-experimental/mdc-slide-toggle/harness/mdc-slide-toggle-harness.ts index 9cff45770a64..2a1a8143103b 100644 --- a/src/material-experimental/mdc-slide-toggle/harness/mdc-slide-toggle-harness.ts +++ b/src/material-experimental/mdc-slide-toggle/harness/mdc-slide-toggle-harness.ts @@ -36,7 +36,7 @@ export class MatSlideToggleHarness extends ComponentHarness { /** Gets a boolean promise indicating if the slide-toggle is checked. */ async isChecked(): Promise { - const checked = (await this._input()).getAttribute('checked'); + const checked = (await this._input()).getPropertyValue('checked'); return coerceBooleanProperty(await checked); } diff --git a/src/material-experimental/mdc-slide-toggle/harness/slide-toggle-harness.ts b/src/material-experimental/mdc-slide-toggle/harness/slide-toggle-harness.ts index 78e80ba23519..409ecabcc16c 100644 --- a/src/material-experimental/mdc-slide-toggle/harness/slide-toggle-harness.ts +++ b/src/material-experimental/mdc-slide-toggle/harness/slide-toggle-harness.ts @@ -36,7 +36,7 @@ export class MatSlideToggleHarness extends ComponentHarness { /** Gets a boolean promise indicating if the slide-toggle is checked. */ async isChecked(): Promise { - const checked = (await this._input()).getAttribute('checked'); + const checked = (await this._input()).getPropertyValue('checked'); return coerceBooleanProperty(await checked); }