Find a specific element by Text from a list that is under shadow-root node

Question

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?

Answer 1

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.