automated-testssalesforcetestcafesalesforce-lightninglwc

How to Click a Button Inside an LWC Component Using TestCafe?


I'm working on a TestCafe script to automate tests for a Salesforce Lightning Web Component (LWC). I need to interact with a button that is nested inside several layers of components and has specific attributes. However, despite trying various selectors, I can't seem to click the button successfully. TestCafe either fails to find the button or reports that it's not visible, even though it is clearly visible on the screen.

Here is the HTML structure of the button I’m dealing with:

<li class="visible" data-target-selection-name="sfdc:QuickAction.Account.New_Upload_Members" role="presentation">
    <runtime_platform_actions-action-renderer apiname="Account.New_Upload_Members" title="Upload Members">
        <runtime_platform_actions-executor-lightning-component>
            <slot>
                <slot>
                    <lightning-button variant="neutral" lwc-40a585din3p-host="">
                        <button lwc-40a585din3p="" class="slds-button slds-button_neutral" aria-disabled="false" name="Account.New_Upload_Members" type="button" part="button" kx-scope="button-neutral" kx-type="ripple" style="">
                            Upload Members
                        </button>
                    </lightning-button>
                </slot>
            </slot>
        </runtime_platform_actions-executor-lightning-component>
    </runtime_platform_actions-action-renderer>
</li>

What I've Tried:

  1. Selecting by class and name attributes:
const button = Selector('button.slds-button.slds-button_neutral[name="Account.New_Upload_Members"]');
  1. Selecting by the parent li element's data-target-selection-name attribute:
const liElement = Selector('li[data-target-selection-name="sfdc:QuickAction.Account.New_Upload_Members"]');
const button = liElement.find('button.slds-button.slds-button_neutral[name="Account.New_Upload_Members"]');
  1. Using text inside the button:
const button = Selector('button').withText('Upload Members');

None of these approaches have worked. TestCafe either can't find the button, or it reports that the button is not visible.

What I'm Looking For: I'm looking for a reliable method to interact with this button using TestCafe. It would be really helpful if someone could provide a working example or point out what I might be doing wrong. Any insights or suggestions are welcome!

Thank you!


Solution

  • The solution was found and it turned out to be quite trivial, although not obvious. Apparently Testcafe Salesforce and css selectors are not the best combination, but a simple switch to XPath instantly solved all the problems. Elements are found without any difficulties and autotests work perfectly