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

使用protractor-react-selector

使ReactJS测试更加简化

protractor-react-selector是一个轻量级的插件，可帮助您使用道具和状态在REACT应用程序中定位Web元素。

您需要使用

安装插件

npm i -D protractor-react-selector

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

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

然后，在beforeAll`` hook or inside an onPrepare```钩子中，等待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运行时的实质性工具。

要查找更多示例，请访问以下tests

完整的blog可以在这里找到。

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

3 个答案: