javascripttypescriptautomationui-automationwebdriver-io

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


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:

enter image description here

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?


Solution

  • 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.