How to monitor webpages with login and password?

Raksha Chandra and Vaishnavi Srinath

How to monitor authenticated webpages in Distill?

There are three ways in which you can track webpages behind login page. You can use:

  1. Local monitors
  2. Macros for cloud monitors
  3. Profiles for cloud monitors

Let’s take a look at how you can set up monitors for each case.

Local Monitor - Monitor pages using your browser

First, you will to download the Distill browser extension and install it. Once done, pin Distill to your browser. You will be able to view a blue droplet icon once you have done so.

Step 1: Navigate to the webpage you want to track and log in with your credentials in your browser.

Step 2: Click the Distill extension from your browser. The visual selector opens up and you can make selections on the page.

Step 3: In the Options Page, choose a local device.

Add local monitor

The checks for changes are made from your browser. This requires the browser to be open and the checks are performed in your browser either in the background, or in a tab (default), or in a sticky window.

Step 4: Click Save.

Using Macros to record login steps

Macros allow you to pre-record and replay interactions on the webpage. In your case, they would allow you to record the steps to login to the webpage. Once the macros are replayed on the webpage, you can set a monitor to track the section of the page that lies after the login step.

Take a look at the subscription plans to avail macros access as per your requirement. You can read more about macros here.

Step 1: Click the hamburger icon and select Macros from the drop-down.

recording macro to login to a page

Step 2: Name the macro and enter the starting URL where the login page is present. Click Add New Macro.

recording macro to login to a page

Step 3: Now, the macro recorder opens up a browser view where you can perform actions on the page. Here all your interaction with the page is recorded on the right-hand side. Perform the steps of entering your credentials and click on login.

recording macro to login to a page and how steps are recorded

Step 4: Once all the necessary actions are recorded to log in, click on “Stop Recording” button. You can even replay and check the actions recorded.

Step 5: Click Save.

Step 6: Set up the monitor on your Distill web app with the starting URL and click the Macros Button on the visual selector view. Here select the macro you pre-recorded. Click Play button.

adding macro to the monitor

Step 7: Make selections on the page after the macro has replayed all the recorded steps and reached the final page view you want to track. Then, click Save Selections in the visual selector view.

Step 8: Configure the other components of your monitor and click Save.

Troubleshooting tips:

If the steps in the macro were not executed, you will get a EMACRO error. This might be because either the elements on the page do not exist or the layout of the page has changed. To get the error detail you can check the macro step’s error in the error page. Click on the View Details in the log of checks. The Error Details section shows the last step where the macro failed, including a snapshot of the page at the error time.

To fix the broken macro, go back to your macros page. Open the recorder and replay the steps,check where the macro fails, as indicated on your error details page. Appropriately edit or replace the steps and save your updated macro. When you replay it again, it should work and execute all the steps. You can also delete the older macro and record a fresh one.

Using Profiles to save cookies

Distill’s Profiles uses a remote browser to automatically save cookies of a website to access the page for you to monitor its content. You can add a website specific profiles to login and save cookies.

Step 1: Create Profile for the webpage at https://monitor.distill.io/#/w/0/profiles/.

  • Add a new profile name and click on “Add New Profile”.

    Add New Profile button

  • A remote browser will open in the Distill cloud. Enter the URL of the webpage that you want to monitor and sign in using the credentials.

    remote browser authentication

  • Save cookies and exit.

    logged in webpage in a new profile showing a button to save cookies

Step 2: Click on the dropdown and select “Webpage with profile” as shown below.

button with text as webpage with profile

Step 3: Select the profile, enter the URL that you want to monitor and click on GO button. It should open the logged in webpage.

placeholder for URL of webpage and dropdown button of profile list

Step 4: In the Visual selector, select parts of the web page and save.

A logged in webpage with selections to monitor

Once saved, Distill will monitor the webpage using your saved cookies.

logged in page showing in Watchlist

You can check out this video tutorial to use profiles to track pages with authentication steps.

Troubleshooting tip:

When cookies expire, you will get an error notification. In that case, you should save your cookies again for the webpage. To save cookies, go to https://monitor.distill.io/#/w/0/profiles/ -> click on “open remote browser” for the profile -> enter URL -> Sign in -> save cookies and close.

Please note that number of profiles are limited as per the subscribed plan.

For any queries or assistance, feel free to reach out to us on Distill Forums.