Imagine this: You're documenting an unreleased feature, and your documentation requires screenshots. However, you're working in an internal environment that includes features you don't want to reveal to the public. What do you do?
We faced this exact situation during the API Summit release when we needed to capture screenshots of the new Kong Konnect Plus dashboard while our internal environment also showcased Mesh Manager features.
In days gone by, tackling such a challenge meant delving into browser dev tools, meticulously hiding elements each time, and redoing the process after refreshing the browser. Now, there’s a better way. Let me introduce you to shot-scraper.
At Kong, we’ve adopted shot-scraper, a tool for taking automated screenshots of websites, as part of our core workflow. We’ve even extended shot-scraper with the capability to run macros.
Macros are predefined JavaScript functions that can be executed at specific moments, enhancing your ability to interact with the web page and set up conditions prior to capturing the screenshot.
To solve the issue outlined above, I crafted a simple shot-scraper macro to remove elements from the page:
This macro was used in the following shot-scraper script to hide the Mesh Manager section in the sidebar:
Without shot-scraper, we would have had to edit the page manually using developer tools each time the page loaded:
We use shot-scraper for a variety of different tasks:
1. Take a standard screenshot of a dashboard:
2. Update the page with random values (in this case the number of requests):
3. Add annotations to specific elements on a page that you can reference in written documentation:
4. Interact with the page like a user. Here, we configure a graph in our Analytics dashboard builder:
Using shot-scraper, our docs team can write scripts once and have screenshots that are up-to-date, accurate, and reproducible by anyone on the team.
Screenshots in docs, in my experience, struggle with the following things:
So, what's the solution when you want accurate screenshots without spending hours on cropping and resizing? Automation!
This is the only way to ensure that you are insulated from the pace of UI development and design while still being able to provide screenshots in your documentation.
For the Kong Docs team, shot-scraper is an invaluable tool that allows us to provide accurate documentation including screenshots to our readers.
If you're considering making the transition from manual to automated screenshot workflows, here are some practical tips:
To successfully implement shot-scraper, everyone on your team should understand its value. Encourage your team members to embrace automation by showcasing the significant time savings it offers and its contribution to documentation accuracy. This approach can benefit not only the documentation team but also other departments, such as design teams, who can confidently make UI changes without burdening the documentation process.
Shot-scraper as part of your docs arsenal can help bring efficiency, accuracy, and efficacy to your documentation.
Meet Emily. She’s an API product manager at ACME, Inc., an ecommerce company that runs on dozens of APIs. One morning, her team lead asks a simple question: “Who’s our top API consumer, and which of your APIs are causing the most issues right now?”
In the last two parts of this series, we discussed How to Strengthen a ReAct AI Agent with Kong AI Gateway and How to Build a Single-LLM AI Agent with Kong AI Gateway and LangGraph . In this third and final part, we're going to evolve the AI Agen
In my previous post, we discussed how we can implement a basic AI Agent with Kong AI Gateway. In part two of this series, we're going to review LangGraph fundamentals, rewrite the AI Agent and explore how Kong AI Gateway can be used to protect an LLM
This is part one of a series exploring how Kong AI Gateway can be used in an AI Agent development with LangGraph. The series comprises three parts: Basic ReAct AI Agent with Kong AI Gateway Single LLM ReAct AI Agent with Kong AI Gateway and LangGr
What Is RAG, and Why Should You Use It? RAG (Retrieval-Augmented Generation) is not a new concept in AI, and unsurprisingly, when talking to companies, everyone seems to have their own interpretation of how to implement it. So, let’s start with a r
In February 2024, Kong became the first API platform to launch a dedicated AI gateway, designed to bring production-grade performance, observability, and policy enforcement to GenAI workloads. At its core, Kong’s AI Gateway provides a universal API
In this article, which is based on my talk at VueConf Toronto 2023, we'll explore how to harness the power of Vue.js and micro frontends to create scalable, modular architectures that prioritize the developer experience. We'll unveil practical strate