Rendering with Static Site Generators

If you build your website with a static site generator such as Jekyll or Gatsby, you can choose to run Screenshotbot as part of your CI job, without having to maintain an infrastructure for running browsers such as Selenium.

In this set up, the Screenshotbot SDK will scan your static site and upload all HTML files and associated assets (including external referenced assets) to our servers, and from there Screenshotbot asynchronously renders the pages in the browser oonfigurations of your choice.

Using this set up instead of the No-code set up, you will be able to take advantage of notifications on your Pull Requests.

Local run

Before we demonstrate how to set this up on your CI, let's show you how to run this locally. The same steps will approximately translate over to your CI configurations.

Setting up the CLI

First install the Screenshotbot CLI:

        curl https://screenshotbot.io/recorder | sh

You can download the recorder script from here: Download recorder

Or you can also use PowerShell as follows:

          PS C:\> curl https://screenshotbot.io/recorder.exe -O recorder.exe

You can get the API Key and Secret from your dashboard.

        export SCREENSHOTBOT_API_KEY=<api-key>
        export SCREENSHOTBOT_API_SECRET=<api-secret>
        # You might have to restart the shell or you can set `set` instead
        C:\> setx SCREENSHOTBOT_API_KEY <api-key>
        C:\> setx SCREENSHOTBOT_API_SECRET <api-secret>

Upload resources

Now build your static site. Say your static site is generated to out/, then you can call the CLI as follows:

      $ ~/screenshotbot/recorder --static-website \
         tests/_output/debug/screenshotbot/ \
         --channel amazon-test

The above commands should generate some output. At the end of the output you should find a link to the job status:

    ...
    INFO - Uploading file: /tmp/tmpdirT6RJOGNY.tmp/2f90e7c...
    INFO - Uploading file: /tmp/tmpdirT6RJOGNY.tmp/cd7d52d...
    INFO - Screenshot job queued: https://screenshotbot.io/replay/logs/628e...

You can open the last link to check the status of your job. You will need to log in to Screenshotbot to view the status. Once the job is done, you should see it on the Runs page.

Specifying browser configurations

By default the above job will only run a pre-defined Google Chrome browser.

You can choose your browser configurations by providing a `browser-config.yml` file:

Google Chrome Desktop:
  type: chrome
  dimensions: 1280x800
Nexus 6P:
  type: chrome
  mobile-emulation: Nexus 6P
Firefox:
  type: firefox
  dimensions: 1280x800

In order for the CLI to discover this file, you should pass in an additional argument: --browser-configs browser-config.yml

Running on CI

For most Continuous Integration frameworks and services, your CI set up will mirror the set up above. First you store your API Key and secret as an environment variable. Second, in your CI config add a step to download and install the CLI. Third, call the CLI against the directory with your static files.

For most common set ups, this should just work! We parse environment variables from most CI services (in particular, Circle CI, Bitrise, Netlify) to get the additional information we need to attribute the screenshots and update pull requests.

If you are using a different CI service, just let us know! Alternatively you just need to pass the missing environment variables as command line arguments.

Outline

Ready to get started?

Sign up or contact us.