Browser Steps

Browser Steps allow you to automate interactions with webpages before monitoring for changes. You can log in to websites, click buttons, fill out forms, accept cookie notices, and perform any sequence of actions needed to reach the content you want to monitor. Browser Steps automation

What are Browser Steps?

Browser Steps are automated actions that run before changedetection.io extracts content from a page. Think of them as a recorded sequence of clicks, typing, and navigation that prepares the page for monitoring.

Browser Steps run before change detectionThe sequence is:

Browser Steps execute (login, click, navigate, etc.)
Page reaches the target state
Change detection extracts and compares content
Visual Selector or filters refine what’s monitored

Why Use Browser Steps?

Access Protected Content

Monitor content behind login screens or authentication

Navigate Complex Sites

Click through menus, search forms, or multi-step processes

Handle Popups

Dismiss cookie notices, modals, or overlay dialogs

Dynamic Interactions

Interact with JavaScript-heavy sites and single-page apps

Prerequisites

Browser Steps require a browser-based fetcher:

Playwright/Chrome RequiredBrowser Steps only work with:

Playwright (recommended)
WebDriver/Chrome

The basic HTTP fetcher cannot execute Browser Steps.

Available Browser Steps

Browser Steps provides a comprehensive set of actions:

Action	Description	Example
Goto URL	Navigate to a specific URL	Navigate to login page
Goto site	Return to the original watch URL	Reset to starting page

Click Actions

Action	Description	Selector Required	Value Required
Click element	Click on an element (fails if not found)	✅ CSS/XPath	❌
Click element if exists	Click only if element is present	✅ CSS/XPath	❌
Click element containing text	Click element with specific text	❌	✅ Text to find
Click element containing text if exists	Click text element only if present	❌	✅ Text to find
Click X,Y	Click at specific coordinates	❌	✅ “100,200”

Form Interactions

Action	Description	Selector Required	Value Required
Enter text in field	Type into an input field	✅ CSS/XPath	✅ Text to enter
Check checkbox	Check a checkbox	✅ CSS/XPath	❌
Uncheck checkbox	Uncheck a checkbox	✅ CSS/XPath	❌
Select by label	Choose dropdown option by visible text	✅ CSS/XPath	✅ Option text

Wait Actions

Action	Description	Value Required
Wait for seconds	Pause for specified duration	✅ Number (e.g., “5”)
Wait for text	Wait until text appears on page	✅ Text to wait for
Wait for text in element	Wait for text in specific element	✅ Both selector & text

Advanced Actions

Action	Description	Selector Required	Value Required
Execute JS	Run custom JavaScript code	❌	✅ JavaScript code
Remove elements	Delete elements from the DOM	✅ CSS/XPath	❌
Make all child elements visible	Force visibility of hidden elements	✅ CSS/XPath	❌
Scroll down	Scroll the page down	❌	❌
Press Enter	Press the Enter key	❌	❌

How to Use Browser Steps

Step 1: Enable Browser Fetching

Edit your watch or create a new one
Set Fetch Method to Chrome/Playwright
Navigate to the Browser Steps section

Step 2: Add Steps

Choose Operation

Select an action from the Operation dropdown (e.g., “Click element”, “Enter text in field”)

Specify Selector (if needed)

Enter the CSS selector or XPath for the elementExample selectors:

CSS: #username, .login-button, input[name="email"]
XPath: //button[@id='submit'], //input[@type='password']

Enter Value (if needed)

Provide the text, URL, or value required for the actionExamples:

For “Enter text in field”: your username or password
For “Wait for seconds”: “5”
For “Click X,Y”: “150,300”

Add More Steps

Click the + button to add additional steps. Steps execute in order from top to bottom.

Step 3: Test Your Steps

Click Check now to run your watch
Check the Last check output for errors
Use the screenshot (if enabled) to verify the final page state
Adjust steps as needed and test again

Common Workflows

Step 1: Click element
  Selector: #login-button
  
Step 2: Enter text in field
  Selector: input[name="username"]
  Value: your-username
  
Step 3: Enter text in field
  Selector: input[name="password"]
  Value: your-password
  
Step 4: Click element
  Selector: button[type="submit"]
  
Step 5: Wait for seconds
  Value: 3

Step 1: Wait for seconds
  Value: 2
  
Step 2: Click element if exists
  Selector: .cookie-accept-button

Search and Monitor Results

Step 1: Enter text in field
  Selector: input[name="search"]
  Value: your search term
  
Step 2: Press Enter
  
Step 3: Wait for text
  Value: Search results
  
Step 4: Click element containing text
  Value: Filter

Navigate Through Multi-Step Form

Step 1: Select by label
  Selector: select[name="country"]
  Value: United States
  
Step 2: Click element
  Selector: button.next-step
  
Step 3: Wait for seconds
  Value: 2
  
Step 4: Enter text in field
  Selector: input#zipcode
  Value: 12345
  
Step 5: Click element
  Selector: button.show-results

Best Practices

Add Wait Steps Between Actions

Websites need time to respond to interactions. Always add a small wait (1-2 seconds) after clicks or form submissions.

Step 1: Click element
  Selector: .load-more-button
Step 2: Wait for seconds
  Value: 2

Use Specific Selectors

Use unique IDs or specific classes to avoid clicking the wrong element.Good: #submit-button, button[data-test='login']Bad: button, .btn (too generic)

Handle Optional Elements with 'if exists'

