How to repeat an action for every div with an specific class?

Questions and Help
1

There is a website with many divs with the same class (let's say: class 'abc').

How do I create a snippet that goes through every div, looks for a word (ex: 'thisWord') and, if found, checks the only input type checkbox inside this div?

Thanks in advance!

2

Hi Nando,

Thanks for reaching out. There are a few ways to approach this, depending on the structure of the site you are using it on. If any of the below don't work, I recommend reaching out to support@blaze.today to provide more detail about the website and possibly schedule a call.

If you are looking to click the checkbox that matches that criteria, you can use a click command with either XPath or CSS. XPath will allow you to match the label ("thisWord"):

{click: xpath=//div[contains(@class, "abc") and contains(., "thisWord")]//input[@type="checkbox"]}

If the text label of "thisWord" lives in an attribute, you can use a CSS selector like the one below:

{click: selector=div.abc[data-label*="thisWord"] input[type="checkbox"]}

CSS can't read rendered text content and can only see attributes, classes, IDs, and structure. So this only works if "thisWord" sits in an attribute like data-label, aria-label, or title. If it's just plain text in the div, CSS can't see it.

If you want to read the state of the checkbox and see whether it's checked or not, you can use the selector structures below:

CSS can read the state of the checkbox live, and if the text you are matching on lives in an attribute like I mentioned before, you can use the following method to match it and check its checked state:

{site: count; selector=div.abc[data-label*="thisWord"]:has(input[type="checkbox"]:checked)}

If the text doesn't live in an attribute, you would need to use XPath to match it. However, the XPath "checked" attribute isn't typically updated live on most pages, so if it was recently checked/unchecked by you before using the snippet, it may read the old state.

{site: text; xpath=//div[contains(@class, "abc") and contains(., "thisWord")]//input[@type="checkbox"]/@checked}

In summary:

  • XPath can match by text but can't read live checkbox state
  • CSS can read live state but can't match by text

Let me know if you have any questions!

Best regards,
Alexander

3

Hi, thanks for your answer. The word is rendered. I tried just filling in the code provided, but It wasn't this simple. I just e-mail the team for more support. Thanks again.

4

For future reference, this is how we addressed the use case:

{items=
  map(
    {site: html; 
      xpath=//*[contains(concat(' ', @class, ' '), ' parentClass ')][.//span[contains(@id, 'condition1')] or .//span[contains(@id, 'condition2')]];
      multiple=yes},
  x->extractregex(x, "id=\"(.+?)\""))}
{repeat: for item in items}
{sel="#" & item & " #checkbox input"}
{click: selector={=sel}}{wait: delay=0.5s}{endrepeat}

We used the newly launched dynamic click CSS selector in this as well! The flow is:

  1. Use the {site} command to grab each element on the page such that it has a child in its subtree that matches the given condition. {site} with multiple=yes grabs all elements as a list.
  2. Use the map function to extract the unique 'id' of each such element, by using extractregex.
  3. We then repeat through the list.
  4. On each iteration, we build the selector for the checkbox input by string concatenation. Note this selector is dynamically generated on each repeat iteration.
  5. Then we {click} on the dynamic selector.