Skip to content

Commit

Permalink
merge screenshot testing workflows
Browse files Browse the repository at this point in the history
  • Loading branch information
eimrek committed Aug 19, 2024
1 parent 9832a59 commit a615dfc
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 97 deletions.
76 changes: 42 additions & 34 deletions .github/workflows/screenshot-comparison.yml
Original file line number Diff line number Diff line change
@@ -1,49 +1,57 @@
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
54 changes: 0 additions & 54 deletions .github/workflows/widget-test.yml

This file was deleted.

12 changes: 3 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
Expand Down Expand Up @@ -97,16 +96,11 @@ 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.

[![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)

If the `widget test` passes but the `screenshot comparison` fails, it indicates the appearance of the widget
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

Expand Down

0 comments on commit a615dfc

Please sign in to comment.