Sometimes I need to work on web pages whose HTML is dynamically loaded from a JSON endpoint. There’s no better way to verify the module’s behaviour than manual testing, but much of the time, I just need to ensure the correct HTML is rendered. It’s slow to click around the site, so I use curl, but since the HTML is inside JSON, it isn’t feasible to interpret its output.
Say the JSON endpoint’s output is structured as follows:
First, I go to the page I’m working on and open Chrome’s network tab. I manually perform the task that hits the JSON endpoint of interest, I right-click on the relevant call in the network tab, and I select “Copy as curl“, which copies all the relevant cookies and headers necessary to replicate the request.
The curl command will be piped into
pup as follows:
jq call extracts the HTML from the JSON and the
-r flag removes the outer quotation marks. The
pup call formats the HTML and the
-p unescapes the output (otherwise it’ll be full of entities).
The output will look like:
You can use CSS selectors to filter the pup call as follows:
If you want to take your productivity up another level, you can use this combination with
watchman-make as described in this post: watchman-make: focus on your code.
pup are very powerful tools, and even though this example is probably the simplest thing you can do with them it can really accelerate your endpoint testing. You can install both tools through Homebrew. Happy coding!