Hello,
I have a url that I am looking to record all of the radio buttons and check boxes so I can go in after with some logic and say for example if Button A is clicked Unclick Button B.
The problem is there are about 80 of them to start and I am looking for a way to capture all of those without going in and clicking each one and to record.
Hi there,
Thank you very much for your topic. Please note that it may take a little while before a member of our community or from Katalon team responds to you.
Thanks!
The issue I have is you want to “record” this and the way I think it can be done may not be via recording. I would review the HTML of the radio buttons and see which attribute is similar in all of them, such as <type>. Then you can create a pathway that collects the list of radio button items (e.g. //input[@type='radio']). With the list, you can then move through it clicking and unclicking.
You can do this again with your checkboxes (e.g. //input[@type='checkbox']), or you can use an OR in the pathway to include both radio buttons and checkboxes into one list and do it in one pass (e.g. //input[@type='radio' or @type='checkbox']).
Something like this is not difficult to do if you know how to manipulate a web-page using JavaScript: Document, Introduction to the DOM - Web APIs | MDN, Document Object Model (DOM) - Web APIs | MDN.
For example, for the page https://formulario-clientes.webflow.io/ the procedure could be as follows (in Chrome): right-click on the element that interests you, select Inspect. After this, the Chrome DevTools (כלי פיתוח ל-Chrome | Chrome DevTools | Chrome for Developers) Elements tab will open. There you can see the HTML corresponding to the required element. Based on the information there, you can work with the desired elements using JavaScript.
For example, by switching to the Console tab (Chrome DevTools), you can get a collection of all the radio buttons on the page:
var input = document.querySelectorAll('[id^=radio]');
console.log(input)
With this code you can check whether the button is clicked or not:
input[0].previousSibling.className
Using this you can find out the locator needed for the click command:
input[0].id
With this you can click using javascript (without the click command Katalon Recorder):
input[0].click()
These examples are suitable for https://formulario-clientes.webflow.io/.
Using the commands while/endWhile, if/else/elseIf/endIf, gotoIf/label, gotolabel/label you can create conditional constructs and loops. Examples of their use can be found in the sample projects attached to the extension.
Example 1, “radio-buttons-click”
open | https://formulario-clientes.webflow.io/ |
storeEval | var input = document.querySelectorAll('[id^=radio]'); input[0].id | radioId
storeEval | var input = document.querySelectorAll('[id^=radio]'); input[0].previousSibling.className | radioClassName
echo | ${radioClassName} |
click | ${radioId} |
storeEval | var input = document.querySelectorAll('[id^=radio]'); input[0].previousSibling.className | radioClassName
echo | ${radioClassName} |
radio-buttons-click.html (1.4 KB)
Example 2, “radio-buttons-click-while”
open | https://formulario-clientes.webflow.io/ |
storeEval | var input = document.querySelectorAll('[id^=radio]'); input.length | NodeListLength
store | 0 | ii
while | ii<${NodeListLength} |
pause | 1000 |
storeEval | var input = document.querySelectorAll('[id^=radio]'); input[${ii}].id | radioId
storeEval | var input = document.querySelectorAll('[id^=radio]'); input[${ii}].previousSibling.className | radioClassName
echo | ${radioClassName} |
click | ${radioId} |
storeEval | var input = document.querySelectorAll('[id^=radio]'); input[${ii}].previousSibling.className | radioClassName
echo | ${radioClassName} |
storeEval | ${ii}+1 | ii
endWhile | |
radio-buttons-click-while.html (2.0 KB)
Hi @rhauhe, 
Welcome to our forum!
Just checking in to see whether you have tried out the suggestions proposed by the other members in this thread yet or not. Remember to follow up with others regularly so that you can get the best support!
Thanks,
Albert