How to Click an Element on a Page and Monitor Results

1. Is adding a click necessary?

Believe it or not, clicking an element to display hidden content it often surplus. Most “hidden” content is already present on a page and can be monitored by Fluxguard without further issue.

For instance, all navigation items are often available on a page and don’t require a click (even though it may be required of the person browsing the page).

The exception is elements that, when clicked, perform an AJAX call to poll a server for new content.

2. Click into the Page View

Click into Page View. This is where you can add “actions” for Fluxguard to perform – such as clicks, form submissions, and more – whenever this page is crawled.

3. Click the Add button to include a new action

This will bring up a modal. Use the select menu to select the Click action.

4. Add a selector to identify the DOM area to click

CSS selectors are special instructions browsers utilize to identify an area of a web page. They can look a bit intimidating, but they’re quite simple. For example:

• #element identifies an element by its id
• .element identifies an element by its class
• div > div > div > div > a identifies an element by its hierarchical location in a document

Fluxguard utilizes CSS selectors to filter areas to ignore or focus on. This is a powerful technique to isolate the content you wish to monitor, while ignoring frequently changing areas that introduce false-positive change alerts.

It is possible to discover the CSS selector for any area of a page in 2 ways:

• Use the Visual Selector to find a CSS selector. Click on the button next to the first field in the modal to open the Visual Selector. This will use the most recently captured version of the page (so, make sure you’ve done an initial crawl before using it on any given page). It will open this page in a new browser, and prompt you to identify the areas to filter.
• This powerful feature renders the target site through our API as a means to identify DOM areas. As such, it may not work on every web page. Please let us know if you encounter a page where it does not seem to work well. In the meantime, try the alternative method detailed below. (In fact, the approach below is the one we use as it allows for more flexibility in selector creation.)

• Use Google Chrome to identify a CSS selector. This requires only minimal HTML knowledge, so you can often do this yourself.
  1. Using Google Chrome (or another modern browser).
  2. Go to the live page with the area you wish to filter.
  3. Right-click on the area to filter and select “Inspect.”
  4. A code console will appear. Move your mouse up and down in this console. Notice that it highlights different sections of the page.
  5. Mouse up and down in the code console until you isolate the element you want to filter in the browser viewing part of the display.
  6. Right-click on the HTML element in the code console. Select “copy” and then “copy selector.” This will copy a lengthy selector identifying that particular DOM element.
  7. Paste it into the filter area. When the crawl occurs again, this area will be excluded (or exclusively included, depending on which filter you are using).
  8. Tips to keep in mind:
     • When you use the above method, you may get a very long selector. As much as possible, try to reduce the selector to a minimal core. Try to eliminate any hierarchical elements in the selector. This is necessary to reduce brittleness. For example, if you have a selector that relies on multiple hiearchical and class elements (e.g., #navbar > div > div.navbar-header > a.logo.navbar-btn.pull-left.flip > img), then it will break easily if the site adjusts its layout or class structure even slightly.
     • You can paste a selector directly in Chrome’s Elements tab (the same one where you copied it from). When you do this, Chrome will tell you how many matches that selector has on the current page. Using this method, you can edit the selector down to a minimal core that still exclusively matches the areas you wish to filter.

5. Add a millisecond wait as needed

3000 milliseconds equal 3 seconds. The value you add here will be used to wait after the clicked element and before the proceeding action on the page (often the capture of the page’s contents for comparison purposes). Do you have more content to display? Adjust it in the form. (You can always refine it later.)

6. You’re all done!

Once this has been accomplished, you will notice that a click action is sequenced before the capture. Try manually crawling the page again to review the results.

Need something more elaborate? You can always insert and execute Javascript on any monitored page.