Demo repository for TYPO3CAMP MITTELDEUTSCHLAND 2024

Demo TYPO3 instance for visual regression testing with BackstopJS

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

1. Create a new project directory - e.g. in your home directory

   • run mkdir ~/t3cmd24

Install and use the project

1. Clone the project in the newly created project directory

   • change into your created project directory - e.g. cd ~/t3cmd24
   • clone the repository
     • via git clone https://github.com/portrino/t3cmd24.git .

2. Start the project using DDEV

   • run ddev start to start the project
     • HINT: If you haven't downloaded the backstopjs base image before, then it will be downloaded when ddev is (re)started. The backstopjs/backstopjs is about 2.6GB, so this may take some time.

3. Run the project using composer

   • first, run ddev composer install to install all required packages
     • this will force an unattended TYPO3 installation based on the TYPO3_INSTALL_* variables set in .ddev/config.yaml
   • afterward, run ddev composer install so that the configured composer scripts are executed as defined

4. Open the project using ddev launch or manually via:

   • Backend: https://t3cmd24.ddev.site/typo3/
   • Frontend: https://t3cmd24.ddev.site/

Visual regression testing with BackstopJS

1. Generate reference images

   ddev backstop reference --config=backstop.js --id=introduction
   

   • this will execute the backstop reference command for the introduction site/scenario processed in the tests/backstop/backstop.js file

2. Generate test images and compare them with the reference images

   ddev backstop test --config=backstop.js --id=introduction
   

   • this will execute the backstop test command for the introduction site/scenario processed in the tests/backstop/backstop.js file

3. Open results html report

   ddev backstop-results --id introduction
   

   • this wraps the backstop openReport command and opens the html report for the introduction site/scenario in your default browser

4. Play with the configs and/ or change some content in the TYPO3 backend and re-run the backstop test

   • by default the "scenarios" list defined in the tests/backstop/sites/introduction/config.js file contains only the startpage
     • you can add more scenarios to test by adding them to the scenarios array in the config.js file manually OR
     • you require the the scenarios.js file in the config.js file
       • the scenarios.js file can be filled/generated by utilizing the TYPO3 sitemap via:

         ddev execute php tests/backstop/sitemap-loader.php introduction https://t3cmd24.ddev.site/sitemap.xml