I have a web page that I am automating using WebDriverIO and Typescript. I want to click on a radio-button from a list of radio-buttons that is deep under shadow-root nodes, as follow:
This is how I did and it works (I want to click on radio-button with text = "Fraud")
var listOfClassifications = await $("#classification").shadow$("wc-flyout").$("[slot='flyout-content']").$$("wc-dropdown-option");
await listOfClassifications[4].click();
Now, the order of this list could be changed, so I am trying to click on this radio-button by Text. I tried the followings:
await $("#classification").shadow$("wc-flyout").$(".dropdown-options").shadow$("wc-checkbox*=Fraud").click();
or
await $("#classification").shadow$("*=Fraud").click();
but none worked.
How can I find this specific element in this deep shadow-root nodes?
My solution is, I write a function to loop through the array of items under shadow-root
, get text of each item and compare text and click on the item has the text I am looking for, as follow:
var listOfClassifications = await this.dialogClassification.shadow$("wc-flyout").$("[slot='flyout-content']").$$("wc-dropdown-option");
for (var i = 0; i < listOfClassifications.length; i++) {
var classification = await listOfClassifications[i].shadow$("div").$("wc-checkbox").getText();
if (classification === "Fraud") {
await listOfClassifications[i].click();
break;
}
}
if someone has another solution, please share.