CODEWITHSUNDEEP
javascriptapplescript
Kevin
Kevin

Reputation: 1106

Applescript : Javascript to click in safari with unknown id

How can I click in the "detailed" button listed bellow ?

<span data-segment-id="bererf44b-be45-4514-922a-0fff0585gb">
    <input type="radio" id="dccd7242-38d2-4f54-4841-73c4b48a2f56-view-selector-bererf44b-be45-4514-922a-0fff0585gb" name="dccd7242-38d2-4f54-4841-73c4b48a2f56-view-selector" value="detailed">
    <label for="dccd7242-38d2-4f54-4841-73c4b48a2f56-view-selector-bererf44b-be45-4514-922a-0fff0585gb">Detailed</label>
</span>

This work but I have to enter manually the encrypted id

tell application "Safari Technology Preview" to ¬
    do JavaScript ¬
        "document.querySelectorAll(\"[for=\\\"dccd7242-38d2-4f54-4841-73c4b48a2f56-view-selector-bererf44b-be45-4514-922a-0fff0585gb\\\"]\")[0].click();" in current tab of window 1

UPDATE :

Most of the HTML is dynamic, and I can't very relie on it.

<div class="center">
            <div class="segmented-control view-selector component" id="THIS_IS_DYNAMIC">
    <input type="radio" id="THIS_IS_DYNAMIC" name="THIS_IS_DYNAMIC" value="basic">
    <label for="THIS_IS_DYNAMIC">Basic</label>
</span><span data-segment-id="THIS_IS_DYNAMIC">
    <input type="radio" id="THIS_IS_DYNAMIC" name="THIS_IS_DYNAMIC" value="detailed">
    <label for="THIS_IS_DYNAMIC">Detailed</label>
</span></div>
        </div>

Upvotes: 1

Views: 77

Answers (2)

Kevin
Kevin

Reputation: 1106

Ok I'm sorry my question wasn't clear at the start, but unfortunately I can't use the label neither (dynamic too) but I found a work around with <div class="segmented-control view-selector component"

tell application "Safari Technology Preview" to ¬
    do JavaScript ¬
        "document.querySelectorAll(\"[value=\\\"detailed\\\"]\")[0].click();" in current tab of window 1

Upvotes: 0

RajmondX
RajmondX

Reputation: 415

As I understand your post you want to trigger a click on the <label element. Your main problem is that you have to manuelly enter the encrypted id.

I suggest you search for the <labelelement with the value 'Detailed'.

[...document.querySelectorAll('label')].find(x=>x.innerText=='Detailed' || x.textContent == 'Detailed').click(); //triggers onclick

// or use

Array.from(document.querySelectorAll('label')).find(x=>x.innerText=='Detailed' || x.textContent == 'Detailed').click()


// hint. document.querySelectorAll doesn't return a normal array but a nodelist

Edit: Changed <input element to <label element.

Upvotes: 1

Related Questions