Intoli Remote Browser Tour

Welcome to the Remote Browser Tour!

Remote Browser is an open source browser automation framework for programmatically controlling and interacting with web browsers like Google Chrome and Firefox. It is similar to projects like Puppeteer and Selenium in many ways, but it's unique in that it's focused around the idea of exposing standard browser APIs instead of inventing new ones. Just like React favors Array.map() over a new construct like Angular's ng-repeat, Remote Browser allows developers to use document.getElementById() instead of learning ChromeDriver.find_element_by_id(). With Remote Browser, it's possible to use vanilla JavaScript, HTML browsing contexts, and the Web Extensions API to accomplish complex testing and web scraping tasks. Not only does this allow developers to leverage existing knowledge and documentation, it also makes Remote Browser automatically compatible with Chrome, Edge, Firefox, and Opera. That's something that really only Selenium and frameworks built on top of it can currently claim.

As we walk through a few examples, you'll see that the Remote Browser API is actually extremely minimal. It basically provides the minimum amount of syntax required to easily execute privileged JavaScript code in a remotely running browser instance while abstracting away all of the complexity relating to connections, marshalling, and error handling. This makes Remote Browser a somewhat low-level tool—more analogous to the Chrome DevTools Protocol or WebDriver than to Puppeteer or Selenium—but it also provides a powerful base on top of which higher-level tools can be built very easily. We have a variety of such projects in the works here at Intoli, so you can expect to see some exiting new libraries that integrate with Remote Browser in the near future!

You've probably noticed the code evaluation environment over to the right. Clicking "Run" will evaluate the JavaScript code in the editor, and the output will be displayed in the console below the editor. The code that's there now is pretty simple, but go ahead and click "Run" to get a feel for how it works. After that, click the ">>" symbol below and we'll start looking at some code examples which illustrate how Remote Browser works.

1/7

1
2
3
4
5
6
7
8
9
10
11
12
13
// The code in this editor will execute in your 
    browser when you click run.
// The outputs of any `console.log()` 
    statements will show up below.
// We'll use `console.log()` statements to 
    output results throughout the tour.
// A simple asynchronous function to wait for a 
    specified amount of time.
const waitForMe = async (milliseconds = 2500) 
    => (
  new Promise(resolve => setTimeout(resolve, 
      milliseconds))
);
console.log('Ready to move on with the tour?');
await waitForMe();
console.log('Click ">>" at the bottom of the 
    page to continue onwards!');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX