Checking Selection State of Aura and LWC Checkboxes and Radio Buttons

Summary

With the current trend towards encapsulating web components using shadowDOM, it has become quite complicated to automate tasks which were once rather straight forward.

The starting point for this document has been this post in the Test Automation Trailblazer Community group which describes the problem that Selenium’s WebElement.isSelected() call is not working any longer when automatically testing the Salesforce application. 

This document explains how to achieve this check for selection for Aura and Lightning Web Component Checkboxes and Radiobuttons.

The Problem

LWC

If you want to check if a LWC radio button has been selected, you are facing the problem that the differences in the DOM tree are minute and — even worse — not helpful at all in the traditional Selenium test automation style. Please see this screenshot where the highlighted DOM element is the “Yes” radio button one time in de-selected state (upper part) and one time in selected state (lower part):

Screenshot: DOM Tree Comparison  Can you spot the difference? The lower part has a <span> element with class attribute “slds-radio_faux” which contains the pseudo element “::after”. Trying to get this pseudo element via a locator does not work.  If you want to check this yourself, please use this link to get to this LWC Radio Group sample page. 

Aura

With Aura’s checkbox button component there is absolutely no visual difference in the DOM tree:

Screenshot: Aura Component DOM Tree Snippet  If you want to check this yourself, please use this link to get to this Aura Checkbox sample page.

The Solution

In order to obtain proper locators for the solution to work, it is recommended to use the Chrome browser and install the 

LWC ShadowPath Generator extension.

Get the JavaScript Code for LWC

Please take the following steps:

1. Open the example page 
2. Make a right mouse click on the Sales radio button and select menu option Inspect. This will open the Console and take you to the <span> element with the label’s text.
3. In the DOM tree go a little bit up and select the <input> element right above the <label> element containing the currently selected <span> element (see 1 in screenshot Chrome Console - Elements and LWC ShadowPath).
4. Go to tab LWC ShadowPath (see 2 in screenshot Chrome Console - Elements and LWC ShadowPath).
5. Get the string labeled "jspath" (see 3 in screenshot Chrome Console - Elements and LWC ShadowPath) without the enclosing double quotes.

Screenshot: Chrome Console - Elements and LWC ShadowPath  To verify you got the right locator and can get the information, click on the tab Console and enter this command:

document.querySelector('lightning-radio-group').shadowRoot.querySelectorAll('input')[0].checked

 If you feel uneasy about the array index in the locator, please feel free to use a locator of your choice.  The JavaScript statement shown above should — depending on the state of selection — return true or false:

Screenshot: Chrome Console - Console  

In this screenshot the radio button “Yes” was not selected.

Get the JavaScript Code for Aura

Very similar to the steps outlined above are those for Aura components.

1. Open the example page
2. Make a right mouse click on the Selected checkbox and select menu option Inspect. This will open the Console and take you to the <input> element with the label’s text (similar to 1 in screenshot Chrome Console - Elements and LWC ShadowPath).
3. Go to tab LWC ShadowPath (see 2 in screenshot Chrome Console - Elements and LWC ShadowPath).
4. Get the string labeled "jspath" (see 3 in screenshot Chrome Console - Elements and LWC ShadowPath) without the enclosing double quotes.

To verify you got the right locator and can get the information, click on the tab Console (see screenshot Chrome Console - Console).and enter this command:

document.querySelectorAll('input')[2].checked

 If you feel uneasy about the array index in the locator, please feel free to use a locator of your choice.  The JavaScript statement shown above should — depending on the state of selection — return true or false.

Using the JavaScript Code in Selenium

If you are jusing Java-based Selenium, then your test automation code should call either the method

• executeScript or
• executeAsyncScript 

In most cases the former will suffice.

// Get the JavascriptExecutor 
JavascriptExecutor executor = (JavascriptExecutor) webDriver;
Boolean state = (Boolean) executor.executeScript(
    "return document.querySelector('lightning-radio-group').shadowRoot.querySelectorAll('input')[0].checked");

For more flexibility it is recommended to put this piece of code into a method and parameterize the locator.

Acknowledgements

Many thanks to the two Test Automation Trailblazer Community community members 

• Eddie Lukkien (https://trailblazer.me/id/eddielukkien) at Plauti and 
• Robin Gupta (https://trailblazer.me/id/rgupta1011) at AthenaHealth

who suggested this solution!

#LWC #LWC Component #Winter22Testing #Testing Automation #Selenium #Aura Lightning Components #Lightning Aura Component