使用量角器在 Reactjs 非角度站点中定位 Span 标签内的元素

Question

我需要单击span标签内的"登录"，代码看起来像

<div data-reactroot>
<div class "ant-dropdown ant-dropdown-placement-bottomRight ant-dropdown-hidden" style="left 632.234px; top 65px;">
<ul class="ant-dropdown-menu ant-dropdown-menu-light ant-dropdown-menu-root ant-dropdown-menu-vertical" role="menu" style="border" 1px solid rgba(0, 0, 0, 0.23);">
<li class="ant-dropdown-menu-item" role="menuitem">...</li>
<li class=" ant-dropdown-menu-item-divider"></li>
<li class="ant-dropdown-menu-item" role="menuitem">...</li>
<span>Login</span>
</li>

https://i.stack.imgur.com/qDt4z.png

我尝试使用以下代码，它不起作用：

browser.driver.findElement(by.cssContainingText('ant-dropdown-menu-item', 'Login'))

我收到错误，如下所示：

Message: 
Failed: Invalid locator
Stack:
TypeError: Invalid locator

Answer 1

试试：

browser.driver.findElement(by.cssContainingText('.ant-dropdown-menu-item', 'Login'))

在css选择器类中需要有.。

编辑：browser.driver.findElement(by.css('.ant-dropdown-menu-item > span'))

Answer 2

它现在可以工作了，我尝试使用以下代码

element(by.xpath("//span[. = 'Login']")).click();

Answer 3

ReactJS测试通过量角器-反应-选择器变得更加简化

量角器-反应-选择器是一个轻量级插件，可帮助您使用道具和状态在 REACT 应用程序中定位 Web 元素。

您需要安装插件

npm i -D protractor-react-selector

然后，您需要将插件添加到配置文件中：

exports.config = {
// ... the rest of your config
plugins: [
{
package: 'protractor-react-selector'
}
]
}

然后，在 onPrepare''' 钩子beforeAll`` hook or inside an中，等待 React 加载到您的应用程序中，如下所示：

beforeAll(() => {
await browser.get('http://localhost:3000/myApp')
await browser.waitForReact()
})

然后你可以使用element(by.react)来获取 react 元素。

const myElement = element(
by.react('MyComponent', { someBooleanProp: true }, { someBooleanState: true })
)
myElement.click();

为了测试 React 元素，你不应该依赖 HTML DOM 结构，因为大多数开发人员使用创建动态 HTML 运行时的材料工具。

要查找更多示例，请访问这些测试

完整的博客可以在这里找到。