What are the best practices for using custom automation ids in Selenium WebDriver

Question

Our web UI has unique custom automation ids for each element (buttons, labels, ...). I do not have access to normal ids of elements.

<button custom-id='send' class='dynamic_class_123'>

How can I access the element in a best practice manner? Right now I use the following locator

@FindBy(xpath = "//button[@custom-id='send']")
public WebElement sendButton;

The automation code will break once the dev is converting the button to a div element. I would not have this problem with normal ids:

@FindBy(id = "send")
public WebElement sendButton;

It would find the element regardless of type (button, span, div, ...).

Is there a way I can achieve same result with my custom ids without the need of xpath or at least a improved version of it?

Answer 1

You can use selectors without tags, here're examples:

css = "[custom-id='send']"
xpath = "//*[@custom-id='send']"

Answer 2

A couple of things:

• custom-id are analogous to custom data attributes
• Developers can configure the application to generate custom-id runtime.

Your code block to access the element:

<button custom-id='send' class='dynamic_class_123'>

looks perfecto as the custom-ids are always unique.

---

Now, the development team all of a sudden simply can't convert the <button> element to a <div> element as:

• Generally, the <button> elements are configured as interactable by default.
• Where as <div> elements are not interactable by default unless contenteditable attribute is set to true.

---

Conclusion

Irrespective of the <tagName> in-terms of <button> or <div> or <span> if the application generates the unique custom-id for the desired elements, you can continue identifying those elements through their respective custom-id as follows:

• Using css:

  @FindBy(xpath = "[custom-id='send']")
  public WebElement sendButton;
  

• Using xpath:

  @FindBy(xpath = "//*[@custom-id='send']")
  public WebElement sendButton;