[terra-form-radio] Unable to click terra-form-radio in webdriver test

Bug Report

Description

When running our tests in our lowlight theme our test is unable to click on a radio button, terra-form-radio, that is inside a terra-toggle-section-header. This problem does not occur when we do not use our lowlight theme.

Steps to Reproduce

1. Create a terra-toggle-section-header with a radio button inside its content
2. Style elements with theme
3. Use webdriver test to open toggle-section-header
4. Use webdriver test to click on radio button Test should fail at this point

Additional Context / Screenshots

Here is the output of our failing test being run in normal vs lowlight-theme, we have screenshots for the errors if needed:

SUCCESS / NORMAL LIGHT

------------------------------------------------------------------
[firefox #1-0] Session ID: 58beaee5-73ae-4706-a0c6-23235eb7c5d5
[firefox #1-0] Spec: /Users/js062512/Work/Repo/radiology-search-js/test/wdio/Search/search-spec.js
[firefox #1-0] Running: firefox
[firefox #1-0]
[firefox #1-0] Search
[firefox #1-0]
[firefox #1-0]     patient criteria
[firefox #1-0]       ✓ should display the search page with criteria panel open, verify the age number fields are enabled
[firefox #1-0]       ✓ should remove focus
[firefox #1-0]       ✓ [Patient Criteria: age number fields enabled] to be within the mismatch tolerance
[firefox #1-0]       ✓ only the leftmost (from) error should be shown on invalid input
[firefox #1-0]       ✓ should remove focus
[firefox #1-0]       ✓ [Patient Criteria: age number field error] to be within the mismatch tolerance
[firefox #1-0]       ✓ the rightmost error should be shown if there is no error in the other field
[firefox #1-0]       ✓ should remove focus
[firefox #1-0]       ✓ [Patient Criteria: age invalid input] to be within the mismatch tolerance
[firefox #1-0]       ✓ should fail on negative input
[firefox #1-0]
[firefox #1-0]
[firefox #1-0] 10 passing (16s)
[firefox #1-0]

------------------------------------------------------------------
[chrome #0-0] Session ID: 04a9d757-cb59-4732-b013-3778998ba89e
[chrome #0-0] Spec: /Users/js062512/Work/Repo/radiology-search-js/test/wdio/Search/search-spec.js
[chrome #0-0] Running: chrome
[chrome #0-0]
[chrome #0-0] Search
[chrome #0-0]
[chrome #0-0]     patient criteria
[chrome #0-0]       ✓ should display the search page with criteria panel open, verify the age number fields are enabled
[chrome #0-0]       ✓ should remove focus
[chrome #0-0]       ✓ [Patient Criteria: age number fields enabled] to be within the mismatch tolerance
[chrome #0-0]       ✓ only the leftmost (from) error should be shown on invalid input
[chrome #0-0]       ✓ should remove focus
[chrome #0-0]       ✓ [Patient Criteria: age number field error] to be within the mismatch tolerance
[chrome #0-0]       ✓ the rightmost error should be shown if there is no error in the other field
[chrome #0-0]       ✓ should remove focus
[chrome #0-0]       ✓ [Patient Criteria: age invalid input] to be within the mismatch tolerance
[chrome #0-0]       ✓ should fail on negative input
[chrome #0-0]
[chrome #0-0]
[chrome #0-0] 10 passing (23s)
[chrome #0-0]

------------------------------------------------------------------
[internet explorer #2-0] Session ID: 28380170-1c4b-4390-afd0-f66eda98bf39
[internet explorer #2-0] Spec: /Users/js062512/Work/Repo/radiology-search-js/test/wdio/Search/search-spec.js
[internet explorer #2-0] Running: internet explorer
[internet explorer #2-0]
[internet explorer #2-0] Search
[internet explorer #2-0]
[internet explorer #2-0]     patient criteria
[internet explorer #2-0]       ✓ should display the search page with criteria panel open, verify the age number fields are enabled
[internet explorer #2-0]       ✓ should remove focus
[internet explorer #2-0]       ✓ [Patient Criteria: age number fields enabled] to be within the mismatch tolerance
[internet explorer #2-0]       ✓ only the leftmost (from) error should be shown on invalid input
[internet explorer #2-0]       ✓ should remove focus
[internet explorer #2-0]       ✓ [Patient Criteria: age number field error] to be within the mismatch tolerance
[internet explorer #2-0]       ✓ the rightmost error should be shown if there is no error in the other field
[internet explorer #2-0]       ✓ should remove focus
[internet explorer #2-0]       ✓ [Patient Criteria: age invalid input] to be within the mismatch tolerance
[internet explorer #2-0]       ✓ should fail on negative input
[internet explorer #2-0]
[internet explorer #2-0]
[internet explorer #2-0] 10 passing (1m, 29s)
[internet explorer #2-0]



==================================================================

FAILURE / LOWLIGHT THEME

------------------------------------------------------------------
[chrome #0-0] Session ID: 0f13702f-b24f-45a7-a00b-349fb4e1384c
[chrome #0-0] Spec: /Users/js062512/Work/Repo/radiology-search-js/test/wdio/Search/search-spec.js
[chrome #0-0] Running: chrome
[chrome #0-0]
[chrome #0-0] Search
[chrome #0-0]
[chrome #0-0]     patient criteria
[chrome #0-0]       1) should display the search page with criteria panel open, verify the age number fields are enabled
[chrome #0-0]       ✓ should remove focus
[chrome #0-0]       ✓ [Patient Criteria: age number fields enabled] to be within the mismatch tolerance
[chrome #0-0]       2) only the leftmost (from) error should be shown on invalid input
[chrome #0-0]       ✓ should remove focus
[chrome #0-0]       ✓ [Patient Criteria: age number field error] to be within the mismatch tolerance
[chrome #0-0]       3) the rightmost error should be shown if there is no error in the other field
[chrome #0-0]       ✓ should remove focus
[chrome #0-0]       ✓ [Patient Criteria: age invalid input] to be within the mismatch tolerance
[chrome #0-0]       4) should fail on negative input
[chrome #0-0]
[chrome #0-0]
[chrome #0-0] 6 passing (11s)
[chrome #0-0] 4 failing
[chrome #0-0]
[chrome #0-0] 1) patient criteria should display the search page with criteria panel open, verify the age number fields are enabled:
[chrome #0-0] unknown error: Element is not clickable at point (1, 313). Other element would receive the click: <div class="Toggle-module__toggle___34f0E" aria-hidden="false">...</div>
[chrome #0-0] Error: An unknown server-side error occurred while processing the command.
[chrome #0-0]     at elementIdClick("8") - click.js:20:22
[chrome #0-0]
[chrome #0-0] 2) patient criteria only the leftmost (from) error should be shown on invalid input:
[chrome #0-0] invalid element state: Element is not currently interactable and may not be manipulated
[chrome #0-0] Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
[chrome #0-0]     at elementIdValue("11", "151") - setValue.js:46:80
[chrome #0-0]
[chrome #0-0] 3) patient criteria the rightmost error should be shown if there is no error in the other field:
[chrome #0-0] invalid element state: Element is not currently interactable and may not be manipulated
[chrome #0-0] Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
[chrome #0-0]     at elementIdValue("11", "10") - setValue.js:46:80
[chrome #0-0]
[chrome #0-0] 4) patient criteria should fail on negative input:
[chrome #0-0] invalid element state: Element is not currently interactable and may not be manipulated
[chrome #0-0] Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
[chrome #0-0]     at elementIdValue("11", "-10") - setValue.js:46:80
[chrome #0-0]

------------------------------------------------------------------
[firefox #1-0] Session ID: 6bffe89a-d450-47b2-b8c0-9f03b7bc8bef
[firefox #1-0] Spec: /Users/js062512/Work/Repo/radiology-search-js/test/wdio/Search/search-spec.js
[firefox #1-0] Running: firefox
[firefox #1-0]
[firefox #1-0] Search
[firefox #1-0]
[firefox #1-0]     patient criteria
[firefox #1-0]       1) should display the search page with criteria panel open, verify the age number fields are enabled
[firefox #1-0]       ✓ should remove focus
[firefox #1-0]       ✓ [Patient Criteria: age number fields enabled] to be within the mismatch tolerance
[firefox #1-0]       2) only the leftmost (from) error should be shown on invalid input
[firefox #1-0]       ✓ should remove focus
[firefox #1-0]       ✓ [Patient Criteria: age number field error] to be within the mismatch tolerance
[firefox #1-0]       3) the rightmost error should be shown if there is no error in the other field
[firefox #1-0]       ✓ should remove focus
[firefox #1-0]       ✓ [Patient Criteria: age invalid input] to be within the mismatch tolerance
[firefox #1-0]       4) should fail on negative input
[firefox #1-0]
[firefox #1-0]
[firefox #1-0] 6 passing (15s)
[firefox #1-0] 4 failing
[firefox #1-0]
[firefox #1-0] 1) patient criteria should display the search page with criteria panel open, verify the age number fields are enabled:
[firefox #1-0] expected false to equal true
[firefox #1-0] AssertionError: expected false to equal true
[firefox #1-0]     at Context.it (/Users/js062512/Work/Repo/radiology-search-js/test/wdio/Search/search-spec.js:527:63)
[firefox #1-0]     at new Promise (<anonymous>)
[firefox #1-0]     at new F (/Users/js062512/Work/Repo/radiology-search-js/node_modules/core-js/library/modules/_export.js:36:28)
[firefox #1-0]
[firefox #1-0] 2) patient criteria only the leftmost (from) error should be shown on invalid input:
[firefox #1-0] Element is disabled and so may not be used for actions
Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
System info: host: '5a3f5415b434', ip: '172.17.0.6', os.name: 'Linux', os.arch: 'amd64', os.version: '3.10.0-862.9.1.el7.x86_64', java.version: '1.8.0_91'
Driver info: driver.version: unknown
[firefox #1-0] Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
[firefox #1-0]     at elementIdValue("11", "151") - setValue.js:46:80
[firefox #1-0]
[firefox #1-0] 3) patient criteria the rightmost error should be shown if there is no error in the other field:
[firefox #1-0] Element is disabled and so may not be used for actions
Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
System info: host: '5a3f5415b434', ip: '172.17.0.6', os.name: 'Linux', os.arch: 'amd64', os.version: '3.10.0-862.9.1.el7.x86_64', java.version: '1.8.0_91'
Driver info: driver.version: unknown
[firefox #1-0] Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
[firefox #1-0]     at elementIdValue("11", "10") - setValue.js:46:80
[firefox #1-0]
[firefox #1-0] 4) patient criteria should fail on negative input:
[firefox #1-0] Element is disabled and so may not be used for actions
Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
System info: host: '5a3f5415b434', ip: '172.17.0.6', os.name: 'Linux', os.arch: 'amd64', os.version: '3.10.0-862.9.1.el7.x86_64', java.version: '1.8.0_91'
Driver info: driver.version: unknown
[firefox #1-0] Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
[firefox #1-0]     at elementIdValue("11", "-10") - setValue.js:46:80
[firefox #1-0]

------------------------------------------------------------------
[internet explorer #2-0] Session ID: 47b8a9ac-03a5-41a7-b23c-ac61a8e45697
[internet explorer #2-0] Spec: /Users/js062512/Work/Repo/radiology-search-js/test/wdio/Search/search-spec.js
[internet explorer #2-0] Running: internet explorer
[internet explorer #2-0]
[internet explorer #2-0] Search
[internet explorer #2-0]
[internet explorer #2-0]     patient criteria
[internet explorer #2-0]       ✓ should display the search page with criteria panel open, verify the age number fields are enabled
[internet explorer #2-0]       ✓ should remove focus
[internet explorer #2-0]       ✓ [Patient Criteria: age number fields enabled] to be within the mismatch tolerance
[internet explorer #2-0]       ✓ only the leftmost (from) error should be shown on invalid input
[internet explorer #2-0]       ✓ should remove focus
[internet explorer #2-0]       ✓ [Patient Criteria: age number field error] to be within the mismatch tolerance
[internet explorer #2-0]       ✓ the rightmost error should be shown if there is no error in the other field
[internet explorer #2-0]       ✓ should remove focus
[internet explorer #2-0]       ✓ [Patient Criteria: age invalid input] to be within the mismatch tolerance
[internet explorer #2-0]       ✓ should fail on negative input
[internet explorer #2-0]
[internet explorer #2-0]
[internet explorer #2-0] 10 passing (1m, 40s)
[internet explorer #2-0]



==================================================================
Number of specs: 3


22 passing (111.90s)
8 failing

1) Search patient criteria should display the search page with criteria panel open, verify the age number fields are enabled:
unknown error: Element is not clickable at point (1, 313). Other element would receive the click: <div class="Toggle-module__toggle___34f0E" aria-hidden="false">...</div>
running chrome
Error: An unknown server-side error occurred while processing the command.
    at elementIdClick("8") - click.js:20:22

2) Search patient criteria should display the search page with criteria panel open, verify the age number fields are enabled:
expected false to equal true
running firefox
AssertionError: expected false to equal true
    at Context.it (/Users/js062512/Work/Repo/radiology-search-js/test/wdio/Search/search-spec.js:527:63)
    at new Promise (<anonymous>)
    at new F (/Users/js062512/Work/Repo/radiology-search-js/node_modules/core-js/library/modules/_export.js:36:28)

3) Search patient criteria only the leftmost (from) error should be shown on invalid input:
invalid element state: Element is not currently interactable and may not be manipulated
running chrome
Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
    at elementIdValue("11", "151") - setValue.js:46:80

4) Search patient criteria the rightmost error should be shown if there is no error in the other field:
invalid element state: Element is not currently interactable and may not be manipulated
running chrome
Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
    at elementIdValue("11", "10") - setValue.js:46:80

5) Search patient criteria only the leftmost (from) error should be shown on invalid input:
Element is disabled and so may not be used for actions
Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
System info: host: '5a3f5415b434', ip: '172.17.0.6', os.name: 'Linux', os.arch: 'amd64', os.version: '3.10.0-862.9.1.el7.x86_64', java.version: '1.8.0_91'
Driver info: driver.version: unknown
running firefox
Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
    at elementIdValue("11", "151") - setValue.js:46:80

6) Search patient criteria should fail on negative input:
invalid element state: Element is not currently interactable and may not be manipulated
running chrome
Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
    at elementIdValue("11", "-10") - setValue.js:46:80

7) Search patient criteria the rightmost error should be shown if there is no error in the other field:
Element is disabled and so may not be used for actions
Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
System info: host: '5a3f5415b434', ip: '172.17.0.6', os.name: 'Linux', os.arch: 'amd64', os.version: '3.10.0-862.9.1.el7.x86_64', java.version: '1.8.0_91'
Driver info: driver.version: unknown
running firefox
Error: An element command could not be completed because the element is in an invalid state (e.g. attempting to click a disabled element).
    at elementIdValue("11", "10") - setValue.js:46:80

8) Search patient criteria should fail on negative input:
Element is disabled and so may not be used for actions
Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
System info: host: '5a3f5415b434', ip: '172.17.0.6', os.name: 'Linux', os.arch: 'amd64', os.version: '3.10.0-862.9.1.el7.x86_64', java.version: '1.8.0_91'
Driver info: driver.version: unknown
running firefox

Expected Behavior

The expected behavior is for the test to function the same no matter the theme being applied and that when a webdriver test attempts to click an element that is contained inside a toggle-section-header for this click to succeed.

Environment

• Component Name and Version: terra-toggle-section-header @ 1.33.0 terra-form-radio @ 2.36.0
• Browser Name and Version: Chrome and Firefox
• Node/npm Version: [e.g. Node 8/npm 5] 5.6.0
• Webpack Version: webpack @ 4.29.0
• Operating System and version (desktop or mobile): macOS High Sierra @ 10.13.6

[neilpfeiffer]

Thanks @nramamurth - since a theme physically “switches” interactive elements for the radio-button item itself between the actual native input and a custom span with styling for the low-light theme, if the tests written needs to work across theme implementations, I would agree that the test should target an element that will be present in any and all themes - which in this case would be the label.

@Me999999999 – Seems like it is a fine fix to update the wdio test to click on the label, since that will be consistent with a theme on or off.

[emilyrohrbough]

@nramamurth Do we need to update our tests to click on the label then?