January 26, 2020

Capture a web page behind a login form

With Blit, you can inject JavaScript code into a page to create complex interactions. You can use this functionality to log into a website before you capture a page.

The JavaScript code must replicate the following:

  1. Enter the user name and password.
  2. Click on the login button.
  3. Wait for the new page to load.

The first step is to identify the username and password fields. We will use CSS selectors to identify the two fields. You can find additional information about retrieving CSS selectors in this post.

We will use the Browshot login page as an example: https://browshot.com/login. This page has two forms, the first of which is used to log into the dashboard.

Browshot login page


To get the CSS selector for the username field, right-click on it and choose Inspect : Inspect username field

Right-click on the highlighted HTML. Select Copy and then Copy selector :

Get the CSS selector

You can paste the selector into a text file to see its value:

#username

Do the same for the login field and the login button. The CSS selectors are:

#password
body > section:nth-child(2) > div > div > div.wrap-small.contact > form > div.grid_12.center > input

The selector for the login button can simplified:

input.btn-green[value=Login]

Now, let’s use the following JavaScript template:

(function () {

    var username_field = "#username"; // username box
    var password_field = "#password"; // password field
    var login_button = "input.btn-green[value=Login]"; 

    var username = "my username"; // Update with your login
    var password = "my password"; // Update with your password

    // This function checks on whether the username field is present
    var check = function(element) {
      var found = document.querySelectorAll(element);

      if (found.length == 0) {
        // the field is not present, check again alter
        setTimeout(check, 500, element);        
      }
      else {
        // the field is present, fill out the form
        document.querySelector(username_field).value = username; // enter username
        document.querySelector(password_field).value = password; // enter password

        document.querySelector(login_button).click(); // submit the form
      }
    }; 

  // call the function above
  check(username_field);
})();

This JavaScript code waits for the login form to be displayed, then fills it out and submits the credentials. You should check it by running it in your browser. In Chrome, go to the Browshot login page and press F12 to show the Chrome Developer Tools. Under Console , paste the code above. (You will get a login error, as these are not real credentials.)

Now, you can use this JavaScript code in your capture. Under Advanced Web Options , do the following:

  1. Change Browser Wait (Seconds) to 30. You must wait a sufficient amount of time for the new page to load after the login.
  2. JavaScript Snippet : click on Edit JavaScript and enter the code above.

If you need help with logging into a website, or with any other type of website interaction, do not hesitate to contact us.

Share