Locating Inner Text with CSS or Xpath in Amazon

Question

I am teaching myself automation with Selenium web driver, and thought a good way was to learn off an ecommerce site such as Amazon. I am trying to locate inner text with CSS and used the following to verify logged in user name via page factory:

Locating Element with CSS:

@FindBy (how=How.CSS, using= "a:contains('Hello,Nichole')") WebElement
 loggedInUsernameText;

Error Message:

org.openqa.selenium.InvalidSelectorException: invalid selector: 
An invalid or illegal selector was specified

Unfortunately this did not work for me, so I tried to use XPath:

@FindBy (how=How.XPATH, using= "//*[contains(text(),('Hello,Nichole')]") WebElement loggedInUsernameText;

Error Message:

    org.openqa.selenium.InvalidSelectorException: invalid selector: 
    Unable to locate an element with the xpath expression //*[contains(text(),('Hello,Nichole')] because of the following error:
    SyntaxError: Failed to execute 'evaluate' on 'Document': 
The string '//*[contains(text(),('Hello,Nichole')]' is not a valid XPath expression.

This didn't work for me either- can someone please tell me what I am doing wrong?

Here is the locator for CSS and Xpath:

Hello, Nichole

CSS:

#nav-link-accountList > span.nav-line-1

XPath:

//*[@id="nav-link-accountList"]/span[1]

I am probably doing something really dumb! Let me know if I need to provide other information- oh to find it on the console it does specify to use $0- which I did use and it located it, so I am guessing I need to implement that somehow?

Answer 1

It's Pretty easy. Look at your XPath expression and the Syntax error:

You have added unwanted bracket "()" in your XPath.

Your XPath should be:

//*[contains(text(), 'Hello,Nichole')]

Using Page-Factory:

@FindBy (how=How.XPATH, using= "//*[contains(text(), 'Hello,Nichole')]")
 WebElement loggedInUsernameText;

Answer 2

CSS for the element

#nav-link-accountList  span.nav-line-1

XPath for the element

//a[@id='nav-link-accountList']/div/span[@class='nav-line-1']

You can modify the @FindBy section for CSS

 @FindBy (how=How.CSS, using= "#nav-link-accountList  span.nav-line-1") 
 WebElement loggedInUsernameText;

Also you could shorten the element definition

@FindBy(css = "#nav-link-accountList  span.nav-line-1")
WebElement loggedInUsernameText;

Mastering XPath and Mastering CSS for Selenium test automation engineers could be useful.