- Getting Started
- Source Control
- CI integrations
- Web Projects
- Get Notified
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.
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.
First install the Screenshotbot CLI:
curl https://screenshotbot.io/recorder | sh
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>
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.
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
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.