Take a Screenshot with Browserless API on New Finished Automation Run from Browserhub API

Pipedream makes it easy to connect APIs for Browserless, Browserhub and 2,800+ other apps remarkably fast.

Trigger workflow on

New Finished Automation Run from the Browserhub API

Next, do this

Take a Screenshot with the Browserless API

No credit card required

▶

Watch us build a workflow

8 min

Watch now ➜

Trusted by 1,000,000+ developers from startups to Fortune 500 companies

Developers ♥ Pipedream

Getting Started#

This integration creates a workflow with a Browserhub trigger and Browserless action. When you configure and deploy the workflow, it will run on Pipedream's servers 24x7 for free.

Select this integration
Configure the New Finished Automation Run trigger
1. Connect your Browserhub account
2. Configure Polling interval
3. Optional- Select a Scraper ID
Configure the Take a Screenshot action
1. Connect your Browserless account
2. Configure URL
3. Optional- Configure Download Path
4. Optional- Configure Selector
5. Configure syncDir
Deploy the workflow
Send a test event to validate your setup
Turn on the trigger

Details#

This integration uses pre-built, source-available components from Pipedream's GitHub repo. These components are developed by Pipedream and the community, and verified and maintained by Pipedream.

To contribute an update to an existing component or create a new component, create a PR on GitHub. If you're new to Pipedream component development, you can start with quickstarts for trigger span and action development, and then review the component API reference.

Trigger#

New Finished Automation Run on Browserhub

