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"  valign="top" colspan="1"><label for="_syAODLBAIXASERVER" >Os em processo de Baixa Server</label></td>
             <td align="center" rowspan="1"  valign="top" colspan="1">
                <div >
                   <div id="dbf" onclick="return false;"  tabindex="511" notnull="1"></div>
                   <input value="false"  name="_byAODLBAIXASERVER" type="HIDDEN">
                </div>
             </td>
             <td rowspan="1"></td>
             <td align="center" rowspan="1"  valign="top" colspan="1"><label for="_lyXWFMAODLID_XWFMTURO" >Prioridade</label></td>
             <td align="center" rowspan="1"  valign="top" colspan="1">
                <select style="padding-right:0px;"  onrealchange="return true;" onchange="setTooltip(this,'');realChangeListener(event);" id="dc0" name="_lyXWFMAODLID_XWFMTURO" tabindex="521" evidence="">
                   <option title="" selected="" value=""  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;"></option>
                   <option title="" value="1"  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">Mais Crítico</option>
                   <option title="" value="2"  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">Crítico</option>
                   <option title="" value="3"  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">Não Crítico (com impacto)</option>
                   <option title="" value="21"  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">Não Crítico (sem impacto)</option>
                </select>
             </td>
          </tr>
          <tr >
             <td></td>
          </tr>
          <tr>
             <td align="center" rowspan="1"  valign="top" colspan="1"></td>
             <td align="center" rowspan="1"  valign="top" colspan="1"></td>
             <td rowspan="1"></td>
             <td align="center" rowspan="1"  valign="top" colspan="1"><label for="_lyXGABAODLID_XGABTASO" >Área solicitante</label></td>
             <td align="center" rowspan="1"  valign="top" colspan="1">
                <select style="padding-right:0px;width:100%;"  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=""  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;"></option>
                   <option title="" selected="" value="1"  style="font-weight:bold;">CLIENTE</option>
 <option title="" value="2"  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">CONSUMOS</option>
               <option title="" value="3"  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">FATURAMENTO</option>
               <option title="" value="4"  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">COBRANÇA</option>
               <option title="" value="5"  style="border:0px;border-radius:0px;font-size:1em;box-shadow:none;">ARRECADAÇÃO</option>

CodePudding user response：

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"

CodePudding user response：

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?.