Verify Text using CSS or Xpath

Question

I am new to automation, Selenium Web Driver and am practicing code using Amazon. I want to verify my logged in user name (Hello, Nichole) on the Amazon Home Page but anything I enter using CSS or Xpath comes back in error. I am also using page factory-

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

I am not going to add my xpath expression because I tried too many variations, to no avail.

I have attached a screenshot of the HTML code-

Any help would be appreciated- let me know if I need to supply more info-

Answer 1

The way you are using cssSelector to find an element using some text, It doesn't allow in cssSelector. There is no such method in CSS selector to locate an element using text so for that you have to use xpath locator as below -

 //a[@id='nav-link-yourAccount']/span[contains(.,'Nichole')]

e.g.

 @FindBy (how=How.XPATH, using= "//a[@id='nav-link-yourAccount']/span[contains(.,'Nichole')]")
 WebElement loggedInUsernameText;

I would recommend the below CSS path to locate the same -

#nav-link-yourAccount>span:nth-of-type(1)

e.g.

 @FindBy (how=How.CSS, using= "#nav-link-yourAccount>span:nth-of-type(1)")
 WebElement loggedInUsernameText;

And then you can use the getText() method to grab the text

 System.out.println(loggedInUsernameText.getText());

Answer 2

Try getText() on the below xpath:

//a[@id = 'nav-link-accountList']/span