ruby - How to map elements without xpath using site-prism?

Question

I need to stop mapping elements from xpath but I'm having trouble mapping the elements below. I couldn't get any other way to map other than xpath.

My home-page http://drive-thru-hml.s3-website-us-west-2.amazonaws.com/login/primeiro-acesso

*******My page with the mapped elements ********

element :txt_cpf_branco,    :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/div[1]/span'

element :txt_dtnasc_branco, :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/div[2]/span'

element :txt_nome_branco,   :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/span[1]'

element :txt_cel_branco,    :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/div[4]/span'
element :txt_email_branco,  :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/span[2]'
element :txt_cep_branco,    :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/span[3]' 
element :txt_rua_branco,    :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/span[4]'         
element :txt_num_branco,    :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/span[5]'
element :txt_bairro_branco,  :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/span[6]'
element :txt_cidade_uf,     :xpath,  '//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div[1]/span[7]'

question from:https://stackoverflow.com/questions/65863142/how-to-map-elements-without-xpath-using-site-prism

Answer 1

There's no one answer for this question. It all depends on how specific you need to be and how many other potentially matching elements there are on the page. You also don't state what you want to use rather than XPath, so I'm assuming CSS and the text filter. Some potential options may be

element :txt_cpf_branco, :css, '#gatsby-focus-wrapper span', text: 'Preencha o CPF correto, por favor. Em caso de paciente menor de idade sem CPF, inclua o da pessoa responsável'

or since the default text matching is substring you could do

element :txt_cpf_branco, :css, '#gatsby-focus-wrapper span', text: 'Preencha o CPF correto'

also since :css is the default selector type you can generally drop it

element :txt_cpf_branco, '#gatsby-focus-wrapper span', text: 'Preencha o CPF correto'

If you also want to check the part of the class of the element to narrow down you could pass a regexp to the class filter

element :txt_cpf_branco, '#gatsby-focus-wrapper span', text: 'Preencha o CPF correto', class: /signUpFormFields__InputError-/

Using those examples you should be able to do the rest of the elements you're looking to change. As stated in response to one of your previous questions, you should be able to pass anything to element that you could pass to Capybaras find method -https://www.rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders#find-instance_method - which includes all the standard options shown in that documentation and any selector type specific options too (the :css selector type doesn't have any extra options)