Click on each first child radio (undefined child length)

Question

I would like to click each first child of class="cf" and should be in order, first cf first because the other radio is disabled unless you click the first one. The cf length is undetermined (in this example I put 3) so I need to first get the length of the child of ol > li and loop the clicking there.

Here is the structure of the HTML

<div id="group-attr-selects" class="grouped-select">
<ol>
    <li class="opt-label">Dimensions</li>
    <div id="conf-container-1549" class="cf">
        <div class="optdiv">
            <input name="conf-radio-0" id="conf-radio-1461" type="radio" value="1461">
            <label class="optdiv-label" for="conf-radio-1461">3" H x 3" W</label>
        </div>
        <div class="optdiv">
            <input name="conf-radio-0" id="conf-radio-1421" type="radio" value="1421">
            <label class="optdiv-label" for="conf-radio-1421">4" H x 4" W</label>
        </div>
    </div>

    <div id="err-attribute1549" style="color: red; margin-bottom: 5px"></div>

    <li class="opt-label">Color</li>
    <div id="conf-container-1379" class="cf">
        <div class="optdiv">
            <input name="conf-radio-1" id="conf-radio-12791" type="radio" value="12791">
            <label class="optdiv-label" for="conf-radio-12791">Black on Almond</label>
        </div>
        <div class="optdiv">
            <input name="conf-radio-1" id="conf-radio-12796" type="radio" value="12796">
            <label class="optdiv-label" for="conf-radio-12796">Black on Brushed Aluminum</label>
        </div>
        <div class="optdiv">
            <input name="conf-radio-1" id="conf-radio-12798" type="radio" value="12798">
            <label class="optdiv-label" for="conf-radio-12798">Black on Brushed Brass</label>
        </div>
        <div class="optdiv">
            <input name="conf-radio-1" id="conf-radio-12794" type="radio" value="12794">
            <label class="optdiv-label" for="conf-radio-12794">Black on Brushed Gold</label>
        </div>
    </div>

    <div id="err-attribute1379" style="color: red; margin-bottom: 5px"></div>

    <li class="opt-label">Mounting Type</li>
    <div id="conf-container-2605" class="cf">
        <div class="optdiv">
            <input name="conf-radio-2" id="conf-radio-76" type="radio" value="76">
            <label class="optdiv-label" for="conf-radio-76">Adhesive</label>
        </div>
        <div class="optdiv">
            <input name="conf-radio-2" id="conf-radio-762" type="radio" value="762">
            <label class="optdiv-label" for="conf-radio-762">No Mounting</label>
        </div>
    </div>
    <div id="err-attribute2605" style="color: red; margin-bottom: 5px"></div>
</ol>

guest · Answer 1 · 2017-06-14T11:14:09.780

0

This should work:
jQuery:

  $('.cf').each(function(i, item){$(item).find('input[type="radio"]')[0].click()})

JS:

Array.from(document.getElementsByClassName('cf')).forEach(function(item){item.querySelector('input[type="radio"]').checked = true})

edited Jun 14 '17 at 11:14

answered Jun 14 '17 at 08:32

guest

706
7
15

Thank you for your answer. That will work if I'm using jquery. But unfortunately, I am testing this page with intern js. Any idea how? Thanks! – ZergRush Jun 14 '17 at 09:21
He was looking for an answer using Intern, which uses Leadfoot API – Williz Aug 10 '17 at 01:01

score 0 · Accepted Answer · answered Jun 14 '17 at 11:03

Got the solution from this answer

I just made a few adjustments.

                .findAllByCssSelector('#group-attr-selects > ol > div.cf')
                    .then(function (elementArray) {
                        return Promise.all(elementArray.map(function (element) {
                            return element.getVisibleText()
                                .then(function (children) {
                                    for(var i=0; i < children.length; i++){
                                        return element.findByCssSelector('.optdiv > input')
                                            .then(function (inp) {
                                                return inp.click();
                                            });
                                    }
                                });
                        }));
                    })

Click on each first child radio (undefined child length)

2 Answers2