TL;DR: Interested in using a self-hosted Browserless and Playwright integration with n8n? Maybe you’re already running ChangeDetection.io? This explains how to leverage them to generate PDFs, create screenshots, and more in n8n and shares a few workflows you can use.
I recently set up an instance of changedetection.io to create a simple front end for monitoring websites. I followed a suggestion from this Reddit post, which linked to this Gist containing a useful Docker Compose file that integrates browserless with Playwright.
After setting it up on a VM, I realized I could also access the browserless and Playwright APIs, which led me to connect my n8n instance to take advantage of features like generating PDFs, capturing screenshots, and downloading content. I reviewed some of the browserless v2 APIs and created a few simple n8n workflows, which I now use in various projects. I thought these templates might be useful to share with others who are self-hosting changedetection.io or have a self-hosted browserless instance running Playwright and want easier access to these capabilities.
If you’re using the Gist I linked, I recommend securing your changedetection instance by generating a custom token in your Docker setup. Replace YOUR_PLAYWRIGHT_TOKEN with your own token. After importing the attached workflow, you can create a credential for Browserless: Header Auth Account with the following details:
- Name: Authorization
- Value: YOUR_PLAYWRIGHT_TOKEN
Then, use this credential in any place where header auth is needed within the workflow to connect to your hosted instance. The n8n workflow contains six API integration examples, including /screenshot, /content, /download, /function, /pdf, and /scrape. You can read more about these APIs here.
Below is the Docker Compose configuration:
changedetection:
image: ghcr.io/dgtlmoon/changedetection.io:latest
container_name: changedetection
hostname: changedetection
volumes:
- /home/path/files:/datastore # Main data volume
environment:
- PORT=20400 # Port for changedetection
- PUID=0 # Running as root
- PGID=0 # Running as root
- PLAYWRIGHT_DRIVER_URL=ws://playwright-chrome:3000/chrome?token=YOUR_PLAYWRIGHT_TOKEN&launch={"headless":false} # WebSocket connection for Playwright
ports:
- 20400:20400 # Port mapping for changedetection
restart: unless-stopped
depends_on:
- playwright-chrome
playwright-chrome:
hostname: playwright-chrome
image: ghcr.io/browserless/chrome
restart: unless-stopped
environment:
- TOKEN=YOUR_PLAYWRIGHT_TOKEN
- SCREEN_WIDTH=1920
- SCREEN_HEIGHT=1024
- SCREEN_DEPTH=16
- ENABLE_DEBUGGER=true
- TIMEOUT=600000
- CONCURRENT=15
ports:
- 20450:3000 # Port mapping for Playwright WebSocket connection
Note: The purpose of sharing that modified docker file was simply to demonstrate how to implement the token effectively. I recommend using the Gist I linked to above and avoiding running Changedetection as root with the PORT/PUID settings in that example, but if you’re hosting in an environment with limited control, it might be necessary.
Here’s the n8n workflow that integrates the APIs with the self-hosted instance:
I thought I’d share in the event it is helpful for those relying on third-party services for similar capabilities supported by browserless and playwright such as:
- Screenshotting: Capture a screenshot of a URL.
- PDF Generation: Convert a web page into a PDF document.
- Content Retrieval: Extract HTML content from a specific URL.
- Downloading files: Download files such as ZIPs from a provided link.
- Scraping: Scrape elements from a web page based on specific selectors.
Aside from adding your header authentication credentials, the only other change you’ll need to make in the workflow is to update the domain and port of your Changedetection (or Browserless/Playwright) instance, as mentioned in the sticky note within the template.