如何使用 TestCafe 单击 LWC 组件内的按钮？

Question

我正在编写一个 TestCafe 脚本来自动执行 Salesforce Lightning Web 组件 (LWC) 的测试。我需要与嵌套在几层组件内并具有特定属性的按钮进行交互。然而，尽管尝试了各种选择器，我似乎无法成功单击该按钮。 TestCafe 要么无法找到该按钮，要么报告该按钮不可见，即使它在屏幕上清晰可见。

这是我正在处理的按钮的 HTML 结构：

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

我尝试过的：

1. 按类别和名称属性选择：

const button = Selector('button.slds-button.slds-button_neutral[name="Account.New_Upload_Members"]');

2. 通过父 li 元素的 data-target-selection-name 属性进行选择：

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"]');

3. 在按钮内使用文本：

const button = Selector('button').withText('Upload Members');

这些方法都没有奏效。 TestCafe 要么找不到该按钮，要么报告该按钮不可见。

我在寻找什么： 我正在寻找一种可靠的方法来使用 TestCafe 与此按钮进行交互。如果有人可以提供一个可行的示例或指出我可能做错了什么，那将非常有帮助。欢迎任何见解或建议！

谢谢！

Answer 1

找到了解决方案，结果证明它非常微不足道，尽管并不明显。显然 Testcafe Salesforce 和 css 选择器不是最好的组合，但简单地切换到 XPath 立即解决了所有问题。可以毫无困难地找到元素，并且自动测试工作完美