merge screenshot testing workflows

.github/workflows/screenshot-comparison.yml

@@ -1,49 +1,56 @@
-name: screenshot comparison
+name: Screenshot comparison
 
 on:
   push:
     branches:
-      - '*'
+      - "*"
   pull_request:
     branches:
-      - '*'
+      - "*"
 
 jobs:
   check-screenshot:
     name: Check Screenshot
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-    - name: Install node
-      uses: actions/setup-node@v4
-      with:
-       node-version: '21.x'
-    - name: Install Python
-      uses: actions/setup-python@v5
-      with:
-        python-version: '3.11'
-        architecture: 'x64'
-    - name: Install dependencies
-      run: 
-        pip install --upgrade pip
-        pip install --upgrade jupyterlab
-        pip install --upgrade voila
-        pip install --upgrade voila-osscar-template
-        pip install -e .
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "21.x"
+      - name: Install Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+          architecture: "x64"
+      - name: Install dependencies
+        run: pip install --upgrade pip
+          pip install --upgrade jupyterlab
+          pip install --upgrade voila
+          pip install --upgrade voila-osscar-template
+          pip install -e .
+          pip install --upgrade selenium
+          pip install --upgrade Pillow
 
-    - name: Run the voila server
-      run: |
-        voila --template=osscar --enable_nbextensions=True example/ --port 8383 --no-browser &
-        pip install --upgrade pytest
-        pip install --upgrade selenium
-        pip install --upgrade Pillow
+      - name: Run the voila server
+        run: |
+          voila --template=osscar --enable_nbextensions=True example/ --port 8383 --no-browser &
 
-    - uses: nanasess/setup-chromedriver@master
-    - run: |
-        export DISPLAY=:99
-        chromedriver --url-base=/wd/hub &
-        sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional
-        python3 $GITHUB_WORKSPACE/test/test.py
-        python3 $GITHUB_WORKSPACE/test/test_figures.py
+      - uses: nanasess/setup-chromedriver@master
+      - name: Generate the screenshots
+        run: |
+          export DISPLAY=:99
+          chromedriver --url-base=/wd/hub &
+          sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional
+          python3 $GITHUB_WORKSPACE/test/test.py
 
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v4
+        with:
+          name: artifact
+          path: "./*.png"
+
+      - name: Compare the screenshots to the reference one
+        run: |
+          python3 $GITHUB_WORKSPACE/test/test_figures.py

README.md

@@ -2,7 +2,6 @@
 
 [![PyPI version](https://badge.fury.io/py/widget-bandsplot.svg)](https://badge.fury.io/py/widget-bandsplot)
 [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/osscar-org/widget-bandsplot/main?labpath=%2Fexample%2Fexample.ipynb)
-[![widget test](https://github.com/osscar-org/widget-bandsplot/actions/workflows/widget-test.yml/badge.svg)](https://github.com/osscar-org/widget-bandsplot/actions/workflows/widget-test.yml)
 [![screenshot comparison](https://github.com/osscar-org/widget-bandsplot/actions/workflows/screenshot-comparison.yml/badge.svg)](https://github.com/osscar-org/widget-bandsplot/actions/workflows/screenshot-comparison.yml)
 
 A Jupyter widget to plot band structures and density of states. The widget is using the [mc-react-bands](https://github.com/materialscloud-org/mc-react-bands) Javascript package and is turned into a Jupyter widget with [anywidget](https://anywidget.dev/).
@@ -97,8 +96,6 @@ This will
 
 ### Github workflow testing
 
-[![widget test](https://github.com/osscar-org/widget-bandsplot/actions/workflows/widget-test.yml/badge.svg)](https://github.com/osscar-org/widget-bandsplot/actions/workflows/widget-test.yml)
-
 If the `widget test` fails, it indicates there is something wrong with the code, and the widget is NOT
 being displayed correctly in the test.
 
@@ -108,6 +105,10 @@ If the `widget test` passes but the `screenshot comparison` fails, it indicates
 is different from the previous version. In this case, you'll need to manually download the artifact from
 the `widget test` and use it to replace the `widget-sample.png` figure in the `test` folder.
 
+The `screenshot comparison` test will generate images of the widget using `selenium` and `chrome-driver`, and compares them to the reference image in `test/widget-sample.png`.
+
+To update the reference image: download the generated image from the Github Workflow step called "Upload screenshots" and replace `test/widget-sample.png`.
+
 ## Acknowledgements
 
 We acknowledge support from the EPFL Open Science Fund via the [OSSCAR](http://www.osscar.org) project.