How to use dynamic variables in CSS selectors for visual web scraping?

I’m building a workflow where step 1 extracts a category name (like “Laptops”) and saves it as a variable. In step 2, I need to click a button that contains that exact category name.

The visual picker just grabs the hardcoded CSS for the button I clicked. How do I tell the extension to use my variable instead?

Great question! You can easily switch from static selectors to dynamic variables right in the UI.

In the command settings where you see your selector input, there is a dropdown menu that defaults to css. Click that dropdown and change it to variable. A second dropdown will appear listing all the variables you’ve created in your project (like your “Laptops” variable).

While the instant browser preview might not evaluate the variable (since it’s just parsing the static DOM), once you hit “Run” and hand the project over to our main automation engine, it will dynamically substitute that variable into the selector at runtime before executing the click.

Great question! You can easily switch from static selectors to dynamic variables right in the UI.

In the command settings where you see your selector input, there is a dropdown menu that defaults to css. Click that dropdown and change it to variable. A second dropdown will appear listing all the variables you’ve created in your project (like your “Laptops” variable).

While the instant browser preview might not evaluate the variable (since it’s just parsing the static DOM), once you hit “Run” and hand the project over to our main automation engine, it will dynamically substitute that variable into the selector at runtime before executing the click.