TYPO3 Screenshots Tool - Base module

Application by
Alexander Nitsche

What is your idea about?
Implement a TYPO3 Screenshots Tool that supports taking screenshots of TYPO3 for official documentation by scripting photo tours that can be run repeatedly and customized granularly, much like tests. It should provide actions for taking screenshots from a TYPO3 instance, drawing on them, and extracting parts of them. The tool should provide TYPO3 environments, consisting of the TYPO3 core and optionally a pre-installed distribution, that are walkable by scripted actions and from which screenshots can be taken according to a given configuration file.

This project will build on the TYPO3 Testing Framework and the underlying Codeception acceptance testing framework, which is already used for running the TYPO3 backend and frontend.

What is the potential impact of your idea?
The official TYPO3 documentation contains almost 850 images, a large part of which shows the TYPO3 installation process, the backend and the frontend. Since these screenshots become outdated every 1.5 years with each TYPO3 LTS release, documentation maintainers would have to recreate all screenshots manually at the same frequency, which is not affordable. The TYPO3 Screenshots Tool is intended to reduce a large portion of that maintenance cost.

Besides time saving there are more benefits of this project:

  • Scalability: Screenshots of similar scope can be created and adapted quickly by copy & paste & adapt. Additional screenshots do not lead to a mental burden as they have to be recreated by arbitrary community members in the future.
  • Consistency: The browser and resolution used are always the same. Changes in labeling styles (color, shapes of arrows and labels) can be incorporated quickly and reliably. This way we can ensure that the design is always in line with the corporate design of TYPO3.
  • Feedback: TYPO3 Core and TYPO3 documentation might differ over time without further notice. The scripted screenshots approach introduces a first feedback instance: If a generated image differs from the original, the text surrounding the image in the documentation must also be checked for changes.
  • Hardening: The screenshots project is based on several TYPO3 projects like typo3/typo3-core, typo3/testing-framework, typo3/cms-introduction, typo3/cms-styleguide,bk2k/bootstrap-package and t3docs/examples. The screenshots run works as an additional test layer: Errors in the dependent projects become visible through the screenshots run or screenshots comparison.
  • Synergy: The screenshots project and typo3/testing-framework both provide their own codeception modules for acceptance testing, so in perspective there should be a common set of modules that is improved from both perspectives.
  • Training: The script for running screenshots consists of codeception acceptance test actions in a reduced version. Thus, by writing the script, the author implicitly learns to write acceptance tests for own PHP applications.
  • Flexibility: The same tool can be used perspectively in TYPO3 extensions and third-party projects.

Who can / should implement your idea?
I will take care myself

Approximate Funds needed
€25,000 - €50,000

1 Like

Hello Alexander,

thank you for your application. In our call for applications we asked for specific ideas to grow the membership of the TYPO3 Association. Can you please explain how you application can help to grow the number of members?

Hello Ingo,

the increase of the amount of members (and the use of all other services of the Association and the GmbH) can be accomplished by the increase of the number of people using TYPO3. And the growth of user numbers is mainly driven by delivering good code, good documentation and good marketing. On the other hand, enhancements should be cost effective, both in terms of money and time. This feature is both to improve documentation on a broad scale, and to induce cost efficiency for the years to come.



John Davenport, 30th June 2021
They’ve done totally awesome stuff over there. That’s the most advanced screenshot automation I’ve seen outside of my app.

Lina Wolf, 20th of July 2021
Automatically Updated about 250 Screenshots across 6 manuals to represent TYPO3 11.4-dev master. Took me not even 2 hours.

Susi Moog
@linawolf this is soooo cool.

Benni Mack, 10th of August 2021
hey everybody, just wanted to say that I’m superexcited about the “automated screenshot” functionality you’ve built! I think this is a huge success for TYPO3.

Volker Graubaum, 20th of October 2021
Say, do you still make the screenshots with Puppeteer or with Codeception? I was going to mention those in a post about v11.

Moin, we do them completely in Codeception, which means as close as possible to the techstack of TYPO3 itself.

Super cool.

Thank you. I have a few questions.

Is that improving upon GitHub - TYPO3-Documentation/t3docs-screenshots: Providing a way to take screenshots of the TYPO3 CMS in a scripted way.?
Isn’t that already used for screenshots in documentation?
What is going to be added to that if the funds are provided?

Hi Jonas,

thanks for your question. This budget is not for something that will be planned and implemented in the future but that has been achieved already in the last year - you mentioned the right repository. Now, as the idea is working and improving the TYPO3 project we send in this budget request for compensation.

The idea behind this process is, that there was a window of opportunity in the last year when we had the idea and the motivation to test and implement the project but an uncertain state of financing (end of turn of budget committee, uncertain amount of annual budget). Our investment of time was really big and we are convinced of the effect of this project, so we use this year’s budget requests to sell an existing solution and we interpret the result like this: If the budget request is granted, the community and budget committee value the positive effect of the project on the whole TYPO3 project and motivates us to move along this path and fully integrate it. If the request is negated we take this as a rejection of the idea and a request to stop this way.