Automate with watir on-screen keypad login - watir

Question

I'm wondering how to automate with watir the clicks on a on-screen keypad. I'm trying to automate the login on this web, but I don't know how to recognize the numbers and click on them:
https://bancaelectronica.evobanco.com/

Answer 1

If you look at the HTML of the keyboard, each key is simply a link:
<div class="virtual_keyboard active">
<ul>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">3</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">7</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">1</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">0</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">4</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">5</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">6</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">2</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">8</a></li>
<li class="correction">
<a id="btCorrect" href="javascript:void(0);" data-target=".activeInput" class="keypad-btn delete-key">Corregir</a>
</li>
<li>
<a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">9</a>
</li>
</ul>
Cerrar
</div>
You simply need to:
Activate the keyboard by clicking on the password field
Clicking the key links by text (since they are randomly sorted)
An example of typing a password of "123":
browser = Watir::Browser.new :chrome
browser.goto('https://bancaelectronica.evobanco.com/')
# Activate the keyboard
browser.text_field(id: 'cFDMTuKLOsuyeXQ').click
# Wait until the keyboard appears
virtual_keyboard = browser.div(class: 'virtual_keyboard')
virtual_keyboard.wait_until_present
# Enter the password by clicking the number links
virtual_keyboard.link(text: '1').click
virtual_keyboard.link(text: '2').click
virtual_keyboard.link(text: '3').click
The same approach can be taken for other on-screen keyboards. However, the exact elements to interact with will depend on the page's implementation of the keyboard.