diff --git a/src/cdk-experimental/testing/protractor/protractor-element.ts b/src/cdk-experimental/testing/protractor/protractor-element.ts index b3f4fd0a5766..8ad28131e365 100644 --- a/src/cdk-experimental/testing/protractor/protractor-element.ts +++ b/src/cdk-experimental/testing/protractor/protractor-element.ts @@ -123,7 +123,8 @@ export class ProtractorElement implements TestElement { } async getAttribute(name: string): Promise { - return this.element.getAttribute(name); + return browser.executeScript( + `return arguments[0].getAttribute(arguments[1])`, this.element, name); } async hasClass(name: string): Promise { @@ -136,4 +137,8 @@ export class ProtractorElement implements TestElement { const {x: left, y: top} = await this.element.getLocation(); return {width, height, left, top}; } + + async getProperty(name: string): Promise { + return browser.executeScript(`return arguments[0][arguments[1]]`, this.element, name); + } } diff --git a/src/cdk-experimental/testing/test-element.ts b/src/cdk-experimental/testing/test-element.ts index 7711719a2eea..bb7a18f3ce7b 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. */ + getProperty(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..117e46c61384 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 getProperty(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..08fd18a17466 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.getProperty('value')).toBe('Yi'); await input.clear(); - expect(await input.getAttribute('value')).toBe(''); + expect(await input.getProperty('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.getProperty('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.getProperty('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.getProperty('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..4aa7e93ae33b 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.getProperty('value')).toBe('Yi'); await input.clear(); - expect(await input.getAttribute('value')).toBe(''); + expect(await input.getProperty('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.getProperty('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.getProperty('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.getProperty('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..9ad422945037 100644 --- a/src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts +++ b/src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts @@ -41,13 +41,13 @@ 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()).getProperty('checked'); return coerceBooleanProperty(await checked); } /** Gets a boolean promise indicating if the checkbox is in an indeterminate state. */ async isIndeterminate(): Promise { - const indeterminate = (await this._input()).getAttribute('indeterminate'); + const indeterminate = (await this._input()).getProperty('indeterminate'); return coerceBooleanProperty(await indeterminate); } @@ -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()).getProperty('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()).getProperty('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..63a132a5493e 100644 --- a/src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts +++ b/src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts @@ -41,13 +41,13 @@ 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()).getProperty('checked'); return coerceBooleanProperty(await checked); } /** Gets a boolean promise indicating if the checkbox is in an indeterminate state. */ async isIndeterminate(): Promise { - const indeterminate = (await this._input()).getAttribute('indeterminate'); + const indeterminate = (await this._input()).getProperty('indeterminate'); return coerceBooleanProperty(await indeterminate); } @@ -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()).getProperty('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..3e216f04d48b 100644 --- a/src/material-experimental/mdc-radio/harness/radio-harness.ts +++ b/src/material-experimental/mdc-radio/harness/radio-harness.ts @@ -57,7 +57,7 @@ export class MatRadioGroupHarness extends ComponentHarness { /** Gets the id of the radio-group. */ async getId(): Promise { - return (await this.host()).getAttribute('id'); + return (await this.host()).getProperty('id'); } /** Gets the selected radio-button in a radio-group. */ @@ -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()).getProperty('checked'); return coerceBooleanProperty(await checked); } @@ -197,7 +197,7 @@ export class MatRadioButtonHarness extends ComponentHarness { /** Gets a promise for the radio-button's id. */ async getId(): Promise { - return (await this.host()).getAttribute('id'); + return (await this.host()).getProperty('id'); } /** @@ -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()).getProperty('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..d3930f825c33 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()).getProperty('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..efe906a593b1 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()).getProperty('checked'); return coerceBooleanProperty(await checked); }