Can I find by "data-id"

Browser Actions
1

I am on takeout.google.com and they list all their tools that allow you to checkmark which tools you want to export.

I have already used Browser actions to “press” the “Deselect all” button and now I want BA to “press” the checkbox next to the Youtube tool row to turn it on.

Problem.

The unique identifier for each row is the “data-id” attribute and its probabaly the only way I will be able to press the checkbox via BA.

But the BA action does not seem to call it:

data voice
data voice1534×708 67.5 KB

checkbox screenshot
checkbox screenshot1272×310 31.6 KB

Here is a stripped down version of two rows, the Youtube one is the one I want to press the checkbox on.

<div jscontroller="vE1vyb" jsname="E6bu2c" jsaction="JIbuQc:FjfUbe(PE3haf); click:Q8pxEc(Ue9tsc);rcuQ6b:uBz4id" data-id="voice" data-enabled="true" data-is-visible="true" class="gGfIad ">
    <!-- Content related to Google Voice -->
</div>

<div jscontroller="vE1vyb" jsname="E6bu2c" jsaction="JIbuQc:FjfUbe(PE3haf); click:Q8pxEc(Ue9tsc);rcuQ6b:uBz4id" data-id="youtube" data-enabled="true" data-is-visible="true" class="gGfIad ">
    <!-- Content related to YouTube and YouTube Music -->
</div>

I am trying to test with “voice” but once I figure it out I will be using BA to press teh “Youtube” row.

2

The unique identifier for each row is the “data-id” attribute and its probabaly the only way I will be able to press the checkbox via BA.

But the BA action does not seem to call it:

Yes, because the selector is wrong – data-id="voice" means “the CSS element with the tag name data-id="voice"”, and that doesn’t exist. Since you want to find elements with this attribute/value combo, try div[data-id="voice"].

HTH!

3

That did not work but I think it is because the checkbox is even deeper. I am going to have to brush up on my CSS it seems to get the checkbox which is deeper in the heirachy.

Thank you, I think this gave me a good headstart.

4

Oh. I asked ChatGPT to make up for my woefully out of date CSS skills and it gave me the correct answer!

image
image1462×414 66 KB

5

Browser Actions selected that checkbox! Woot!!

Now onto the next step of my takeout.google automation journey!

1 Like
6

Ah, okay. I thought the structure was different, that the div was acting as the visual representation of the checkbox, not its parent. In my defense, it was past midnight when I wrote my reply, somewhat bleary-eyes :wink:

Glad you got it working!