Description:Emit new event when an automation run has finished running. [See the documentation](https://developer.browserhub.io/)

Version:0.0.1

Key:browserhub-new-finished-automation-run

View on GitHub

Browserhub Overview#

The Browserhub API offers automation and control over browser sessions, enabling users to create, manipulate, and extract data from web pages programmatically. Integrating Browserhub with Pipedream opens a world of possibilities for automating web interaction workflows, monitoring website changes, scraping data, and testing web applications. Pipedream's serverless platform allows for easy orchestration of API calls and data handling, making it a powerful tool for developers to harness the capabilities of Browserhub in a scalable and efficient manner.

Trigger Code#

import { DEFAULT_POLLING_SOURCE_TIMER_INTERVAL } from "@pipedream/platform";
import browserhub from "../../browserhub.app.mjs";
import sampleEmit from "./test-event.mjs";

export default {
  key: "browserhub-new-finished-automation-run",
  name: "New Finished Automation Run",
  description: "Emit new event when an automation run has finished running. [See the documentation](https://developer.browserhub.io/)",
  version: "0.0.1",
  type: "source",
  dedupe: "unique",
  props: {
    browserhub,
    db: "$.service.db",
    timer: {
      label: "Polling interval",
      description: "Pipedream will poll the AskNicely on this schedule",
      type: "$.interface.timer",
      default: {
        intervalSeconds: DEFAULT_POLLING_SOURCE_TIMER_INTERVAL,
      },
    },
    scraperId: {
      propDefinition: [
        browserhub,
        "scraperId",
      ],
      optional: true,
    },
  },
  methods: {
    _getBaseDate() {
      return this.db.get("baseDate");
    },
    _setBaseDate(baseDate = null) {
      this.db.set("baseDate", baseDate);
    },
    async startEvent(maxResults = 0) {
      const baseDate = this._getBaseDate();
      let newBaseDate = null;

      const response = this.browserhub.paginate({
        fn: this.browserhub.listRuns,
        maxResults,
        baseDate,
        params: {
          scraper_id: this.scraperId,
        },
      });

      const responseArray = [];

      for await (const item of response) {
        if (item.status === "successful") responseArray.push(item);
        if (item.status === "running") newBaseDate = item.created_at;
      }

      if (newBaseDate) this._setBaseDate(newBaseDate);
      if (!newBaseDate && responseArray.length) this._setBaseDate(responseArray[0].created_at);

      for (const item of responseArray.reverse()) {
        this.$emit(
          item,
          {
            id: item.id,
            summary: `Successfully finished automation run with ID: ${item.id}`,
            ts: item.created_at,
          },
        );
      }
    },
  },
  hooks: {
    async deploy() {
      await this.startEvent(25);
    },
  },
  async run() {
    await this.startEvent();
  },
  sampleEmit,
};

Trigger Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI and CLI.

Label	Prop	Type	Description
Browserhub	`browserhub`	`app`	This component uses the Browserhub app.
N/A	`db`	`$.service.db`	This component uses `$.service.db` to maintain state between executions.
Polling interval	`timer`	`$.interface.timer`	Pipedream will poll the AskNicely on this schedule
Scraper ID	`scraperId`	`string`	Select a value from the drop down menu.

Trigger Authentication#

Browserhub uses API keys for authentication. When you connect your Browserhub account, Pipedream securely stores the keys so you can easily authenticate to Browserhub APIs in both code and no-code steps.

About Browserhub#

Easy to use no-code web scraping and data extraction software.

Action#

Take a Screenshot on Browserless

Description:Take a screenshot of a page. [See the documentation](https://www.browserless.io/docs/screenshot)

Version:0.5.6

Key:browserless-take-screenshot

View on GitHub

Browserless Overview#

The Browserless API on Pipedream allows you to automate browser actions without the overhead of managing your own browser infrastructure. This service provides a way to run Chrome browser sessions programmatically, making it ideal for web scraping, automated testing, and screenshot capture. Leveraging this on Pipedream, you can create serverless workflows that interact with web pages, extract data, and perform actions as a human would, all in a scalable and efficient manner.

Action Code#

import browserless from "../../browserless.app.mjs";
import fs from "fs";

export default {
  key: "browserless-take-screenshot",
  name: "Take a Screenshot",
  description: "Take a screenshot of a page. [See the documentation](https://www.browserless.io/docs/screenshot)",
  version: "0.5.6",
  annotations: {
    destructiveHint: false,
    openWorldHint: true,
    readOnlyHint: false,
  },
  type: "action",
  props: {
    browserless,
    url: {
      type: "string",
      label: "URL",
      description: "Enter the URL you'd like to take a screenshot of here",
    },
    downloadPath: {
      type: "string",
      label: "Download Path",
      description: "Download the screenshot to the `/tmp` directory with the specified filename",
      optional: true,
    },
    waitForSelector: {
      type: "string",
      label: "Selector",
      description: "Allows you to wait for a selector to appear in the DOM. See [more details in the API Doc](https://www.browserless.io/docs/screenshot#custom-behavior-with-waitfor)",
      optional: true,
    },
    syncDir: {
      type: "dir",
      accessMode: "write",
      sync: true,
    },
  },
  methods: {
    async downloadToTMP(screenshot) {
      const path = this.downloadPath.includes("/tmp")
        ? this.downloadPath
        : `/tmp/${this.downloadPath}`;
      fs.writeFileSync(path, screenshot);
      return path;
    },
  },
  async run({ $ }) {
    const screenshot = await this.browserless.takeScreenshot({
      data: {
        url: this.url,
        bestAttempt: true,
        waitForSelector: this.waitForSelector
          ? `{ "selector": "${this.waitForSelector}" }`
          : undefined,
      },
      $,
    });

    const result = {
      screenshot: screenshot.toString("base64"),
      type: "png",
    };

    if (screenshot && this.downloadPath) {
      const filePath = await this.downloadToTMP(screenshot);
      result.filename = filePath;
      result.filePath = filePath;
    }

    if (screenshot) {
      $.export("$summary", `Successfully created screenshot of URL ${this.url}.`);
    }

    return result;
  },
};

Action Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI.

Label	Prop	Type	Description
Browserless	`browserless`	`app`	This component uses the Browserless app.
URL	`url`	`string`	Enter the URL you'd like to take a screenshot of here
Download Path	`downloadPath`	`string`	Download the screenshot to the `/tmp` directory with the specified filename
Selector	`waitForSelector`	`string`	Allows you to wait for a selector to appear in the DOM. See more details in the API Doc
syncDir	`syncDir`	`dir`