Adding visual regression testing with BackstopJS#5
Conversation
| ./scripts/load_release.sh onsdigital/design-system $(DESIGN_SYSTEM_VERSION) | ||
|
|
||
| run: |
There was a problem hiding this comment.
Think it would be good to run load-design-system-templates as part of this command so they are always loaded in when you run the application. The docs will need updating for this
|
|
||
| ``` | ||
| pip install Flask | ||
| pip install Flask python-frontmatter |
There was a problem hiding this comment.
Think we should be using a python package manager like poetry rather than pip but again probably something for another PR
| To run/automate the Visual Tests, BackstopJs is used, comparing screenshots overtime.To install BackstopJs run | ||
|
|
||
| ``` | ||
| npm install -g backstopjs |
There was a problem hiding this comment.
To be consistent with the DS we should probably use yarn not npm
There was a problem hiding this comment.
As discussed in prev tech session, when I try to install yarn its downloading too many packages that I think are not required. Can you check this and tell me if its doing the same for you also
|
|
||
| `make generate-backstopjs`: This python file generates `backstop.json` file with specified Design System URLs,screen sizes, DOM selectors etc. | ||
|
|
||
| `backstop test`: This creates a set of screenshots and compares them with reference screenshots and shows any changes in the visual report.(`backstop_data/html_report`).Note-: Make sure to keep the local server running before executing this step. |
There was a problem hiding this comment.
I think it make sense for this command and the approve one to also be added to the makefile
| TEMP_FILE=$(mktemp) | ||
|
|
||
| sed "/set CDN_version/d" "templates/external-css.html" > temp_file && mv temp_file "templates/external-css.html" | ||
| echo "{% set CDN_version = '${TAG_NAME}' %}" | cat - "templates/external-css.html" > "$TEMP_FILE" | ||
|
|
||
| mv "$TEMP_FILE" "templates/external-css.html" | ||
| rm -rf "${TEMP_FILE}" | ||
|
|
There was a problem hiding this comment.
This isnt needed if we use the page template
rmccar
changed the title
Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>
Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>
Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>
Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>
Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>
Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>
Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>
rmccar
force-pushed
the
testing-to-include-backstopjs
branch
from
632a7ec to
f38b29e
Compare
2 participants
What is the context of this PR?
This PR is raised as as per 3086 in the Design System.
Following things are changed in this repo:
How to review this PR