[TASK] Automate Galery Screenshots

refs TYPO3-Documentation/t3docs-screenshots#152
TYPO3-Documentation · Jul 9, 2021 · 9db4525 · 9db4525
1 parent 57d24d7
commit 9db4525
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 8 deletions.
diff --git a/Documentation/Images/AutomaticScreenshots/RootlevelFlag.png b/Documentation/Images/AutomaticScreenshots/RootlevelFlag.png
diff --git a/Documentation/Images/AutomaticScreenshots/RootlevelFlag.rst.txt b/Documentation/Images/AutomaticScreenshots/RootlevelFlag.rst.txt
@@ -0,0 +1,7 @@
+.. Automatic screenshot: Remove this line if you want to manually change this file
+
+.. figure:: /Images/AutomaticScreenshots/RootlevelFlag.png
+   :alt: The rootlevel flag in a template record.
+   :class: with-shadow
+
+   The rootlevel flag in a template record.
diff --git a/Documentation/Images/AutomaticScreenshots/TemplateAnalyzerStructure.png b/Documentation/Images/AutomaticScreenshots/TemplateAnalyzerStructure.png
diff --git a/Documentation/Images/AutomaticScreenshots/TemplateAnalyzerStructure.rst.txt b/Documentation/Images/AutomaticScreenshots/TemplateAnalyzerStructure.rst.txt
@@ -0,0 +1,7 @@
+.. Automatic screenshot: Remove this line if you want to manually change this file
+
+.. figure:: /Images/AutomaticScreenshots/TemplateAnalyzerStructure.png
+   :alt: The template structure as seen with the Template Analyzer
+   :class: with-shadow
+
+   The template structure as seen with the Template Analyzer
diff --git a/Documentation/Images/ManualScreenshots/ObjectBrowserSetupRoot.png b/Documentation/Images/ManualScreenshots/ObjectBrowserSetupRoot.png
diff --git a/Documentation/Images/ManualScreenshots/RootlevelFlag.png b/Documentation/Images/ManualScreenshots/RootlevelFlag.png
diff --git a/Documentation/Images/ManualScreenshots/TemplateAnalyzerStructure.png b/Documentation/Images/ManualScreenshots/TemplateAnalyzerStructure.png
diff --git a/Documentation/TypoScriptOverview/MainTemplate/Index.rst b/Documentation/TypoScriptOverview/MainTemplate/Index.rst
@@ -10,9 +10,7 @@ The TypoScript code used to define how pages are rendered is
 located in the "main" template. In this template a so-called
 "rootlevel flag" is set.
 
-.. figure:: /Images/ManualScreenshots/RootlevelFlag.png
-   :alt: The rootlevel flag in a template record.
-
+.. include:: /Images/AutomaticScreenshots/RootlevelFlag.rst.txt
 
 When the frontend renders a page, TYPO3 CMS searches along the page tree up
 to the root page to find a "main" template. Normally, there are

diff --git a/Documentation/UsingFluidStyledContent/Index.rst b/Documentation/UsingFluidStyledContent/Index.rst
@@ -20,11 +20,7 @@ You should see a list of all used TypoScript templates and how they possibly
 include one another. All templates are evaluated by TYPO3 CMS from top to
 bottom.
 
-.. figure:: /Images/ManualScreenshots/TemplateAnalyzerStructure.png
-   :alt: The template structure as seen with the Template Analyzer
-
-   The template structure as seen with the Template Analyzer
-
+.. include:: /Images/AutomaticScreenshots/TemplateAnalyzerStructure.rst.txt
 
 With a click on "EXT:fluid\_styled\_content/static/", you can view the content
 of that template (below the hierarchical view), first the constants, then the

diff --git a/screenshots.json b/screenshots.json
@@ -0,0 +1,55 @@
+{
+    "suites": {
+        "Introduction": {
+            "screenshots": {
+                "_default": [
+                    {"action": "resizeWindow", "width": 1024,"height": 768},
+                    {"action": "setScreenshotsDocumentationPath", "path": "Documentation"},
+                    {"action": "setScreenshotsImagePath","path": "Images/AutomaticScreenshots"},
+                    {"action": "setScreenshotsRstPath","path": "Images/AutomaticScreenshots"},
+                    {"action": "setCodeSnippetsSourcePath","path": "typo3conf/ext/styleguide"},
+                    {"action": "setCodeSnippetsTargetPath", "path": "CodeSnippets"}
+                ],
+                "templatesModule": [
+                    {"include": "_default"},
+                    {"action": "see", "text": "Template"},
+                    {"action": "click", "link": "Template"},
+                    {"action": "drawBox", "selector": "#web_ts"},
+                    {"action": "openPageTreePath", "path": ["Congratulations"]},
+                    {"action": "switchToContentFrame"},
+                    {"action": "wait", "timeout": "1"},
+                    {"action": "selectOption", "select": "select.t3-js-jumpMenuBox", "option": "Template Analyzer"},
+                    {"action": "see", "text": "Template hierarchy"},
+                    {"action": "drawBox", "selector": "select.t3-js-jumpMenuBox"},
+                    {
+                        "action": "makeScreenshotOfElement",
+                        "altText": "The template structure as seen with the Template Analyzer",
+                        "captionText": "The template structure as seen with the Template Analyzer",
+                        "fileName": "TemplateAnalyzerStructure"
+                    }
+                ],
+                "templatesRecords": [
+                    {"include": "_default"},
+                    {"action": "resizeWindow", "width": 640,"height": 768},
+                    {
+                        "action": "goToRecord",
+                        "table": "sys_template",
+                        "uid": 2
+                    },
+                    {"action": "click", "link": "Options"},
+                    {
+                        "action": "drawBox",
+                        "selector": "//fieldset[contains(., \"Rootlevel\")]"
+                    },
+                    {
+                        "action": "makeScreenshotOfElement",
+                        "fileName": "RootlevelFlag",
+                        "selector": ".t3js-module-body",
+                        "captionText": "The rootlevel flag in a template record.",
+                        "altText": "The rootlevel flag in a template record."
+                    }
+                ]
+            }
+        }
+    }
+}