Add screenshots workflow #796
Conversation
|
| name: Screenshots | ||
|
|
||
| on: | ||
| push: |
There was a problem hiding this comment.
This allows us to collect a new baseline (or 'Before' screenshot) each time a new change is merged to main.
There was a problem hiding this comment.
Obviously we'll only know that works correctly for sure once this PR is merged! For the purposes of the example comment on this PR, the 'Before' screenshot was captured via this hack.
There was a problem hiding this comment.
So if the branch is main this runs up to and including the "Upload screenshot" step, but doesn't add the comments?
| runs-on: ubuntu-latest | ||
|
|
||
| steps: | ||
| - uses: actions/checkout@v2 |
There was a problem hiding this comment.
A lot of this code is duplicated between several workflow files, which is a pain. Unfortunately GitHub Actions doesn't provide a good way to share these steps between multiple workflows yet. See actions/runner#646 for more details.
There was a problem hiding this comment.
If we wrote an action to combine these steps would that work?
There was a problem hiding this comment.
Yes, we could write our own action, or a small bash script.
There was a problem hiding this comment.
There is a thing called a composite action, but it won't allow you to have the uses syntax (and therefore you can't simply reference other actions, like we do here)
| - name: Take screenshot of apps-rendering | ||
| uses: "lannonbr/[email protected]" | ||
| with: | ||
| url: http://localhost:8080/ |
There was a problem hiding this comment.
Obviously we could capture a more interesting collection of screenshots here!
There was a problem hiding this comment.
Do you mean a different page, or a list of pages?
There was a problem hiding this comment.
I guess taking screenshots of several different articles would help us to catch more problems?
| env: | ||
| AWS_ACCESS_KEY_ID: ${{ secrets.CI_IMAGE_UPLOADER_ACCESS_KEY_ID }} | ||
| AWS_SECRET_ACCESS_KEY: ${{ secrets.CI_IMAGE_UPLOADER_SECRET_ACCESS_KEY }} | ||
| - name: Prepare image urls |
There was a problem hiding this comment.
This is all getting a bit ugly - we could write our own Javascript action (and store it within this repo) if this bothers people too much.
There was a problem hiding this comment.
This sounds like a nice solution longer term, if we'd like to port this functionality to other projects.
| env: | ||
| AWS_ACCESS_KEY_ID: ${{ secrets.CI_IMAGE_UPLOADER_ACCESS_KEY_ID }} | ||
| AWS_SECRET_ACCESS_KEY: ${{ secrets.CI_IMAGE_UPLOADER_SECRET_ACCESS_KEY }} | ||
| - name: Prepare image urls |
There was a problem hiding this comment.
This sounds like a nice solution longer term, if we'd like to port this functionality to other projects.
| echo "::set-output name=before::https://gu-mobile-pr-images.s3-eu-west-1.amazonaws.com/$MAIN_COMMIT_SHA/screenshot.png" | ||
| echo "::set-output name=after::https://gu-mobile-pr-images.s3-eu-west-1.amazonaws.com/${{ github.sha }}/screenshot.png" |
There was a problem hiding this comment.
Are ::set-output and name=before:: special GH Actions syntax?
There was a problem hiding this comment.
Yep - here is the documentation.
| - name: Take screenshot of apps-rendering | ||
| uses: "lannonbr/[email protected]" | ||
| with: | ||
| url: http://localhost:8080/ |
There was a problem hiding this comment.
Do you mean a different page, or a list of pages?
| runs-on: ubuntu-latest | ||
|
|
||
| steps: | ||
| - uses: actions/checkout@v2 |
There was a problem hiding this comment.
If we wrote an action to combine these steps would that work?
| name: Screenshots | ||
|
|
||
| on: | ||
| push: |
There was a problem hiding this comment.
So if the branch is main this runs up to and including the "Upload screenshot" step, but doesn't add the comments?
Why are you doing this?
This PR adds functionality for automatically capturing screenshots from a running version of each pull-request branch and comparing them with screenshots captured from the main branch. It builds upon the work started in #684, which allows us to run the application within the GitHub Actions infrastructure.
During my original experiment I was planning to replace the PR deployment workflow with this new one, but I noticed that a few people are already using PR deployments in their current form (🎉). Perhaps it is useful to keep both as they have slightly different use-cases.
https://theguardian.atlassian.net/browse/LIVE-605
Changes
Screenshots
See below 🤞