Esteja você usando Selenium, Capybara ou algo diferente, um problema comum com o teste de UIs em construção é que seus testes estão sujeitos a erros por causa de mudanças na estrutura do documento HTML, mudança de IDs ou classes CSS. Em vez de acoplar seus testes a atributos que são usados para outras coisas, descobri que é útil usar a função -atributo para identificar recursos em uma página da web. Por exemplo, você pode usar o seletor CSS …
*[role="search"] … para localizar o campo de pesquisa em uma página. Da mesma forma, o seletor …
*[role="search-button"]… pode ser usado para localizar o botão de pesquisa, independentemente de ser um a , botão , entrada ou algo diferente.
É claro que isso requer que você anote seu código HTML com os atributos relevantes, mas isso é uma coisa boa.
<input type="text" role="search" /><a href="#" role="search-button">Find it!</a>