Quando estamos implementando testes de navegação usando Capybara numa aplicação web, podemos utilizar alguns métodos que nos ajudam a localizar elementos específicos do HTML para executar ações sobre eles. Vamos utilizar como exemplo uma aplicação Ruby on Rails e Rspec.
Digamos, por exemplo, que você tenha um formulário de login com um botão "Entrar" e na sua barra de navegação, também exista um outro botão com o mesmo nome.
<div class="nav-bar">
<a href="..." class="btn">Entrar</a>
</div>
...
<div class="form">
<a href="..." class="btn">Entrar</a>
</div>
Os testes de login de usuário precisam executar a ação de clicar no botão "Entrar". No entanto, podemos ter problemas já que há dois botões com o mesmo nome. Para resolver essa duplicidade, podemos indicar ao Capybara que busque por um componente específico do HTML:
within 'form' do
click_on 'Entrar'
end
Neste caso orientamos o Capybara que execute a ação click somente dentro do componente form. Assim, a ação de clique só ocorrerá em elementos que se encontram no formulário. Note que qualquer elemento dentro do form está contemplado pelo whitin. Por isso, o método pode ser utilizado para, por exemplo, preencher um formulário específico dentro de uma página que contenha mais de um formulário com campos iguais, como login de administrador ou usuário.
O whitin é mais interessante quando vamos executar uma série de ações dentro de um escopo. Se vamos fazer uma única ação, existe outra maneira de procurar por um elemento.
Vamos considerar agora a seguinte situação: um formulário em que queremos selecionar um item de uma lista com botões tipo radio.
<input type="radio" id="plano-anual">
<label for="plano-anual">Plano Anual</label><br>
<input type="radio" id="plano-mensal">
<label for="plano-mensal">Plano Mensal</label><br>
<input type="radio" id="plano-teste">
<label for="plano-teste">Experimente grátis 7 dias</label><br>
Podemos utilizar o método Capybara find para encontrar o elemento específico e executar uma ação:
find(:css, '#plano-mensal').click
Neste caso, o código implementado procura pelo elemento com id igual a plano-mensal e clica nele. O find pode ser utilizado em combinação com muitos outros métodos para executar ações:
find('div#address').fill_in('Street', with: 'Alameda Santos')
find(:css, '.start_date').set('2020-01-04')
O whithin e o find aceitam uma série de opções e você pode ler mais sobre eles em suas respectivas documentações.
