Comments (3)
I know this one! The report expects to be served from a non-root path. Something like /backstop_data/html_report/index.html
. The tests (and reference images) are actually working, but the images are missing from the UI.
The regression site is throwing 404s for the images.
Double check the paths... where are those images actually located in surge.sh's filesystem?
It may be easiest to change the action to upload the full path, or use something like patch-package
to change what the reporter generates for the images.
I made a similar hack for backstop remote
, via the express server.
Hope this helps. Cheers!
from backstopjs.
Reporting that this worked, as you very well said, I wasnt including the backstop_data files. Now for reference I am doing the following
name: tests - visual regression
on:
pull_request:
branches:
- '**'
jobs:
tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 21
cache: 'npm'
- name: Install dependencies
run: |
npm i
- name: Build storybook
run: npm run build-storybook
- name: Deploy storybook to Surge
run: |
BRANCH_NAME=$(echo ${{ github.ref }} | sed 's/refs\/heads\///g' | sed 's/\//-/g')
DOMAIN="ever-storybook-${BRANCH_NAME}.surge.sh"
npx surge --project storybook-static --domain $DOMAIN --token ${{ secrets.SURGE_TOKEN }}
echo "STORYBOOK_URL=https://$DOMAIN" >> $GITHUB_ENV
- name: Run Visual Regression Tests
run: |
node ./backstop_data/backstop-init.mjs ${{ env.STORYBOOK_URL }}
cat ./backstop_data/backstop.json
ls -la backstop_data
ls -la backstop_data/bitmaps_reference
npm run backstop:test
- name: Upload backstop_data artifact
if: failure()
uses: actions/upload-artifact@v3
with:
name: backstop_data
path: backstop_data/
- name: Check bitmaps_test directory
if: failure()
run: ls -la backstop_data/bitmaps_test
- name: Deploy Backstop.js report to Surge
if: failure()
run: |
BRANCH_NAME=$(echo ${{ github.ref }} | sed 's/refs\/heads\///g' | sed 's/\//-/g')
DOMAIN="ever-visual-regression-${BRANCH_NAME}.surge.sh"
cp -r backstop_data/html_report/* backstop_data/ // <- this is what I added
npx surge backstop_data $DOMAIN --token ${{ secrets.SURGE_TOKEN }}
echo "Backstop.js report deployed to: https://$DOMAIN"
from backstopjs.
Thank you @dgrebb I will be trying that one today 🙇
from backstopjs.
Related Issues (20)
- Puppeteer Delay is not supported
- `scenario.misMatchThreshold` is ignored HOT 2
- `requireSameDimensions` property is not working HOT 1
- How to View snapshot comparisons when running backstop js in GH CICD workflows?
- Failed to launch the browser process when running inside of docker container HOT 3
- Request for Node Module Update to Enable Multiple Screenshot Support (createBitmaps.js, runPuppet.js) HOT 3
- Test errors, but there is no difference in the snapshots when observed with the naked eye HOT 2
- Ready event seems to be unreliable HOT 1
- Unreliable font loading causes difference between test and reference HOT 4
- Values of requireSameDimensions and misMatchThreshold are ignored
- Thank you ! What a nice tools this is. HOT 1
- Backstop running on GH – the tests are not passing, because of difference on text rendering HOT 2
- Significant degradation in performance using Docker
- Question about a feature HOT 1
- Backstop js give false result when greyed out or * iteam are missing on UI
- Does backstop also provide size and color details of UI components
- Puppeteer 21.3.2 brings breaking change HOT 6
- BackstopJS latest image is not for arm64 HOT 7
- Issue: about a backstop.json file HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from backstopjs.