How to map elements with css using capybara

Question

How can I replace my xpath with css?

I want to find this item: CLIENTE

 element :select_area_solicitante,  :xpath,        '/html/body/div[2]/div/div[2]/div/div[1]/form/div/div[2]/div[1]/table/tbody/tr[5]/td/table/tbody[1]/tr[10]/td[5]/select/option[2]'

     <td rowspan="1"></td>
             <td align="center" rowspan="1" class="arrangingDescription" valign="top" colspan="1"><label for="_syAODLBAIXASERVER" class="Lab LabW">Os em processo de Baixa Server</label></td>
             <td align="center" rowspan="1" class="arrangingInteraction" valign="top" colspan="1">
                <div class="fOutsideCB">
                   <div id="dbf" onclick="return false;" class="fCB fCB_ro-false" tabindex="511" notnull="1"></div>
                   <input value="false" class="fInside" name="_byAODLBAIXASERVER" type="HIDDEN">
                </div>
             </td>
             <td rowspan="1"></td>
             <td align="center" rowspan="1" class="arrangingDescription" valign="top" colspan="1"><label for="_lyXWFMAODLID_XWFMTURO" class="Lab LabW">Prioridade</label></td>
             <td align="center" rowspan="1" class="arrangingInteraction" valign="top" colspan="1">
                <select style="padding-right:0px;" class="f fA" onrealchange="return true;" onchange="setTooltip(this,'');realChangeListener(event);" id="dc0" name="_lyXWFMAODLID_XWFMTURO" tabindex="521" evidence="">
                   <option title="" selected="" value="" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;"></option>
                   <option title="" value="1" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">Mais Crítico</option>
                   <option title="" value="2" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">Crítico</option>
                   <option title="" value="3" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">Não Crítico (com impacto)</option>
                   <option title="" value="21" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">Não Crítico (sem impacto)</option>
                </select>
             </td>
          </tr>
          <tr class="arrangingSpacing">
             <td></td>
          </tr>
          <tr>
             <td align="center" rowspan="1" class="arrangingDescription" valign="top" colspan="1"></td>
             <td align="center" rowspan="1" class="arrangingInteraction" valign="top" colspan="1"></td>
             <td rowspan="1"></td>
             <td align="center" rowspan="1" class="arrangingDescription" valign="top" colspan="1"><label for="_lyXGABAODLID_XGABTASO" class="Lab LabN LabW">Área solicitante</label></td>
             <td align="center" rowspan="1" class="arrangingInteraction" valign="top" colspan="1">
                <select style="padding-right:0px;width:100%;" class="f fA fN" onrealchange="return isSingleSelection(this,'Área solicitante','','Valor do campo inválido','Erro Campo');" onchange="setTooltip(this,'');realChangeListener(event);" id="dc1" name="_lyXGABAODLID_XGABTASO" tabindex="561" evidence="">
                   <option title="" value="" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;"></option>
                   <option title="" selected="" value="1" class="f fA" style="font-weight:bold;">CLIENTE</option>
 <option title="" value="2" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">CONSUMOS</option>
               <option title="" value="3" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">FATURAMENTO</option>
               <option title="" value="4" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">COBRANÇA</option>
               <option title="" value="5" class="f fA" style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">ARRECADAÇÃO</option>

Possible duplicate of stackoverflow.com/questions/8158328/… — lacostenycoder
– lacostenycoder, Commented Jun 13, 2022 at 20:18

Thomas Walpole · Accepted Answer · 2022-06-13 22:59:37Z

2

Rather than CSS you can just use Capybaras option selector type

element :select_area_solicitante,  :option, 'CLIENTE'

If you insist on using CSS then you would do something like

element :select_area_solicitante,  :css, 'option', text: 'CLIENTE'

although are you sure you want the option element and not the select?.

answered Jun 13, 2022 at 22:59

Thomas Walpole

50.1k6 gold badges69 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elis Over a year ago

Have you ever thought about writing a book showing the different ways to map elements with capybara? If not, do it!!!

Thomas Walpole Over a year ago

Not really, I write Capybara instead

lacostenycoder · Accepted Answer · 2022-06-13 20:52:09Z

1

If we can assume your html example is valid and is inside a html body tag assuming page is the Capybara object, you can do something like:

page.all('tr td.arrangingInteraction')[3].all(:option)[1].text
=>"CLIENTE"

answered Jun 13, 2022 at 20:52

lacostenycoder

11.3k4 gold badges37 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to map elements with css using capybara

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related