OpenStreetMap
Easy screenshot updates (useful in documentation, especially tutorials)
Posted by Mateusz Konieczny on 9 July 2018 in English.During making documentation of OSM tools and software it is frequently useful to add screenshots. Especially tutorials are often featuring multiple ones. I always disliked that such images are frequently getting outdated. It may caused by interface changes, map style changes and edits to OSM data.
Sometimes it requires more significant update of documentation, sometimes updating images is enough. But it may be very time-consuming.
When I was making my Overpass Turbo Tutorial for newbies* I wanted to find a way to make such images easy to recreate.
I found an interesting solution. Selenium is a software usually used for testing websites. It has plenty of features but interesting here is is that one may write a simple script that will
- open a website
- wait for it to load
- take a screeenshot
This way it may be possible to generate and recreate screenshots without manually taking them.
There is plenty of way how Selenium may be used, I am using Python bindings connected to Firefox using geckodriver.
Time-saving code is relatively simple.
imports:
from selenium import webdriver
import time
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
Lets say that I wanted an example of a simple website. This code will take a picture of googling results and save it to a specified file.
driver.get('https://duckduckgo.com/?q=wetland+OSM+Wiki&ia=web')
driver.save_screenshot('wetland-search-results.png')
Following code sample will modify vieport size and interact with page to hide irritating banners, then take a picture of site (note that such use is also subject of Tile Usage Policy like other automated tile downloading, but for regular tutorial updates use will be not higher than human doing the same):