Use “if exists” variants for elements that might not always be present (like cookie notices).

Click element if exists
  Selector: .cookie-banner button.accept

Test with Screenshots Enabled

Enable screenshots in your watch settings to see the final page state after all steps execute.Go to watch settings → Enable “Attach screenshot to notification”

Keep Steps Simple and Sequential

Break complex workflows into clear, ordered steps. If something fails, it’s easier to debug.

Finding Selectors

Using Browser DevTools

Open DevTools

Right-click on the element → Select Inspect (or press F12)

Locate the Element

The DevTools will highlight the HTML element

Copy Selector

Right-click on the element in DevTools → Copy → Copy selector (CSS) or Copy XPath

Test Selector

Paste the selector into the Browser Steps field and test

Selector Tips

Prefer IDs over classesIDs are unique and more stable:

#username ✅
.form-input ❌ (might match multiple elements)

If no ID exists, use specific attributes:

input[name="email"]
button[data-testid="submit"]

Troubleshooting

Step Fails: Element Not Found

Causes:

Element hasn’t loaded yet
Selector is incorrect
Page structure changed

Solutions:

Add a “Wait for seconds” step before the failing step
Use “Wait for text” to ensure content has loaded
Verify the selector using browser DevTools
Use “if exists” variant if element is optional

Common issues:

Missing wait time after submitting credentials
Website uses CAPTCHA or bot detection
Incorrect selector for username/password fields

Try:

Step 1: Enter text in field (username)
Step 2: Enter text in field (password)
Step 3: Wait for seconds (Value: 1)
Step 4: Click element (submit button)
Step 5: Wait for seconds (Value: 5)

Page Redirects Unexpectedly

Solution: Use “Wait for text” to ensure the target page has loaded:

Step 1: Click element (navigation link)
Step 2: Wait for text
  Value: Expected text on target page

JavaScript Not Executing

Verify:

JavaScript is valid syntax
You’re using “Execute JS” action
The script returns a value or modifies the page

Example:

document.querySelector('.hidden-content').style.display = 'block';

Advanced Techniques

Using Jinja2 Variables

Browser Steps support Jinja2 templating for dynamic values:

Enter text in field
  Selector: input[name="date"]
  Value: {{ now().strftime('%Y-%m-%d') }}

This enters today’s date automatically.

Combining with Visual Selector

Recommended Workflow

Use Browser Steps to navigate and interact with the page
Use Visual Selector to choose what content to monitor
Use Filters to refine change detection

Example:

Browser Steps: Log in and navigate to dashboard
Visual Selector: Select the "Account Balance" element
Filter: Trigger only when balance increases

Executing Complex JavaScript

For advanced scenarios, use “Execute JS” to run custom code:

// Click all "Load more" buttons
document.querySelectorAll('.load-more').forEach(btn => btn.click());

// Scroll to bottom of infinite scroll
window.scrollTo(0, document.body.scrollHeight);

// Fill complex forms
document.querySelector('input[name="token"]').value = 'abc123';

Security Considerations

Storing CredentialsBrowser Steps are stored in plain text. Be cautious when entering passwords:

Use a dedicated monitoring account with limited permissions
Don’t use your personal credentials
Consider using environment variables or external credential management
Regularly rotate passwords for monitoring accounts

Visual Selector

Select specific page elements after Browser Steps complete

Filters & Triggers

Refine what content triggers change notifications

Next Steps

Create Your First Browser Step

Set up a simple login or cookie acceptance flow

Combine with Visual Selector

Use both features together for powerful monitoring

Set Up Notifications

Configure alerts when monitored content changes

​Browser Steps

​What are Browser Steps?

​Why Use Browser Steps?

Access Protected Content

Navigate Complex Sites

Handle Popups

Dynamic Interactions

​Prerequisites

​Available Browser Steps

​Navigation Actions

​Click Actions

​Form Interactions

​Wait Actions

​Advanced Actions

​How to Use Browser Steps

​Step 1: Enable Browser Fetching

​Step 2: Add Steps

​Step 3: Test Your Steps

​Common Workflows

​Login to a Website

​Accept Cookie Notice

​Search and Monitor Results

​Navigate Through Multi-Step Form

​Best Practices

​Finding Selectors

​Using Browser DevTools

​Selector Tips

​Troubleshooting

​Step Fails: Element Not Found

​Login Doesn’t Work

​Page Redirects Unexpectedly

​JavaScript Not Executing

​Advanced Techniques

​Using Jinja2 Variables

​Combining with Visual Selector

​Executing Complex JavaScript

​Security Considerations

​Related Features

Visual Selector

Filters & Triggers

​Next Steps

Browser Steps

What are Browser Steps?

Why Use Browser Steps?

Prerequisites

Available Browser Steps

Navigation Actions

Click Actions

Form Interactions

Wait Actions

Advanced Actions

How to Use Browser Steps

Step 1: Enable Browser Fetching

Step 2: Add Steps

Step 3: Test Your Steps

Common Workflows

Login to a Website

Accept Cookie Notice

Search and Monitor Results

Navigate Through Multi-Step Form

Best Practices

Finding Selectors

Using Browser DevTools

Selector Tips

Troubleshooting

Step Fails: Element Not Found

Login Doesn’t Work

Page Redirects Unexpectedly

JavaScript Not Executing

Advanced Techniques

Using Jinja2 Variables

Combining with Visual Selector

Executing Complex JavaScript

Security Considerations

Related Features

Next Steps