Debugging your browser automations like a pro
As you begin to explore the world of browser automation you are likely to run into errors and issues with your automations - this is completely normal and is part of the learning process. Understanding the errors and issues that you are facing is key to being able to get back on track when something goes wrong.
# What is debugging?
Debugging is the process of identifying, analyzing, and fixing errors or issues within a software program, or automation, to ensure it runs smoothly and functions as intended. It involves detecting where the code or automation fails or behaves unexpectedly and making the necessary corrections to improve performance and reliability.
In the context of automations, we want to understand which step has caused the issue, and why. For example, you may have a get data from bot's current page step that has returned the error "your chosen selectors have failed to find any content on page / element not found" - this tells us which step to review, and what went wrong, in this case, that the selected element was not found when the automation has run.
# What is error handling?
Error handling is the process of anticipating, detecting, and responding to errors in a software program, or automation, to ensure it runs smoothly and can recover gracefully from unexpected issues. We want to be sure that if your automation runs into an error that it can be handled gracefully and prevent the automation from failure.
# Why is debugging and error handling important?
Debugging and error handling is an underrated but very important part of building software, and building out your automations. While debugging is more concerned with getting back on track once an error has occurred, error handling can be used to gracefully handle errors before they occur within your workflow. Knowing what to do when an error occurs can save a lot of time and effort compared to a trial-and-error method that looks a lot like finding a needle in a haystack.
# Proactive debugging methods
There are steps that you can take before you run into errors in order to proactively prevent your automation from failing during it's runs. Investing time to implement preventative methods early in your development process can save time and effort in the longrun. Some of these actions may include catching errors during he run, adding additional data to your errors or logging debug information with JavaScript.
# Optional actions
There are a couple of steps that allow you to set their action to "optional". This can be used if you are working with an element on the page that is sometimes present, sometimes not. This can be useful to dismiss cookie popups, for example, as these may not always appear in every run. This will prevent your automation from failing if the button can not be found on the page when the automation is run. This option can be toggled within the click element step, and soon the enter text step.
# Catching errors during runs
The try/catch step can be used to wrap steps that may cause an issue within your automation. Any steps included in the "try" section of this step will run as normal, however, if an error occurs this will trigger the steps that have been included in the "catch" section and your automation will not fail. There are various use cases for this, including running an additional set of steps if an error occurs because an interaction step cannot find an element on the page, catching an error from a write JavaScript step, and catching errors from file handling steps to name a few.
# Adding error metadata
The add error metadata step can be used to add additional context to your errors. When placed before an step that could potentially run into an issue this gives you the opportunity to add a custom message to your errors. This can be helpful in automations that may have multiple versions of the same steps that carry out similar functions.
This step may be used to output the value of a variable token that you are passing into a step - in the event of an error in the step that you are passing data to, the data will be output within the error message. Being able to view the data that you are passing into a step can be really helpful in understanding why the step may have had an error.
# Debugging with Javascript
When running your automations locally, you have access to the console.log()
function, and all variants of it, through the write JavaScript step. This can be used to output the tokens from your automation as the automation runs - you can use the insert data option to insert your tokens into your JavaScript code. When your automation opens in a new Chromium window, right-click on the page, click inspect and navigate to the console tab.
// Output scrape data
console.log([scrape-data])
When combined with JavaScript code, this can be an even more powerful tool for debugging. From manipulating data, requesting information from APIs or working with the node.js filesystem API, you can use console.log()
to keep track of the information that you are working with to help you debug your automations. For example, if you are adding a constant to the last column within a dataset of data that has been scraped from a page, you may wish to view the data before and after it's been manipulated and before it's passed onto the next step. See how we implemented this below:
var scrapeData = [scrape-data];
var data = 'example';
console.log(scrapeData);
scrapeData.forEach((item) => item.push(data));
console.log(scrapeData);
return scrapeData;
Tip: you may require a wait step at the end of your automation to ensure that you have time to review the console.
# Reactive debugging methods
Sometimes we come across errors that we are not anticipating during automation runs and we will need to debug on-the-fly in order to get the automation running as we want it to. These will often cause the automation to fail, but can be used as a learning experience. There are various methods that can be used, including reviewing error messages as they occur or reviewing run reports that have been generated by your runs.
# In-builder error messages and debugger
If you have the builder open when you are running your automation, you will see errors popup at the top of the builder detailing what went wrong.
You'll also find the debugger within the builder, there are a couple of methods of opening this: in the overflow menu on the top-right of the builder, click debugger, or click debug on any error messages that appear in the builder. The side panel that appears will give you more contact on the error that you have within your automation - including the step number that encountered the issue.
For longer automations, you can toggle on the only show errors option to only show the steps with errors - there is often only one as the automation will stop when it encounters an error, but you may find some additional warnings that may help diagnose the issue.
# Run reports
Every automation run produces a run report that can be found within the run reports section of your dashboard in the Axiom.ai Chrome extension. When an automation fails due to an error, or succeeds with warnings, these will show within your run report. From the run reports section of the dashboard, hit full report to learn more about the errors or warnings.
# Displaying variable tokens in a popup
The display a message step is a small but powerful step for debugging, it allows you to output data as a popup within the builder so that you can see see the contents of a variable token. You can add a token to this step by clicking insert data and selecting the variable token that you would like to display. This will display as a table when you insert a variable token and can be helpful when trying to visualize the data that you have within your automation, scrape data is a good example of data that could be displayed this way but any token may be used.
# Understanding the structure of errors
Understanding the structure of errors is an important skill to have, let's dive into the format of an Axiom.ai error message and break it down into it's constitute parts.
Error in step 4 - "Enter text": Couldn't find the element during run. Please reselect this element in the selector tool or use a custom selector.
Error in step 4 - there has been an error in step 4 of your automation, this give us a good start on where to look for any issues.
"Enter text": Couldn't find the element during run - the error message is telling us what went wrong, in this instance, that the element that has been selected has not been found on the page. This may be due to the page not loading correctly, or changing since the automation was set up.
Please reselect this element in the selector tool or use a custom selector - this is advice on how to resolve the error that has occurred - for this particular error we may need to revisit step 4 and re-select the elements on the page.
# Finding information on common errors
You can read up more on our common errors in our comprehensive list of errors, through our community (opens new window) for free users, or by contacting customer support if you are a paid subscriber. You can also find our full documentation on how to debug in our help center.
Have you any tips and tricks that you have learned while using Axiom.ai that you think would help other users? We would love to hear from you over in our community (opens new window).