如何使用Capybara用CSS映射元素

Question

如何用CSS替换我的XPATH？

我想找到这个项目：客户端

 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>

Answer 1

而不是CSS，您只需使用Capybaras option选择器类型，

element :select_area_solicitante,  :option, 'CLIENTE' 

如果您坚持使用CSS，那么您会做类似的操作，

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

尽管您确定您想要选项元素而不是选择吗？

Answer 2

如果我们可以假设您的HTML示例有效，并且在HTML主体标签内，则假设page是capybara对象，您可以做类似的事情：

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