Search code examples
node.jsprotractorwebautomation

Locating element inside Span tag in Reactjs non angular site using Protractor

I need to click on "login" which is inside span tag, code looks like

<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.sstatic.net/qDt4z.png

I tried using the code below, it does not work:

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

I'm getting an error see below:

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

  • It's now working i'm tried using the following code below

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