Selenium : DOM element is not searchable using @FindBy name

Question

I'm stuck in searching DOM Element by Selenium. DOM has name="AddBeverageBtn"

Page class:

public class MainPage extends BasePage {

    @FindBy(name="AddBeverageBtn")
    private WebElement buttonAdd ;

However it fails with the reason it can't be find by css selector

Error:

org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"*[name='AddBeverageBtn']"}
  (Session info: chrome=109.0.5414.120)
For documentation on this error, please visit: https://selenium.dev/exceptions/#no_such_element
Build info: version: '4.1.4', revision: '535d840ee2'
System info: host: 'LAPTOP-O6B9USVI', ip: '192.168.56.1', os.name: 'Windows 11', os.arch: 'amd64', os.version: '10.0', java.version: '17.0.5'
Driver info: org.openqa.selenium.chrome.ChromeDriver
Command: [e4fbd604ba2f3401a33d2c2c2c834576, findElement {using=name, value=AddBeverageBtn}]

Snapshot of the element:

Answer 1

As an alternative you can use either of the following FindBy() strategies:

• Using cssSelector:

  @FindBy(css = "a.btn.btn-primary.btn-sm.mb-3[name='AddBeverageBtn'][href^='showNewForm']")
  private WebElement buttonAdd;
  

• Using xpath:

  @FindBy(xpath = "//a[@class='btn btn-primary btn-sm mb-3' and @name='AddBeverageBtn'][contains(@href, 'showNewForm') and normalize-space()='Add Beverage']")
  private WebElement buttonAdd;